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
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 この環境をAmplifyで再現してみた
4. AWS Amplifyで独自ドメインホスティング環境を構築してみた Amazon Route 53 AWS Amplify
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. まとめ
7. AWSコンソールから構築する 独自ドメインホスティング環境
8. Amplify ConsoleでGitHubを利用した公開
9. 事前準備 GitHubでリポジトリ作成とコード反映まで 今回はサンプルとしてVue.jsのプロジェクトを 追加
10. AWSコンソール → AWS Amplifyをクリック Amplify Hostingの「使用を開始する」をク リック
11. 「GitHub」をクリック GitHubの認証画面が表示されるので 「Authorize」をクリック
12. 事前準備していた対象リポジトリとブランチを 選択 → 「次へ」をクリック 任意のアプリケーション名設定 → 「次へ」を クリック
13. 「保存してデプロイ」をクリック 自動デプロイが終わるとAWSコンソールで URLが発行されるのでアクセスします デプロイしたWebSiteが表示されます 内部的にはAmazon S3とAmazon CloudFrontを利用してデプロイをしている AWS WAFについては追加で設定できない
14. Amplify Consoleで独自ドメイン設定
15. 事前準備 Amazon Route 53による独自ドメインの取 得
16. 「ドメイン管理」をクリック 「ドメインを追加」をクリック 対象ドメインを選択 → 「ドメインを設定」をク リック
17. 対象ドメインとブランチを確認 → 「保存」をク リック 設定完了後に独自ドメインにアクセスします
18. 独自ドメインでWebSiteが表示されます
19. Amplify CLIから構築する 独自ドメインホスティング環境
20. Amplify ConsoleでGitHubを利用した公開 (Amplify CLI)
21. 事前準備 AWS Amplifyの環境構築 実行環境 node v16.10.0 npm v7.24.0 コマンドを実行し、ホスティング環境を設定し ます。実行時に「Hosting with Amplify Console」と「Continuous deployment (Git-based deployments)」を選択します
22. AWSコンソールが自動で表示されるので 「GitHub」をクリック GitHubの認証画面が表示されるので 「Authorize」をクリック
23. 事前準備していた対象リポジトリとブランチを 選択 → 「次へ」をクリック 対象アプリケーションと環境を選択。既存の ロールが無い場合は「新しいロールを作成」 をクリック
24. エンティティタイプは「AWSのサービス」を選 択。ユースケースは「Amplify」を選択 → 「次 へ」をクリック 「次へ」をクリック
25. 任意のロール名を設定 → 「ロールを作成」 をクリック
26. 作成したロールを選択 → 「次へ」をクリック 「保存してデプロイ」をクリック
27. AWSコンソールの設定完了後、コマンドに戻 りEnterを実行 自動デプロイが終わるとAWSコンソールで URLが発行されるのでアクセスします デプロイしたWebSiteが表示されます
28. Amplify Consoleで独自ドメイン設定
29. 「AWSコンソールから構築する独自ドメイン ホスティング環境」と同一の設定 独自ドメインでWebSiteが表示されます
30. Amplify CLIから構築する 独自ドメインカスタムホスティング環境
31. カスタム公開(Amplify CLI)
32. 事前準備 AWS Amplifyの環境構築 実行環境 node v16.10.0 npm v7.24.0 ホスティング環境を設定します。実行時に 「Amazon CloudFront and S3」を選択しま す
33. 設定確認をします アプリケーションを自動でビルドしクラウドに デプロイします
34. AWS Amplify Consoleにはデプロイされて いないのを確認します Amazon S3に自動でデプロイされているの を確認します
35. Amazon CloudFrontに自動でデプロイされ ているのを確認します 作成されたURLにアクセスします デプロイしたURLにアクセスしても、リージョ ンによってはすぐには表示できません (24時 間後までには表示されるらしいです)
36. すぐに表示したいかたはこの設定で表示可 能です オリジン → 対象のオリジン選択 → 「編集」 をクリック
37. 同一のオリジンドメインを再選択(ドメインに リージョンが追加される) → 「変更を保存」を クリック
38. デプロイしたWebSiteが表示されます カスタム公開で、独自ドメイン設定やAWS WAFを利用したい場合は各サービスを追加 で設定 または、プロジェクト内のAWS CloudFormationの設定ファイルを編集
39. まとめ
40. • AWS Amplifyで手軽に独自ドメインホスティング環境を構築可能 • GitHubと連携し自動ビルド&デプロイも可能 • カスタマイズする場合はAmplifyを利用しない選択肢もあり • 今後はAWS CloudFormationやAWS CDKの設定検証
41. 会社紹介資料
 Last Update – 5th Feb.2021 We Are Hiring! MIERUNE → カジュアル面談はこちら ←