Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Yasunori Kirimoto Yasunori Kirimoto
January 27, 2022
Technology
0
170

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

Avatar for Yasunori Kirimoto

Yasunori Kirimoto

January 27, 2022
Tweet

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
1
580
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
3
750
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
720
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
1.4k
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
650
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
360
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
430
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
720
MapLibreとAmazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
840

Other Decks in Technology

See All in Technology
(技術的には)社内システムもOKなブラウザエージェントを作ってみた！
Avatar for Har1101 har1101
0
160
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
Avatar for Yoshiki yoshiki_0316
1
120
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
Avatar for Serverless Operations slsops
2
260
配列に見る bash と zsh の違い
Avatar for kazzpapa3 kazzpapa3
3
170
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.5k
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
240
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
93k
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
610
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
300
pool.ntp.orgに ⾃宅サーバーで 参加してみたら...
Avatar for Fuminori -Tany- Tanizaki(谷崎文義) tanyorg
0
590
コンテナセキュリティの最新事情 ~ 2026年版 ~
Avatar for Kyohei Mizumoto kyohmizu
6
1.4k

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
70
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
67
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
50k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
84
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
50

Transcript

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

  4. None

  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

    → カジュアル面談はこちら ←