Tweet
Tweet

Slide 1

Slide 1 text

Amazon Route 53とAWS WAFと Amazon CloudFrontとAmazon S3で 独自ドメインホスティング環境を構築してみた © MIERUNE © MapTiler © OpenStreetMap contributors Yasunori Kirimoto 2022.02.10 MIERUNE 社内勉強会 #027

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

Slide 4

Slide 4 text

Contents 1. Amazon Route 53で独自ドメイン購入登録 2. Amazon CloudFrontとAmazon S3を組み合わせた公開 3. Amazon Route 53でAmazon CloudFront用Aレコード作成 4. Amazon CloudFrontでSSL証明書設定 5. AWS WAFとAmazon CloudFrontを組み合わせた公開 6. まとめ

Slide 5

Slide 5 text

Amazon Route 53で独自ドメイン購入登録

Slide 6

Slide 6 text

「ドメインの登録」をクリック 購入したいドメインを検索 → 「カートに入れ る」をクリック → 「続行」をクリック

Slide 7

Slide 7 text

各連絡先を入力 → 「続行」をクリック

Slide 8

Slide 8 text

メール認証後に自動更新と利用規約を確認 → 「注文を完了」をクリック

Slide 9

Slide 9 text

「ドメインに移動」をクリック 保留中のリクエストに表示される しばらくして登録済みドメインに表示されたら 購入登録完了

Slide 10

Slide 10 text

Amazon CloudFrontとAmazon S3を組み合わせた公開

Slide 11

Slide 11 text

事前準備 事前にAmazon S3に公開したいファイル一 式をアップロード 設定は非公開のままでOK

Slide 12

Slide 12 text

AWSコンソール → CloudFrontをクリック 「CloudFrontディストリビューションを作成」を クリック

Slide 13

Slide 13 text

対象のS3のドメインを指定 S3のバケットアクセスを指定しポリシーは自 動更新に設定

Slide 14

Slide 14 text

httpsにリダイレクトする設定 ルートオブジェクトにS3のindex.htmlを設定 その他は今回はデフォルトのまま設定

Slide 15

Slide 15 text

作成後、S3のバケットを確認するとポリシー が自動で設定されているのを確認

Slide 16

Slide 16 text

作成されたCloudFrontのS3用のディストリ ビューションのURLにアクセスしてみる CloudFront経由でS3にアクセスしWebSite が表示される

Slide 17

Slide 17 text

Amazon Route 53でAmazon CloudFront用 Aレコード作成

Slide 18

Slide 18 text

「ホストゾーン」 → 対象ドメイン名をクリック 「レコードを作成」をクリック

Slide 19

Slide 19 text

レコードタイプをAレコード選択・ルーティング 先をCloudFront選択・CloudFrontのドメイン 入力 → 「レコードを作成」をクリック Aレコードの設定が表示されます

Slide 20

Slide 20 text

Amazon CloudFrontでSSL証明書設定

Slide 21

Slide 21 text

対象のディストリビューションを選択 → 「編 集」をクリック 「証明書をリクエスト」をクリック

Slide 22

Slide 22 text

AWS Certificate Managerで続きを設定しま す 「パブリック証明書をリクエスト」を選択 → 「次へ」をクリック 証明書を発行したいドメイン名を入力・DNS 検証を選択 → 「リクエスト」をクリック

Slide 23

Slide 23 text

設定された証明書IDをクリック 「Route 53でレコードを作成」をクリック

Slide 24

Slide 24 text

「レコードを作成」をクリック CNAMEレコードの設定が表示されます

Slide 25

Slide 25 text

対象のディストリビューションに戻ります 証明書を発行したいドメイン名・発行した証 明書を選択 → 「変更を保存」をクリック 証明書が表示されない場合はブラウザリ ロード

Slide 26

Slide 26 text

証明書が設定されているのを確認 AWS Certificate Managerでも発行済ステー タスになっているか確認

Slide 27

Slide 27 text

設定が完了すると独自ドメインでWebSiteが 表示されます

Slide 28

Slide 28 text

AWS WAFとAmazon CloudFrontを組み合わせた公開

Slide 29

Slide 29 text

「Create web ACL」をクリック 任意名称を設定 リソースタイプにCloudFrontを選択 対象のCloudFrontディストリビューションを選 択

Slide 30

Slide 30 text

その他は今回はデフォルトのまま設定

Slide 31

Slide 31 text

その他は今回はデフォルトのまま設定

Slide 32

Slide 32 text

内容を確認し「Create web ACL」をクリック

Slide 33

Slide 33 text

作成されたWeb ACLをクリック Web ACLの詳細を確認できます

Slide 34

Slide 34 text

まとめ

Slide 35

Slide 35 text

● Amazon Route 53でドメイン取得すると色々と手軽 ● 静的ウェブサイトホスティングでAWS WAFまで必要かは検討 ● 各サービスで全部構築するのは色々と大変 ● 今後はAWS AmplifyやAWS CloudFormationやAWS CDKの設定検証

Slide 36

Slide 36 text

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