～2021年9月27日でのAWSのコンソールで確認～
大まかな手順
- S3に静的Webサイトをデプロイする
- 独自ドメインを取得し、Route53に登録する
- AWS Certificate Managerで証明書発行
- CloudFrontからS3にアクセスできるようにする
- S3への直アクセスを制限する
- Route53にCloudFrontのドメインを登録
S3に静的Webサイトをデプロイする
チュートリアル: Amazon S3 での静的ウェブサイトの設定がわかりやすい
独自ドメインを取得し、Route53に登録する
ACMで証明書発行
ACMを発行する際、リージョンはバージニア北部にする
- AWS Certificate Managerのコンソール画面＞証明書のリクエスト
- パブリック証明書のリクエストを選択＞証明書のリクエストをクリック
-
*.取得したドメインを入力 - DNSの検証を選択
- 任意のタグをして
- 確定とリクエスト
- 検証状態のステータスが「検証保留中」になっていることを確認する
- Route53でのレコードの作成 をクリック
- レコード作成のポップアップが表示＞作成 をクリック
しばらく待つ。今回は30秒ほどでした
CloudFront経由でS3のバケットを公開する
- CloudFront＞ディストリビューション＞ディストリビューションを作成
-
オリジンの設定
オリジンドメイン：クリックして今回作成したS3バケット名を選択
オリジンパス：空白でOK
S3バケットアクセス：はい、OAI を使用します を選択
新しいOAIを作成をクリック
バケットポリシー：はい、バケットポリシーを更新します を選択 -
デフォルトのキャッシュビヘイビア
ビューワープロトコルポリシー：Redirect HTTP to HTTPS
-
設定
代替ドメイン名 (CNAME) ：
www.取得したドメインを入力
カスタム SSL 証明書：今回ACMで作成した証明書を選択
デフォルトルートオブジェクト：index.html 作成したディストリビューションのドメイン名にブラウザでアクセス
S3への直接アクセスを制限する
- S3＞該当のバケット＞アクセス許可タブ
- ブロックパブリックアクセス (バケット設定)を編集 パブリックアクセスをすべて ブロックにチェックを入れる
- バケットポリシーを編集する
"Sid": "PublicReadGetObject"の{}で囲まれた範囲を削除する"Sid": "2",の2を1にする - S3バケットウェブサイトエンドポイントのURLにアクセスすると、403エラーになることを確認する
Route53にCloudFrontのドメインを登録
- Route53＞ホストゾーン＞該当のホストゾーン＞レコードを作成＞ クイック作成へ切り替える をクリック >レコード名：CloudFrontで設定した代替ドメイン名 レコードタイプ：A 値の右にある「エイリアス」をオンにする エンドポイントを選択：CloudFrontディストリビューションへのエイリアス ディストリビューションを選択：CloudFrontのディストリビューションドメイン名を選択
ブラウザで確認する
作成したドメインをブラウザでアクセスする