CloudFront×S3で静的サイトをホスティングする

AWS（Amazon Web Services）を利用した静的サイトのホスティングは、高速かつスケーラブルなウェブサイトを提供するための理想的な方法です。特に、Amazon S3（Simple Storage Service）とAmazon CloudFrontを組み合わせることで、効率的で安全なホスティング環境を構築できます。本記事では、S3とCloudFrontを使って静的サイトをホスティングする手順について詳しく説明します。

S3についておさらいしたい人は以下のリンクから

AWS S3とは何か？ - アルアカ - Arcadia Academia

Amazon S3（Simple Storage Service）は、Amazon Web Services（AWS）が提供するスケーラブルで高い可用性を誇るオブジェクトストレージサービスです。

https://ar-aca.tech

1. Amazon S3の設定

S3バケットの作成

まずは、Amazon S3コンソールにアクセスし、静的サイトのファイルを保存するためのS3バケットを作成します。

S3コンソールで「Create bucket」をクリックします。
バケット名を入力し、リージョンを選択します。バケット名は一意である必要があります。
その他の設定はデフォルトのままで構いませんが、「Block all public access」はオフにしておきます。
「Create bucket」をクリックしてバケットを作成します。

静的ウェブホスティングの有効化

次に、作成したS3バケットで静的ウェブホスティングを有効にします。

S3バケットの「Properties」タブに移動します。
「Static website hosting」を選択し、「Use this bucket to host a website」を選びます。
インデックスドキュメント（通常はindex.html）とエラードキュメント（通常はerror.html）を指定します。
設定を保存します。

バケットポリシーの設定

サイトをパブリックにアクセス可能にするために、バケットポリシーを設定します。

「Permissions」タブに移動し、「Bucket Policy」を選択します。
以下のようなポリシーを追加します（バケット名は適宜変更してください）：


{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}

「Save」をクリックしてポリシーを適用します。

2. CloudFrontの設定

ディストリビューションの作成

Amazon CloudFrontを使って、S3バケットからのコンテンツ配信を加速します。

CloudFrontコンソールで「Create Distribution」をクリックします。
「Web」を選択し、「Get Started」をクリックします。
オリジンドメイン名に、先ほど作成したS3バケットのエンドポイントを入力します。
「Origin ID」は自動生成されますが、変更しても構いません。
「Viewer Protocol Policy」は「Redirect HTTP to HTTPS」に設定し、セキュアな接続を強制します。
「Default Root Object」にはindex.htmlを指定します。
その他の設定はデフォルトのままで構いません。
「Create Distribution」をクリックしてディストリビューションを作成します。

ディストリビューションの設定確認

作成したディストリビューションの設定を確認し、S3バケットからのコンテンツ配信が正しく行われるようにします。

CloudFrontコンソールで、作成したディストリビューションのIDをクリックします。
「Behaviors」タブで、デフォルトのビヘイビアを確認し、「Viewer Protocol Policy」が「Redirect HTTP to HTTPS」に設定されていることを確認します。
「Origins」タブで、S3バケットが正しく設定されていることを確認します。

3. サイトのアップロードとテスト

ファイルのアップロード

ローカルで作成した静的サイトのファイルをS3バケットにアップロードします。

S3コンソールで、作成したバケットを選択します。
「Upload」をクリックし、サイトのファイルをアップロードします。

サイトのテスト

CloudFrontのディストリビューションURLを使用して、サイトが正しく表示されることを確認します。これにより、S3からの直接アクセスよりも高速にコンテンツが配信されるはずです。

まとめ

Amazon S3とCloudFrontを利用することで、静的サイトを迅速かつ効率的にホスティングすることができます。S3は安全でスケーラブルなストレージを提供し、CloudFrontはコンテンツ配信を加速します。これにより、ユーザーに優れたパフォーマンスを提供することができます。ぜひ、この手法を活用して、高速かつ信頼性の高いウェブサイトを構築してみてください。

アルアカ - Arcadia Academia