Slide 1

Slide 1 text

Amazon CloudFrontの公開 設定を色々とためしてみた © MIERUNE © MapTiler © OpenStreetMap contributors Yasunori Kirimoto 2022.01.27 MIERUNE 社内勉強会 #026

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 CloudFrontの公開設定を色々とためしてみた

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Contents 1. Amazon S3と組み合わせた公開 2. 指定IPのみ公開 3. Basic認証公開 4. Vue.jsルーティング対応 (おまけ) 5. まとめ

Slide 6

Slide 6 text

Amazon S3と組み合わせた公開

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

CloudFront経由でS3にアクセスしWebSite が表示される

Slide 14

Slide 14 text

指定IPのみ公開

Slide 15

Slide 15 text

関数 → 「関数を作成」をクリック 関数名と説明を設定 → 「関数を作成」をク リック

Slide 16

Slide 16 text

CloudFront FunctionsでIP制限をする関数 を設定します

Slide 17

Slide 17 text

発行 → 「関数を発行」をクリック 関数作成後関連付けのメニューが表示され るので「関連付けを追加」をクリック

Slide 18

Slide 18 text

対象のディストリビューション・イベントタイプ・ キャッシュビヘイビアを設定 → 「関連付けを 追加」をクリック 関連付けされたかを確認 設定したIPからURLにアクセスすると WebSiteが表示されます 指定IP以外はWebSiteが表示されません

Slide 19

Slide 19 text

Basic認証公開

Slide 20

Slide 20 text

関数 → 「関数を作成」をクリック 関数名と説明を設定 → 「関数を作成」をク リック

Slide 21

Slide 21 text

CloudFront FunctionsでBasic認証をする関 数を設定します

Slide 22

Slide 22 text

発行 → 「関数を発行」をクリック 関数作成後関連付けのメニューが表示され るので「関連付けを追加」をクリック

Slide 23

Slide 23 text

対象のディストリビューション・イベントタイプ・ キャッシュビヘイビアを設定 → 「関連付けを 追加」をクリック 関連付けされたかを確認

Slide 24

Slide 24 text

URLにアクセスするとユーザーとパスワード の入力画面が表示されます 設定したユーザーとパスワードを入力すると WebSiteが表示されます

Slide 25

Slide 25 text

Vue.jsルーティング対応 (おまけ)

Slide 26

Slide 26 text

エラーページ → 「カスタムエラーレスポンス を作成」をクリック エラーコード403とその他キャプチャの内容 で設定 → 「カスタムエラーレスポンスを作 成」をクリック

Slide 27

Slide 27 text

エラーコード404とその他キャプチャの内容 で設定 → 「カスタムエラーレスポンスを作 成」をクリック 設定を確認

Slide 28

Slide 28 text

これでルーティングのページも表示されます

Slide 29

Slide 29 text

まとめ

Slide 30

Slide 30 text

● Amazon CloudFrontのコンソールすごく使いやすくなってた ● Amazon CloudFrontとAmazon S3で公開設定可能 ● CloudFront Functionsを利用でIP制限とかBasic認証可能 ● AWS WAFとAmazon Route 53も組み合わせた設定 (次回予定)

Slide 31

Slide 31 text

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