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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Qiita

Slide 5

Slide 5 text

Slide 6

Slide 6 text

dayjournal.booth.pm

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

AWS CloudFormationとは

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

事前準備

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

SSL証明書を自動デプロイ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

certificate-create.yml

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

hosting.yml

Slide 27

Slide 27 text

hosting.yml

Slide 28

Slide 28 text

hosting.yml

Slide 29

Slide 29 text

hosting.yml

Slide 30

Slide 30 text

hosting.yml

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

MIERUNE Meetup mini #02

Slide 36

Slide 36 text

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