Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Cloudflare CDN + S3の静的Webホスティングをやってみた

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kento Suzuki Kento Suzuki
March 18, 2023
Technology
690
0

Cloudflare CDN + S3の静的Webホスティングをやってみた

Cloudflare Meetup Fukuoka Kick Off!
https://cfm-cts.connpass.com/event/272936/
登壇資料

Avatar for Kento Suzuki

Kento Suzuki

March 18, 2023

More Decks by Kento Suzuki

See All by Kento Suzuki
こんなに安く なっちゃっていいの？ コスト最適化の進め方と、課金リスクの回避
Avatar for Kento Suzuki kentosuzuki
0
100
Netflix の裏側に何があるのか...その謎を解明すべく、我々は Amazon の奥地へと向かった
Avatar for Kento Suzuki kentosuzuki
0
120
コミュニティが変えるキャリアの地平線：コロナ禍新卒入社のエンジニアがAWSコミュニティで見つけた成長の羅針盤
Avatar for Kento Suzuki kentosuzuki
0
320
バッドプラクティスから学ぶ ハワイアン航空で行く re:Invent
Avatar for Kento Suzuki kentosuzuki
0
570
上流工程に挑戦！「俺の考えた最強サーバレス構成」が一瞬で敗北した件
Avatar for Kento Suzuki kentosuzuki
2
430
S3から始めるAWS 〜S3の簡単なユースケースの紹介〜
Avatar for Kento Suzuki kentosuzuki
1
850
AWS のポリシー言語 “Cedar” で実現するアクセス制御
Avatar for Kento Suzuki kentosuzuki
0
520
探せぇ！ お薦めAWSセキュリティワークショップ！！〜 怒涛のワークショップ 48 連戦 〜
Avatar for Kento Suzuki kentosuzuki
1
850
SIEM って何？ 〜 Amazon OpenSearch で始める SIEM 〜
Avatar for Kento Suzuki kentosuzuki
0
1.2k

Other Decks in Technology

See All in Technology
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
1
470
CLIライブラリ開発を支える技術
Avatar for Hiroshi TANABE htnabe
0
140
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
Avatar for 尾﨑勇太/Yuta Ozaki waiwai2111
1
140
The Knowledge Spine: A Machine-Executable Ontology for Governed Marketing Activation
Avatar for Ananth Packkildurai vananth22
0
120
時うどん〜Socket.getifaddrsで学ぶネットワーク編 / Tokiudon: The Socket.getifaddrs Edition
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
4
210
GoのInterface内部構造から学ぶ！最高パフォーマンスを出すコード設計
Avatar for Yappli Developers yappli_developers
1
230
白金鉱業Meetup Vol.25 アウトカムが二値のデータに対するCausal Impact
Avatar for BrainPad brainpadpr
0
270
ADKで始める業務改善 - AIエージェント開発時の考えと設計
Avatar for Kazuki Hara harappa80
2
250
Cloudflare Workers 向けアプリを C# で構築する ～WASM Native AOT への道～
Avatar for neno nenonaninu
1
740
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
Avatar for Go Takagi shimastripe
1
370
AgentCore Runtime上にAgentic Coding基盤を構築・展開する際の設計ポイントと限界点 / Design considerations and limitations when building an agentic coding platform on AgentCore Runtime
Avatar for Har1101 har1101
5
590
Minecraft JavaのMODをSwiftで作る
Avatar for 1mash0 1mash0
0
190

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
240
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
420
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
830
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
203
76k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
310
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
330
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k

Transcript

  1. Cloudflare CDN + S3の 静的Webホスティングを やってみた 2023-03-17 (Fri) Cloudflare Meetup

    Fukuoka Kick Off!

  2. n 鈴⽊健⽃ 所属 アイレット株式会社(東京オフィス) 経歴 • 新卒 3 年⽬(エンジニア歴 =

    社会⼈歴) → 今⽉で終わり Cloudflare歴 • LTのために初めて触る @k_suzuki_pnx 自己紹介

  3. やりたいこと ブラウザ経由でアクセス

  4. 前提条件 • ドメインは Route53 で取得 • Cloudflare の アカウントは作成済み

  5. 静的Webホスティング用S3の準備 1. ドメイン名と同じ名前のS3を作成 2. ブロックパブリックアクセスの無効化 3. バケットポリシーの追加

  6. ホストゾーンの作成（Route53） 1. ホストゾーンの作成 2. 以下のパラメータでレコードを作成 ・レコードタイプ Aレコード（エイリアス） ・ルーティング先 S3ウェブサイトエンドポイントへのエイリアス

  7. Cloudflareのコンソールでサイトを追加 1. 「サイトを追加」で⾃⾝のドメインを⼊⼒ 2. フリープランを選ぶ 3. 指⽰に従って進めていくと Cloudflareのネームサーバが2つ表⽰されるので控えておく

  8. ネームサーバの変更 (Route53) 1. ドメインの既存ネームサーバを削除 2. Cloudflareのネームサーバに変更する

  9. 結果（Cloudflareの「分析」の画面） メトリクス取れた（全然キャッシュされてないけどw）

  10. ハマったポイント Route53のホストゾーンのNSレコードを書き換えていて いつまで経ってもCloudflare経由にならなかった

  11. まとめ CloudFrontを Cloudflareに 置き換えるのは簡単