$30 off During Our Annual Pro Sale. View Details »

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

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

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

Kento Suzuki

March 18, 2023
Tweet

More Decks by Kento Suzuki

Other Decks in Technology

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