AWS
S3
SSL
CloudFront
Hosting

【 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

メモ 2018-08-05 18-48-40.png

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

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になったら完了です。 ※15分くらいかかりました。

Route53の設定



最後です。

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

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


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