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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

6. Amazon S3と組み合わせた公開
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. 指定IPのみ公開
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Basic認証公開
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. まとめ
    

    View Slide

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

    View Slide

31. 会社紹介資料

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

    View Slide