概要

AngularなどのSPAをS3+CloudFrontで表示する方法についてです。

要件

SSL/TLSを使いたい
https://example.com/hoge のようなサブディレクトリのようなパスで403にならないようにしたい
↑のようなパスでもOGPがきちんと表示される
リロードしても404にならない
S3バケットのファイルには直接アクセスできないようにしたい

以前のケースとの比較

過去に

S3 + CloudFrontにした時にハマったこと - Carpe Diem
Angularで作ったサイトでリロードすると404エラー - Carpe Diem

で似たようなケースに対応しました。しかしこれらは先の要件である

3. ↑のようなパスでもOGPがきちんと表示される
や
5. S3バケットのファイルには直接アクセスできないようにしたい

を満たせていませんでした。今回はそちらを考慮します。前提として

S3 + CloudFrontにした時にハマったこと - Carpe Diem

を行った後として進めます。

S3の設定

Static web hosting

Static web hostingをOFFにしておきます。

f:id:quoll00:20170525094540p:plain

CloudFrontの設定

Origins

OriginsをStatic web hostingからS3 Bucketに変更します。

f:id:quoll00:20170525094916p:plain

その際にポイントなのがRestrict Bucket AccessをONにすることです。これでS3側のオブジェクトに別途権限を与えない限り、CloundFront経由のアクセスしかファイルにアクセスできなくなります。
つまり5. S3バケットのファイルには直接アクセスできないようにしたいを保証できます。

これを設定すると、S3側では以下のようにバケットポリシーが自動で追加されます。

f:id:quoll00:20170525101102p:plain

テキストに書き出すと以下です。

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity xxxxxxxxx"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}