Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Amplify ConsoleでGitHubを利用した公開

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Amplify Consoleで独自ドメイン設定

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Amplify Consoleで独自ドメイン設定

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

カスタム公開(Amplify CLI)

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

まとめ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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