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

Transcript

1. Amazon Route 53とAWS WAFと
   Amazon CloudFrontとAmazon S3で
   独自ドメインホスティング環境を構築してみた
   © MIERUNE © MapTiler © OpenStreetMap contributors
   Yasunori Kirimoto
   2022.02.10
   MIERUNE 社内勉強会 #027
   

   View Slide

2. Location-based Architect
   Yasunori Kirimoto
   Owner of
   Co-founder and CTO of
   Member of
   

   View Slide

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

   View Slide

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. まとめ
   

   View Slide

5. Amazon Route 53で独自ドメイン購入登録
   

   View Slide

6. 「ドメインの登録」をクリック
   購入したいドメインを検索 → 「カートに入れ
   る」をクリック → 「続行」をクリック
   

   View Slide

7. 各連絡先を入力 → 「続行」をクリック
   

   View Slide

8. メール認証後に自動更新と利用規約を確認
   → 「注文を完了」をクリック
   

   View Slide

9. 「ドメインに移動」をクリック
   保留中のリクエストに表示される
   しばらくして登録済みドメインに表示されたら
   購入登録完了
   

   View Slide

10. Amazon CloudFrontとAmazon S3を組み合わせた公開
    

    View Slide

11. 事前準備
    事前にAmazon S3に公開したいファイル一
    式をアップロード
    設定は非公開のままでOK
    

    View Slide

12. AWSコンソール → CloudFrontをクリック
    「CloudFrontディストリビューションを作成」を
    クリック
    

    View Slide

13. 対象のS3のドメインを指定
    S3のバケットアクセスを指定しポリシーは自
    動更新に設定
    

    View Slide

14. httpsにリダイレクトする設定
    ルートオブジェクトにS3のindex.htmlを設定
    その他は今回はデフォルトのまま設定
    

    View Slide

15. 作成後、S3のバケットを確認するとポリシー
    が自動で設定されているのを確認
    

    View Slide

16. 作成されたCloudFrontのS3用のディストリ
    ビューションのURLにアクセスしてみる
    CloudFront経由でS3にアクセスしWebSite
    が表示される
    

    View Slide

17. Amazon Route 53でAmazon CloudFront用
    Aレコード作成
    

    View Slide

18. 「ホストゾーン」 → 対象ドメイン名をクリック
    「レコードを作成」をクリック
    

    View Slide

19. レコードタイプをAレコード選択・ルーティング
    先をCloudFront選択・CloudFrontのドメイン
    入力 → 「レコードを作成」をクリック
    Aレコードの設定が表示されます
    

    View Slide

20. Amazon CloudFrontでSSL証明書設定
    

    View Slide

21. 対象のディストリビューションを選択 → 「編
    集」をクリック
    「証明書をリクエスト」をクリック
    

    View Slide

22. AWS Certificate Managerで続きを設定しま
    す
    「パブリック証明書をリクエスト」を選択 →
    「次へ」をクリック
    証明書を発行したいドメイン名を入力・DNS
    検証を選択 → 「リクエスト」をクリック
    

    View Slide

23. 設定された証明書IDをクリック
    「Route 53でレコードを作成」をクリック
    

    View Slide

24. 「レコードを作成」をクリック
    CNAMEレコードの設定が表示されます
    

    View Slide

25. 対象のディストリビューションに戻ります
    証明書を発行したいドメイン名・発行した証
    明書を選択 → 「変更を保存」をクリック
    証明書が表示されない場合はブラウザリ
    ロード
    

    View Slide

26. 証明書が設定されているのを確認
    AWS Certificate Managerでも発行済ステー
    タスになっているか確認
    

    View Slide

27. 設定が完了すると独自ドメインでWebSiteが
    表示されます
    

    View Slide

28. AWS WAFとAmazon CloudFrontを組み合わせた公開
    

    View Slide

29. 「Create web ACL」をクリック
    任意名称を設定
    リソースタイプにCloudFrontを選択
    対象のCloudFrontディストリビューションを選
    択
    

    View Slide

30. その他は今回はデフォルトのまま設定
    

    View Slide

31. その他は今回はデフォルトのまま設定
    

    View Slide

32. 内容を確認し「Create web ACL」をクリック
    

    View Slide

33. 作成されたWeb ACLをクリック
    Web ACLの詳細を確認できます
    

    View Slide

34. まとめ
    

    View Slide

35. ● Amazon Route 53でドメイン取得すると色々と手軽
    ● 静的ウェブサイトホスティングでAWS WAFまで必要かは検討
    ● 各サービスで全部構築するのは色々と大変
    ● 今後はAWS AmplifyやAWS CloudFormationやAWS CDKの設定検証
    

    View Slide

36. 会社紹介資料

    Last Update – 5th Feb.2021
    We Are Hiring!
    MIERUNE
    → カジュアル面談はこちら ←
    

    View Slide