【 AWS S3 static website hosting 】 静的ファイルをS3でホスティングする。（https対応）

AWSでインスタンスを立てて運用していたのですが、

ランニングコストを下げるためにAWSのS3で静的サイトをホスティングしてみました。

手順

1. S3バケットを作成し、index.html（表示させたいファイル）をアップロード 2. S3バケットのアクセス権限とプロパティエンドポイントの設定 3. Cloudfront distributionの設定。※ACM取得 4. Route53の設定

S3バケットを作成し、表示させたいファイルをアップロード

バケット作成においては、特に設定はありませんので、"バケットを作成"ボタンで作成します。
※ S3バケットの名前は、必ず公開したいドメイン名で設定してください。
ex) https://issho.io => issho.io

単なる静的サイトであれば、html/css/Javascriptをアップして終了です。

僕の場合、create react appで作成したので、一度buildが必要でした。

なぜかディレクトリごとまとめてアップする場合、ドラッグ＆ドロップでしかUPできなかった謎が残る...。

S3バケットのアクセス権限とプロパティエンドポイントの設定

アクセス権限タブ ＞ バケットポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[バケット名]/*"
        }
    ]
}

プロパティタブ ＞ Static website hosting

インデックスドキュメントとエラードキュメントをそれぞれ指定する。

Cloudfront distributionの設定 ※ACM取得

Cloudfrontで証明書を使うために us-east-1 (N. Virginia) で、事前に証明書を発行する必要があります。
他のリージョンに既存である場合も、併用不可なので、新規作成をしてください。

Create Distribution > Web: Get Started

- Origin Settings

Origin Domain Name > S3 Static website hostingのエンドポイント > Origin ID自動設定

Restrict Bucket Access > Yes

Origin Access Identity > Yes

Grant Read Permissions on Bucket > Yes, Update Bucket Policy

- Default Cache Behavior Settings

Viewer Protocol Policy > Redirect HTTP to HTTPS

- Distribution Settings

Alternate Domain Names (CNAMEs) > ドメイン名

SSL Certificate > Custom SSL Certificate (example.com): > 事前に作成したus-east-1のACM　

Default Root Object > S3のインデックスドキュメントの指定ファイル名（index.html）

Create Distribution で作成に入ります。

StatusがDeployedになったら完了です。　※１５分くらいかかりました。

Route53の設定

最後です。

Hosted zones > 対象のドメインを選択

Type > A - IPv4 address
Alias > Yes
Alias Target > 作成したCloudFront Distributionを選択

#### DONEです、お疲れ様でした。