背景

アクセス数が少ない静的Webサイトをさくらインターネットのレンタルサーバーで運用してたんですが、このご時世で値上げに。。
コスト減をするためにAWS S3で静的Webコンテンツを公開することにしました。運用レベルのアクセス数(数百リクエストであればほぼ$0.00で運用出来そうでしたので。。

最初、S3 のみで静的Webサイトホスティングを考えていました。
しかし、S3は HTTP アクセスのみ可で HTTPS アクセスはできないようです。

 Client ---(http)--- S3

ところが、S3 に CloudFront を組み合わせることでHTTPSアクセスができる事が分かりました。(CloudFrontにHTTPでアクセスした際も、HTTPSにリダイレクトできます。)

 Client ---(https)--- CloudFront ----- S3

ということで、S3 + CloudFront でHTTPS静的Webサイトを構築することにしました。

S3 側の設定

バケットの作成

まず、バケットの作成を行います。

バケット名は、グローバルで一意にする必要があります。

いったん[パブリックアクセスをすべてブロック]のチェックを外します。
後でCloudFrontからのみアクセスするようにしますが、今回はHTTPアクセスのテストをするため、パブリックアクセス許可にしておきます。

ファイルアップロード

バケットを作成したら、作成したバケットからファイルをアップロードします。
今回は、htmlとそこで使うjpeg,cssをアップしました。

静的ウェブサイトホスティングを有効に

作成したバケットの[プロパティ]から[静的ウェブサイトホスティング]を有効にします。

バケットポリシーを追加

まだこのままでは、ポリシーがないためインターネット側からはアクセスが不可です。
作成したバケットから、[アクセス許可]で、以下のバケットポリシーを追加します。
以下ポリシーの[hoge-test-bucket]の所は、作成したバケット名になります。

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

これで、バケットの[プロパティ]→[静的ウェブサイトホスティング]にあるURLにブラウザからアクセスするとHTTPでコンテンツが表示できます。
URLは http://バケット名.s3-website-リージョン.amazonaws.com という書式になるようです。

↑のように正しく表示されました。

CloudFront の設定

S3によるHTTPアクセスは出来たので、今度はCloudFront経由でのアクセスを設定してみます。

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

CloudFrontから、[ディストリビューションの作成]を押下します。

[Origin domain]項目は、クリックするとS3バケットを選べれるので、そこからS3で作成したバケットを選択します。
[Web サイトのエンドポイントを使用]というのが表示されますが、これは無視で。。
[オリジンアクセス]を[Origin access control settings (recommended)]にします。これによりS3アクセスのポリシーを作成できます。