はじめに
サーバーレスで静的ウェブサイトを構築する機会がありましたので、
備忘録も兼ねて手順等についてまとめたいと思います。
AWSでWebサイトの構築を考えている人の参考になれば幸いです。
アーキテクチャー
Cloud Front + S3 で 静的ウェブサイトを構築する場合、主に2つの方法があります。
今回は、Cloud FrontとS3間の接続にSSLを利用したかったので、①を採用しました。
① S3のREST API エンドポイントを使用する + Cloud FrontのOAIでアクセス制限する
② S3のウェブサイトエンドポイントを使用する
S3のウェブサイトエンドポイントとREST APIエンドポイントの主な違いは、下表の通りです。
※「ウェブサイトエンドポイントと REST API エンドポイントの主な違い 」より一部抜粋。
| 項目 | REST API エンドポイント |
ウェブサイト エンドポイント |
|---|---|---|
| サポートされるリクエスト | すべてのオペレーション | GETリクエスト HEADリクエスト |
| エラーレスポンス形式 | XML | HTML |
| リダイレクトのサポート | × | 〇 |
| SSLのサポート | 〇 | × |
上記以外にもREST APIエンドポイントを使用する場合、
Cloud Frontでデフォルトのルートオブジェクトを指定する際に、
Cloud Frontはサブディレクトリのルートオブジェクトを返すことができない等
細かな違いがあるので、実現したい要件に合わせて選択する必要があります。
※ CloudFront がサブディレクトリからデフォルトのルートオブジェクトを返さないのはなぜですか?
Webサイト構成
構築するWebサイトの全体構成について記載します。
各サービスの主な役割は、以下の通りです。
-
Route53
Webサイトのドメイン名とCloud Frontを紐づけるDNSとして利用します。 -
Cloud Front
WebサイトのS3バケットをオリジンとするディストリビューションを作成し、
Webサイトのコンテンツ配信を行います。
今回は、エラー発生時にエラーページを表示する機能等もCloud Frontで実現します。 -
ACM
WebサイトのSSL証明書を管理します。
ACMでSSL証明書の発行 または SSL証明書をインポート してSSL証明書を登録します。
登録方法などの詳細については割愛します。 -
S3
WebサイトのHTML、JavaScript、CSS等のファイルを格納します。
S3バケットに対するパブリックアクセスは許可せず、Cloud FrontのOAIを利用して、
Cloud Front経由のアクセスだけを許可するようにします。
Webサイト構築
それでは、Webサイトの構築を行っていきます。
Amazon S3
S3バケットを作成して、ウェブサイトのコンテンツをアップロードします。
今回は、S3のREST APIエンドポイントを利用する為、
S3の静的ウェブホスティングは無効、ブロックパブリックアクセスはオンに設定します。
- パブリックアクセスをすべてブロック：オン
- 静的ウェブホスティング：無効
Cloud Front
WebサイトのS3バケットをオリジンとするディストリビューションを作成します。
Cloud FrontのOAIを設定して、Cloud Front経由のアクセスだけを許可するよう
S3のバケットポリシーを更新します。
- S3 bucket access：use OAI
- Origin access identity：xxxxx（OAIを選択）
- Bucket Policy：update the bucket policy
クライアントとCloud Front間の接続はSSLを利用する為、SSL証明書（※1）を選択します。
また、https://sample.com へアクセスした場合（※2）に https://sample.com/index.html を
返すようデフォルトのルートオブジェクトに"index.html"を設定します。
- Custom SSL certificate：xxxxx（SSL証明書を選択）
- Default root object：（例）index.html
※1 ACMのSSL証明書は、バージニア北部のリージョンに登録する必要があります。
※2 デフォルトのルートオブジェクトを設定しない場合、エラーが応答されます。
ディストリビューションの作成が完了したら、エラーが発生した場合にエラーページを
返すようエラーページの設定を行います。
ディストリビューションの"Error pages"より、Custom error responseを設定します。
- HTTP error code：（例）403
- Customize error response：Yes
- Response page path：（例）error.html
- HTTP Response code：（例）403
Route53
Webサイトのドメイン名とCloud Frontを紐づけるALIASレコードを設定します。
- レコード名：ドメイン名
- レコードタイプ：Aレコード
- エイリアス：ON
- トラフィックのルーティング先：Cloud Front ディストリビューションへのエイリアス
これで、Webサイトの構築は完了です。
ドメイン名にアクセスすればWebサイトが表示されるはずです。
Cloud Frontのディストリビューションのドメイン名からもアクセスできるので、
ドメイン名からアクセスできないときは試してみてください。
さいごに
Webサイトを構築する場合、LightsailやEC2でWebサーバを立てる方法もありますが、
アクセス数が少なければ Route53 + Cloud Front + S3 の方がコストを安く収える
ことが出来る場合もあると思いますので、選択肢として考えてみてはどうでしょうか？