AWS CloudFormationで 独自ドメインホスティング 環境構築を自動化してみた

ゆるWeb勉強会@札幌 OnLine #17 発表資料
https://mild-web-sap.connpass.com/event/238173

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

Transcript

1. AWS CloudFormationで
   独自ドメインホスティング
   環境構築を自動化してみた
   © MIERUNE © MapTiler © OpenStreetMap contributors
   Yasunori Kirimoto
   2022.02.28
   ゆるWeb勉強会@札幌
   OnLine #17
   

   View Slide

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

   View Slide

3. 位置と情報で世界を変える
   

   View Slide

4. Qiita
   

   View Slide

5. |
   |
   |
   |
   |
   |
   |
   |
   |
   |
   |
   |
   front-end
   GIS back-end
   |
   |
   |
   |
   |
   |
   |
   |
   |
   |
   |
   |
   

   View Slide

6. dayjournal.booth.pm
   

   View Slide

7. Contents
   1. AWS CloudFormationとは
   2. 事前準備
   3. SSL証明書を自動デプロイ
   4. 独自ドメインホスティング環境を自動デプロイ
   5. アプリケーションのアップロード
   6. まとめ
   

   View Slide

8. AWS CloudFormationとは
   

   View Slide

9. View Slide

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

    View Slide

11. AWS CloudFormationで独自ドメインホスティング環境構築を自動化してみた
    Amazon Route 53
    AWS CloudFormation
    

    View Slide

12. GitHubでテンプレート公開しています
    certificate-create.yml
    20行くらいのSSL証明書作成テンプレート
    hosting.yml
    100行くらいの独自ドメインホスティング環境
    構築テンプレート
    aws-cloudformation-templates-showcase
    

    View Slide

13. 事前準備
    

    View Slide

14. 事前準備 1
    Former2でリソースをエクスポートしテンプ
    レートを作成するとはじめから作成するより
    スムーズ
    

    View Slide

15. 事前準備 2
    Amazon Route 53による独自ドメインの取
    得
    対象の「ドメイン名」と「ホストゾーンID」をメモ
    しておく
    デプロイはAWSマネジメントコンソールと
    AWS CLIどちらでも可能。今回はAWSマネ
    ジメントコンソールで実行
    

    View Slide

16. SSL証明書を自動デプロイ
    

    View Slide

17. SSL証明書をCloudFrontで利用するために
    は、リージョンを「us-east-1」で作成する必要
    があります
    スタック → スタックの作成 → 「新しいリソー
    スを使用」をクリック
    前提条件は「テンプレートの準備完了」を選
    択。テンプレートの指定は「テンプレートファイ
    ルのアップロード」を選択しファイル
    「certificate-create.yml」をアップロード →
    「次へ」をクリック
    

    View Slide

18. 任意のスタック名・ドメイン名・ホストゾーンID
    を設定 → 「次へ」をクリック
    スタックオプションは今回デフォルトで設定
    → 「次へ」をクリック
    設定を確認 → 「スタックの作成」をクリック
    

    View Slide

19. スタックが作成されたのを確認
    「us-east-1」リージョンのAWS Certificate
    Managerを確認すると、SSL証明書が自動
    作成されているのを確認できる
    次のテンプレートで利用するため対象の「証
    明書ID」をメモ
    

    View Slide

20. certificate-create.yml
    

    View Slide

21. 独自ドメインホスティング環境を自動デプロイ
    

    View Slide

22. デプロイしたいリージョンでCloudFormation
    にアクセス
    スタック → スタックの作成 → 「新しいリソー
    スを使用」をクリック
    前提条件は「テンプレートの準備完了」を選
    択。テンプレートの指定は「テンプレートファイ
    ルのアップロード」を選択しファイル
    「hosting.yml」をアップロード → 「次へ」をク
    リック
    

    View Slide

23. 任意のスタック名・証明書ID・ドメイン名・ホス
    トゾーンIDを設定 → 「次へ」をクリック
    スタックオプションは今回デフォルトで設定
    → 「次へ」をクリック
    設定を確認 → 「スタックの作成」をクリック
    

    View Slide

24. スタックが作成されたのを確認
    

    View Slide

25. Amazon CloudFrontに自動でデプロイされ
    ているのを確認
    Amazon S3に自動でデプロイされているの
    を確認
    

    View Slide

26. hosting.yml
    

    View Slide

27. hosting.yml
    

    View Slide

28. hosting.yml
    

    View Slide

29. hosting.yml
    

    View Slide

30. hosting.yml
    

    View Slide

31. アプリケーションのアップロード
    

    View Slide

32. デプロイされたS3バケットに公開したいファイ
    ル一式をアップロード
    独自ドメインにアクセスするとアップロードし
    たアプリケーションが表示されます
    

    View Slide

33. まとめ
    

    View Slide

34. ● AWS CloudFormationで環境構築を自動化可能
    ● Former2を利用するとスムーズ
    ● ひたすらドキュメントを見る
    ● 別リソースを別リージョンにするテンプレート
    ● 今後はAWS CDKで自動化検証
    

    View Slide

35. MIERUNE Meetup mini #02
    

    View Slide

36. 会社紹介資料

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

    View Slide