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

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

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に 置き換えるのは簡単