静的ウェブサイトをホストするのに最適なのはAmplify?CloudFront?

はじめに

　今回は、簡単な静的ウェブサイトをホストするためには、AWSサービスのAmplify Hostingを利用するのが良いのか、S3 + CloudFrontを利用するのが良いのかについて調べたものを簡単にまとめました。

Amplify Hostingとは

Amplify Hostingとは、Webサイトやモバイルアプリの開発・ホスティングを簡単にできるサービスです。

特徴としては、Gitなどのツールと連携することでCI/CDをサポートしています。また、「SSRフレームワーク(Server-side Rendering)」、「SPAフレームワーク(Single Page Application)」、「静的サイトジェネレーター(Static Site Generator)」などで構築したサイトをホスティングすることができます。

CloudFrontとは

CloudFrontとは、静的/動的ウェブコンテンツ（html, css, js, imageファイルなど）の配信を高速化するサービスです。エッジロケーションというデータセンターのネットワークを経由してコンテンツを配信しています。

特徴としては、CloudFrontで配信されているサービスをユーザがリクエストすると、リクエストはエッジロケーションにルーティングされるため、レイテンシーを最小にすることができます。エッジロケーションにコンテンツがある場合はそれを配信し、ない場合はオリジンから取り込んでキャッシュし、配信するという流れです。

静的ウェブサイトのホストについて

Amplify Hosting、CloudFrontともに、S3バケットに格納したファイル（html, imageファイルなど）をウェブサイトとして公開することができます。

Amplify Hostingでの静的ウェブサイトホスト

Amplify Hostingの特徴は以下のようなものがあります。

・CloudFrontを使用した、グローバルに利用可能なCDNへの自動デプロイ
・HTTPSをサポート
・ACMで管理する独自のカスタムSSL証明書を活用可能
・アクセスログを自動で保存し、CloudWatchと連携してサイトをモニタリング可能
・ウェブサイトのパスワード保護を設定可能
・リダイレクト/リライトルールを設定可能
・Git連携によってCI/CD、自動デプロイが容易に可能

注意点

Amplify Hostingを利用する上での注意点として、クロスアカウントS3バケットアクセスをサポートしていないため、自分のアカウントにあるS3バケットからのみデプロイ可能です。また、AmplifyをサポートしていないリージョンではS3バケットにファイルを格納したとしてもホストすることができないという点にも注意が必要です。

S3 + CloudFrontでの静的ウェブサイトホスト

S3 + CloudFrontでの静的ウェブサイトホストには、以下の特徴があります。

・S3バケットにアップロードするだけで配信可能
・CloudFrontコンテンツ配信ネットワークを使用することで、高速に配信可能
・OAC¹を設定することで、CloudFrontを通じてのみサイトアクセスできるように制限可能
・CI/CDや自動デプロイはサポートしておらず実装する必要がある

疑問（Amplify Hostingの中でCloudFrontを使用している？）

Amplify Hostingの特徴の１つに、CloudFrontを利用しているとありましたが、それはなぜなのでしょう。
CloudFrontは、単一ではCDNサービスであり、S3などをオリジンに指定することによって静的ウェブサイトホスティングを可能にしています。そのため、CloudFront単体では静的ウェブサイトホスティングを実現することはできません。
一方、Amplify HostingはAmplify Hosting単体で静的ウェブサイトホスティングを実現しています。S3に静的ファイルを格納するだけで、配信部分をAWSが自動で行い、そこにCloudFrontが利用されています。

【Amplify Hosting】 vs 【S3 + CloudFront】

では、どのようにしてAmplify HostingとS3 + CloudFrontを使い分けると良いのでしょうか。

主な違い

	Amplify Hosting	CloudFront
オリジン	S3のみ	S3、EC2、オンプレなど
配信設定	詳細な設定不可	詳細な設定可能
Git連携	可能	単体不可（外部構築が必要）
自動デプロイ	対応	非対応（外部構築が必要）
拡張性・柔軟性	管理・運用が楽だが制約あり	柔軟に管理・運用可能

結論として、「S3に置いた静的ファイルをCDNで配信できる」という点ではどちらも共通ですが、Amplify Hostingは運用の手間を減らしたい場合や開発効率を重視する場合におすすめで、S3 + CloudFrontは高度なセキュリティ要件や詳細設定が必要な場合に向いています。また、S3以外をオリジンに設定する場合にはCloudFrontを利用します。

まとめ

今回は、静的ウェブサイトホスティングを実現する際に、Amplify HostingとS3 + CloudFrontのどちらを使用するべきかという観点でまとめました。

個人的には、個人の簡易的なサイトを公開する場合にはAmplify Hostingでよいのかなと思いました。

1. OACとは
   OAC(Origin Access Control)は、CloudFrontからS3バケットへのアクセスを制御する仕組み。OAC経由のみでS3バケットへのアクセスを許可することで、直接S3のURLへアクセスしても拒否され、CloudFrontが認証して配信する経路だけが許可される。
   ※OAI(Origin Access Identity)は従来の方式で、現在はOACが推奨されています。 ↩