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を選択