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

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

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

Transcript

1. AWS Amplifyで独自ドメインホ
   スティング環境を構築してみた
   © MIERUNE © MapTiler © OpenStreetMap contributors
   Yasunori Kirimoto
   2022.02.24
   MIERUNE 社内勉強会 #028
   

   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
   この環境をAmplifyで再現してみた
   

   View Slide

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

   View Slide

5. View Slide

6. Contents
   1. AWSコンソールから構築する独自ドメインホスティング環境
   a. Amplify ConsoleでGitHubを利用した公開
   b. Amplify Consoleで独自ドメイン設定
   2. Amplify CLIから構築する独自ドメインホスティング環境
   a. Amplify ConsoleでGitHubを利用した公開(Amplify CLI)
   b. Amplify Consoleで独自ドメイン設定
   3. Amplify CLIから構築する独自ドメインカスタムホスティング環境
   a. カスタム公開(Amplify CLI)
   4. まとめ
   

   View Slide

7. AWSコンソールから構築する
   独自ドメインホスティング環境
   

   View Slide

8. Amplify ConsoleでGitHubを利用した公開
   

   View Slide

9. 事前準備
   GitHubでリポジトリ作成とコード反映まで
   今回はサンプルとしてVue.jsのプロジェクトを
   追加
   

   View Slide

10. AWSコンソール → AWS Amplifyをクリック
    Amplify Hostingの「使用を開始する」をク
    リック
    

    View Slide

11. 「GitHub」をクリック
    GitHubの認証画面が表示されるので
    「Authorize」をクリック
    

    View Slide

12. 事前準備していた対象リポジトリとブランチを
    選択 → 「次へ」をクリック
    任意のアプリケーション名設定 → 「次へ」を
    クリック
    

    View Slide

13. 「保存してデプロイ」をクリック
    自動デプロイが終わるとAWSコンソールで
    URLが発行されるのでアクセスします
    デプロイしたWebSiteが表示されます
    内部的にはAmazon S3とAmazon
    CloudFrontを利用してデプロイをしている
    AWS WAFについては追加で設定できない
    

    View Slide

14. Amplify Consoleで独自ドメイン設定
    

    View Slide

15. 事前準備
    Amazon Route 53による独自ドメインの取
    得
    

    View Slide

16. 「ドメイン管理」をクリック
    「ドメインを追加」をクリック
    対象ドメインを選択 → 「ドメインを設定」をク
    リック
    

    View Slide

17. 対象ドメインとブランチを確認 → 「保存」をク
    リック
    設定完了後に独自ドメインにアクセスします
    

    View Slide

18. 独自ドメインでWebSiteが表示されます
    

    View Slide

19. Amplify CLIから構築する
    独自ドメインホスティング環境
    

    View Slide

20. Amplify ConsoleでGitHubを利用した公開
    (Amplify CLI)
    

    View Slide

21. 事前準備
    AWS Amplifyの環境構築
    実行環境
    node v16.10.0
    npm v7.24.0
    コマンドを実行し、ホスティング環境を設定し
    ます。実行時に「Hosting with Amplify
    Console」と「Continuous deployment
    (Git-based deployments)」を選択します
    

    View Slide

22. AWSコンソールが自動で表示されるので
    「GitHub」をクリック
    GitHubの認証画面が表示されるので
    「Authorize」をクリック
    

    View Slide

23. 事前準備していた対象リポジトリとブランチを
    選択 → 「次へ」をクリック
    対象アプリケーションと環境を選択。既存の
    ロールが無い場合は「新しいロールを作成」
    をクリック
    

    View Slide

24. エンティティタイプは「AWSのサービス」を選
    択。ユースケースは「Amplify」を選択 → 「次
    へ」をクリック
    「次へ」をクリック
    

    View Slide

25. 任意のロール名を設定 → 「ロールを作成」
    をクリック
    

    View Slide

26. 作成したロールを選択 → 「次へ」をクリック
    「保存してデプロイ」をクリック
    

    View Slide

27. AWSコンソールの設定完了後、コマンドに戻
    りEnterを実行
    自動デプロイが終わるとAWSコンソールで
    URLが発行されるのでアクセスします
    デプロイしたWebSiteが表示されます
    

    View Slide

28. Amplify Consoleで独自ドメイン設定
    

    View Slide

29. 「AWSコンソールから構築する独自ドメイン
    ホスティング環境」と同一の設定
    独自ドメインでWebSiteが表示されます
    

    View Slide

30. Amplify CLIから構築する
    独自ドメインカスタムホスティング環境
    

    View Slide

31. カスタム公開(Amplify CLI)
    

    View Slide

32. 事前準備
    AWS Amplifyの環境構築
    実行環境
    node v16.10.0
    npm v7.24.0
    ホスティング環境を設定します。実行時に
    「Amazon CloudFront and S3」を選択しま
    す
    

    View Slide

33. 設定確認をします
    アプリケーションを自動でビルドしクラウドに
    デプロイします
    

    View Slide

34. AWS Amplify Consoleにはデプロイされて
    いないのを確認します
    Amazon S3に自動でデプロイされているの
    を確認します
    

    View Slide

35. Amazon CloudFrontに自動でデプロイされ
    ているのを確認します
    作成されたURLにアクセスします
    デプロイしたURLにアクセスしても、リージョ
    ンによってはすぐには表示できません (24時
    間後までには表示されるらしいです)
    

    View Slide

36. すぐに表示したいかたはこの設定で表示可
    能です
    オリジン → 対象のオリジン選択 → 「編集」
    をクリック
    

    View Slide

37. 同一のオリジンドメインを再選択(ドメインに
    リージョンが追加される) → 「変更を保存」を
    クリック
    

    View Slide

38. デプロイしたWebSiteが表示されます
    カスタム公開で、独自ドメイン設定やAWS
    WAFを利用したい場合は各サービスを追加
    で設定
    または、プロジェクト内のAWS
    CloudFormationの設定ファイルを編集
    

    View Slide

39. まとめ
    

    View Slide

40. ● AWS Amplifyで手軽に独自ドメインホスティング環境を構築可能
    ● GitHubと連携し自動ビルド&デプロイも可能
    ● カスタマイズする場合はAmplifyを利用しない選択肢もあり
    ● 今後はAWS CloudFormationやAWS CDKの設定検証
    

    View Slide

41. 会社紹介資料

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

    View Slide