Amazon CloudFrontの公開設定を色々とためしてみた

MIERUNE 社内勉強会 #026 発表資料
https://mierune.github.io/mierune-log/posts/study-meeting-026

Google Slides
https://docs.google.com/presentation/d/e/2PACX-1vQd8-CpKx34Wpqeez3qXlK-5kiuLCnd30Ayp4xby02bo0kOQATucyCTvEvZNMe6c6MVywYhOCAqcCVs/pub?start=false&loop=false&delayms=3000

1. Amazon CloudFrontの公開 設定を色々とためしてみた © MIERUNE © MapTiler © OpenStreetMap contributors Yasunori Kirimoto 2022.01.27 MIERUNE 社内勉強会 #026
2. Location-based Architect Yasunori Kirimoto Owner of Co-founder and CTO of Member of
3. Amazon CloudFront Amazon CloudFrontの公開設定を色々とためしてみた
5. Contents 1. Amazon S3と組み合わせた公開 2. 指定IPのみ公開 3. Basic認証公開 4. Vue.jsルーティング対応 (おまけ) 5. まとめ
6. Amazon S3と組み合わせた公開
7. 事前準備 事前にAmazon S3に公開したいファイル一 式をアップロード 設定は非公開のままでOK
8. AWSコンソール → CloudFrontをクリック 「CloudFrontディストリビューションを作成」を クリック
9. 対象のS3のドメインを指定 S3のバケットアクセスを指定しポリシーは自 動更新に設定
10. httpsにリダイレクトする設定 ルートオブジェクトにS3のindex.htmlを設定 その他は今回はデフォルトのまま設定
11. 作成後、S3のバケットを確認するとポリシー が自動で設定されているのを確認
12. 作成されたCloudFrontのS3用のディストリ ビューションのURLにアクセスしてみる
13. CloudFront経由でS3にアクセスしWebSite が表示される
14. 指定IPのみ公開
15. 関数 → 「関数を作成」をクリック 関数名と説明を設定 → 「関数を作成」をク リック
16. CloudFront FunctionsでIP制限をする関数 を設定します
17. 発行 → 「関数を発行」をクリック 関数作成後関連付けのメニューが表示され るので「関連付けを追加」をクリック
18. 対象のディストリビューション・イベントタイプ・ キャッシュビヘイビアを設定 → 「関連付けを 追加」をクリック 関連付けされたかを確認 設定したIPからURLにアクセスすると WebSiteが表示されます 指定IP以外はWebSiteが表示されません
19. Basic認証公開
20. 関数 → 「関数を作成」をクリック 関数名と説明を設定 → 「関数を作成」をク リック
21. CloudFront FunctionsでBasic認証をする関 数を設定します
22. 発行 → 「関数を発行」をクリック 関数作成後関連付けのメニューが表示され るので「関連付けを追加」をクリック
23. 対象のディストリビューション・イベントタイプ・ キャッシュビヘイビアを設定 → 「関連付けを 追加」をクリック 関連付けされたかを確認
24. URLにアクセスするとユーザーとパスワード の入力画面が表示されます 設定したユーザーとパスワードを入力すると WebSiteが表示されます
25. Vue.jsルーティング対応 (おまけ)
26. エラーページ → 「カスタムエラーレスポンス を作成」をクリック エラーコード403とその他キャプチャの内容 で設定 → 「カスタムエラーレスポンスを作 成」をクリック
27. エラーコード404とその他キャプチャの内容 で設定 → 「カスタムエラーレスポンスを作 成」をクリック 設定を確認
28. これでルーティングのページも表示されます
29. まとめ
30. • Amazon CloudFrontのコンソールすごく使いやすくなってた • Amazon CloudFrontとAmazon S3で公開設定可能 • CloudFront Functionsを利用でIP制限とかBasic認証可能 • AWS WAFとAmazon Route 53も組み合わせた設定 (次回予定)
31. 会社紹介資料
 Last Update – 5th Feb.2021 We Are Hiring! MIERUNE → カジュアル面談はこちら ←