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!
   

   View Slide

2. n 鈴⽊健⽃
   所属
   アイレット株式会社(東京オフィス)
   経歴
   • 新卒 3 年⽬(エンジニア歴 = 社会⼈歴)
   → 今⽉で終わり
   Cloudflare歴
   • LTのために初めて触る
   @k_suzuki_pnx
   自己紹介
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide