S3 で静的コンテンツを配信する

このハンズオンでは、S3 と CloudFront を使用して静的コンテンツを配信する方法を学習します。

S3 のみを使用する方法（非推奨）と S3 と CloudFront を組み合わせて静的コンテンツを配信する２種類の方法を紹介します。

S3 のみを使用する場合の構成

CloudFront と S3 を組み合わせる場合の構成

S3 とは

Amazon S3

CloudFront とは

Amazon CloudFront

Web Site Hosting を使用する

Web ブラウザから S3 のバケットに直接アクセスできるようにして、静的コンテンツを配信する方法です。

以下の手順で静的 Web サイトを配信します。

バケットを作成する
静的 Web サイトホスティングを有効にする
Public access を有効にする
バケットポリシーを設定する
コンテンツをバケットにアップロードする

この方法では HTTPS でアクセスすることはできないため、注意が必要です。

バケットを作成する

S3 サービスの画面からバケットを作成します。

General configuration

Bucket name: 任意の値を指定する (すべてのリージョンで一意にする必要がある)
AWS Region: データを保管するリージョンを選択する

静的 Web サイトホスティングを有効にする

S3 の画面でバケットを選択 -> Properties タブを選択し、Static website hosting を有効にします。

一番下の「Static website hosting」で「Edit」を押します。

Static website hosting

Enable を選択

Index document

index.html を入力する

Public access を有効にする

S3 の画面でバケットを選択 -> Permissions タブを選択し、Public access を有効にします。

「Block public access (bucket settings)」で「Edit」を押します。

Block public access (bucket settings)

Block all public access のチェックを外して、「Save changes」を押します。

Public access を有効にしてよいか確認するダイアログが表示されますので、confirm を入力して「Confirm」を押します。

バケットポリシーを設定する

S3 の画面でバケットを選択 -> Permissions タブを選択します。

「Bucket policy」で「Edit」を押してバケットポリシーを設定します。

以下のポリシーを貼りつけて「Save Changes」を押します。

Bucket-Name は自分で作成したバケットの名前に置き換えてください。

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

ポリシーを貼り付けた結果

コンテンツをバケットにアップロードする

コンテンツを S3 にアップロードします。

コンテンツをアップロードしたら、ブラウザから S3 の URL にアクセスして静的コンテンツが表示されることを確認しましょう。

S3 の URL

S3 の画面でバケットを選択 -> Properties タブを選択、Static website hosting に記載されています。

CloudFront を使用する

インターネットから S3 のバケットに直接アクセスするのではなくインターネットから CloudFront を経由して S3 のバケットに保管したコンテンツにアクセスします。

以下の手順でコンテンツを配信します。

バケットを作成する
コンテンツをバケットにアップロードする
CloudFront でディストリビューションを作成する
S3 のバケットポリシーを更新する

バケットを作成する

S3 サービスの画面からバケットを作成します。
Web Site Hosting を使用するで作成したバケットとは別のバケットです。

General configuration

Bucket name: 任意の値を指定する (すべてのリージョンで一意にする必要がある)
AWS Region: データを保管するリージョンを選択する

コンテンツをバケットにアップロードする

コンテンツを S3 にアップロードします。

CloudFront でディストリビューションを作成する

CloudFront のサービスに移動し、「Create distribution」を押してディストリビューションを作成する

Origin domain
作成した S3 バケットを選択
Origin access
Origin access control settings (recomended) を選択
Origin access control:
「Create control setting」を押す
ポップアップが表示されるのでそのまま「Create」を押す
Web Application Firewall (WAF)
Do not enable security protections を選択する
Default root object
index.html を入力する