～2021年9月27日でのAWSのコンソールで確認～
#大まかな手順
- S3に静的Webサイトをデプロイする
- 独自ドメインを取得し、Route53に登録する
- AWS Certificate Managerで証明書発行
- CloudFrontからS3にアクセスできるようにする
- S3への直アクセスを制限する
- Route53にCloudFrontのドメインを登録
#S3に静的Webサイトをデプロイする
チュートリアル: Amazon S3 での静的ウェブサイトの設定がわかりやすい
#独自ドメインを取得し、Route53に登録する
独自ドメインをRoute 53でホストする
#ACMで証明書発行
:::note warn
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のディストリビューションドメイン名を選択
#ブラウザで確認する
作成したドメインをブラウザでアクセスする