Amazon Route 53とAWS WAFと Amazon CloudFrontとAmazon S3で 独自ドメインホスティング環境を構築してみた

MIERUNE 社内勉強会 #027 発表資料
https://mierune.github.io/mierune-log/posts/study-meeting-027

Google Slides
https://docs.google.com/presentation/d/e/2PACX-1vSt2jMqc5XMd--jbOjul9012F163IKkoIMXjEthQ8gdyNUebdmkvi-C6i1Y3g8Q-NcRcVsg57Wo77oM/pub?start=false&loop=false&delayms=3000

1. Amazon Route 53とAWS WAFと Amazon CloudFrontとAmazon S3で 独自ドメインホスティング環境を構築してみた © MIERUNE © MapTiler © OpenStreetMap contributors Yasunori Kirimoto 2022.02.10 MIERUNE 社内勉強会 #027
2. Location-based Architect Yasunori Kirimoto Owner of Co-founder and CTO of Member of
3. Amazon CloudFront Amazon Route 53とAWS WAFとAmazon CloudFrontとAmazon S3で 独自ドメインホスティング環境を構築してみた Amazon S3 AWS WAF Amazon Route 53
4. Contents 1. Amazon Route 53で独自ドメイン購入登録 2. Amazon CloudFrontとAmazon S3を組み合わせた公開 3. Amazon Route 53でAmazon CloudFront用Aレコード作成 4. Amazon CloudFrontでSSL証明書設定 5. AWS WAFとAmazon CloudFrontを組み合わせた公開 6. まとめ
5. Amazon Route 53で独自ドメイン購入登録
6. 「ドメインの登録」をクリック 購入したいドメインを検索 → 「カートに入れ る」をクリック → 「続行」をクリック
7. 各連絡先を入力 → 「続行」をクリック
8. メール認証後に自動更新と利用規約を確認 → 「注文を完了」をクリック
9. 「ドメインに移動」をクリック 保留中のリクエストに表示される しばらくして登録済みドメインに表示されたら 購入登録完了
10. Amazon CloudFrontとAmazon S3を組み合わせた公開
11. 事前準備 事前にAmazon S3に公開したいファイル一 式をアップロード 設定は非公開のままでOK
12. AWSコンソール → CloudFrontをクリック 「CloudFrontディストリビューションを作成」を クリック
13. 対象のS3のドメインを指定 S3のバケットアクセスを指定しポリシーは自 動更新に設定
14. httpsにリダイレクトする設定 ルートオブジェクトにS3のindex.htmlを設定 その他は今回はデフォルトのまま設定
15. 作成後、S3のバケットを確認するとポリシー が自動で設定されているのを確認
16. 作成されたCloudFrontのS3用のディストリ ビューションのURLにアクセスしてみる CloudFront経由でS3にアクセスしWebSite が表示される
17. Amazon Route 53でAmazon CloudFront用 Aレコード作成
18. 「ホストゾーン」 → 対象ドメイン名をクリック 「レコードを作成」をクリック
19. レコードタイプをAレコード選択・ルーティング 先をCloudFront選択・CloudFrontのドメイン 入力 → 「レコードを作成」をクリック Aレコードの設定が表示されます
20. Amazon CloudFrontでSSL証明書設定
21. 対象のディストリビューションを選択 → 「編 集」をクリック 「証明書をリクエスト」をクリック
22. AWS Certificate Managerで続きを設定しま す 「パブリック証明書をリクエスト」を選択 → 「次へ」をクリック 証明書を発行したいドメイン名を入力・DNS 検証を選択 → 「リクエスト」をクリック
23. 設定された証明書IDをクリック 「Route 53でレコードを作成」をクリック
24. 「レコードを作成」をクリック CNAMEレコードの設定が表示されます
25. 対象のディストリビューションに戻ります 証明書を発行したいドメイン名・発行した証 明書を選択 → 「変更を保存」をクリック 証明書が表示されない場合はブラウザリ ロード
26. 証明書が設定されているのを確認 AWS Certificate Managerでも発行済ステー タスになっているか確認
27. 設定が完了すると独自ドメインでWebSiteが 表示されます
28. AWS WAFとAmazon CloudFrontを組み合わせた公開
29. 「Create web ACL」をクリック 任意名称を設定 リソースタイプにCloudFrontを選択 対象のCloudFrontディストリビューションを選 択
30. その他は今回はデフォルトのまま設定
31. その他は今回はデフォルトのまま設定
32. 内容を確認し「Create web ACL」をクリック
33. 作成されたWeb ACLをクリック Web ACLの詳細を確認できます
34. まとめ
35. • Amazon Route 53でドメイン取得すると色々と手軽 • 静的ウェブサイトホスティングでAWS WAFまで必要かは検討 • 各サービスで全部構築するのは色々と大変 • 今後はAWS AmplifyやAWS CloudFormationやAWS CDKの設定検証
36. 会社紹介資料
 Last Update – 5th Feb.2021 We Are Hiring! MIERUNE → カジュアル面談はこちら ←