SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Remixを通じてWebを学ぶ

Remixで作ったWebサイトをCloudflare Pagesの環境で動かす

Remixを通じてWebを学ぶ 第10回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Cloudflare Pagesのサイトにカスタムドメインを設定する

 次は、Cloudflareの最も魅力的な機能のひとつであるキャッシュについて学び……たいところなのですが、残念ながらpages.devのサブドメインではCDNキャッシュの状態を確認できない(レスポンスヘッダーにキャッシュの状態が明示されない)ため、まずはWebサイトにカスタムドメインを設定する方法を解説します。

 Cloudflare PagesのWebサイトにカスタムドメインを設定する場合に、一番簡単な方法は、Cloudflareでドメインを管理し、CloudflareのDNSを利用した上で、Cloudflare Pagesのプロジェクトにカスタムドメインを設定する方法です。この方法を取ると、Cloudflare Pages側からはサブドメインを指定するだけで、カスタムドメインを設定することができます。

Cloudflareでドメインを管理する

 Cloudflareでドメインを管理するには、大きく分けて2つの方法があります。すでに他のレジストラで管理しているドメインをCloudflareに移管する方法と、Cloudflareで新たにドメインを取得する方法です。本記事の本筋ではないので、詳細は割愛しますが、Cloudflare Registrarの公式サイトなどを参考にしてください。

 本記事では、すでにCloudflareでドメインを管理していることを前提に進めます。図2のように「ドメインの管理」のメニューにドメインが表示されていればOKです。

図2:Cloudflareでドメインを管理している
図2:Cloudflareでドメインを管理している

 ドメインを移管・登録したい場合は、左のメニューからそれぞれの項目を選び、画面の指示に従って進めてください。

Cloudflare Pagesのプロジェクトにカスタムドメインを設定する

 Cloudflareでドメインを管理していることを前提に、Cloudflare Pagesのプロジェクトにカスタムドメインを設定する方法を解説します。まずは、Cloudflare Pagesのドメインを設定したいプロジェクトにアクセスし、上部のタブから「カスタムドメイン」を選択します。すると、図3のような画面が表示されます。

図3:Cloudflare Pagesのカスタムドメイン設定画面
図3:Cloudflare Pagesのカスタムドメイン設定画面

 次に「カスタムドメインを設定」をクリックすると、図4のような画面が表示されます。

図4:設定したいドメイン・サブドメインを入力する
図4:設定したいドメイン・サブドメインを入力する

 設定したいドメインまたはサブドメインの入力を求められるので、ここで入力します。今回は筆者が持っているnkzn.devのドメインにremix-sample.nkzn.devというサブドメインを設定することにします。入力が終わったら「続行」をクリックします。すると、DNSへの設定内容が自動生成されて、図5のような確認画面が表示されます。

図5:DNSへの設定内容を確認する
図5:DNSへの設定内容を確認する

 特に問題なければ、「ドメインをアクティブにする」をクリックします。図6のようにDNSの設定が始まるので、完了まで待ちましょう。

図6:DNSの設定完了を待つ
図6:DNSの設定完了を待つ

 しばらく待つと、図7のようにステータスが「アクティブ」になります。

図7:カスタムドメインの設定が完了した
図7:カスタムドメインの設定が完了した

 これで、Cloudflare Pagesのプロジェクトにカスタムドメインが設定されました。プロジェクトのトップ(デプロイタブ)を見に行ってみましょう(図8)。

図8:カスタムドメインが設定されている
図8:カスタムドメインが設定されている

 「ドメイン」の欄に、設定したドメインが表示されていることを確認できます。これで、Cloudflare Pagesのプロジェクトにカスタムドメインが設定されました。ブラウザでhttps://remix-sample.nkzn.dev/を開いてみると、ちゃんとカスタムドメインが効いていることがわかります(図9)。

図9:カスタムドメインでアクセスできる
図9:カスタムドメインでアクセスできる

 このように、Cloudflareの管理下にあるドメインであれば、Cloudflare Pagesのプロジェクトにカスタムドメインを簡単に設定できます。

CDNキャッシュが効いているか確認する

 今回の最後の話題として、Cloudflare PagesのCDNキャッシュが効いているかどうかを確認する方法を解説します。CDNキャッシュが効いているかどうかを確認するためには、ブラウザの開発者ツールを使って、レスポンスヘッダーを確認するのがわかりやすくてよいでしょう。先ほどデプロイしたhttps://remix-sample.nkzn.dev/にアクセスして、Chromeの開発者ツールの「ネットワーク」タブを開き、favicon.icoを選択してみましょう(図10)。

図10:Chromeの開発者ツールを開く
図10:Chromeの開発者ツールを開く

 レスポンスヘッダーにCf-Cache-Status: HITという表示が見えますね。これは、CloudflareのCDNキャッシュが効いていることを示しています。もしMISSと表示されている場合は、キャッシュが効いておらず、オリジンであるCloudflare Pagesにアクセスが行われていることを示しています。

Cloudflare Pagesがキャッシュを行う対象

 Cloudflare Pagesは、Webサイトのパフォーマンス向上のために、キャッシュを設定しやすい作りになっています。リスト1で解説した、public/_headersもそのひとつです。静的ファイルのレスポンスヘッダーにCache-Controlヘッダーを設定することで、キャッシュを制御しています。

 たとえば、図10のfavicon.icoもリスト1でCache-Control: public, max-age=3600, s-maxage=3600が設定されていました。実際にブラウザに届いたレスポンスヘッダーを見てみると、どのようになっているでしょうか(図11)。

図11:public/_headersで設定した内容が反映されている
図11:public/_headersで設定した内容が反映されている

 public/_headersに設定したヘッダーが、実際のレスポンスにも反映されていますね。同様に、リスト1のpublic/_headersでは/assets/*にもCache-Control: public, max-age=31536000, immutableが設定されていました。ブラウザキャッシュの期間を1年間とし、その期間内であればサーバーに再問い合わせをしない(immutable)という設定です。/assetsフォルダには、Remixプロジェクトをビルドした際の生成物であるJavaScriptやCSSのファイルが格納されています(図12)。

図12:assetsにはビルドしたファイルが格納されている
図12:assetsにはビルドしたファイルが格納されている

 これらのファイルは、ビルド時にハッシュ値が付与されるため、ファイルの内容が変わるとハッシュ値も変わります。そのため、immutableを設定しても問題なく、キャッシュが効くようになっています。

 他にも、Cloudflare Cacheのデフォルトの挙動が存在し、Set-Cookieの有無や拡張子によってもキャッシュの挙動が変わります。これについては、次回の記事で検証してみましょう。

まとめ

 今回は、Remixの設定項目や、Cloudflare Pagesでキャッシュの利用を始めるためのカスタムドメインの設定について解説しました。

 次回は、今回の設定を踏まえながら、Remix側でどんな設定を行うとキャッシュの挙動がどう変わるのかについて解説します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Remixを通じてWebを学ぶ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20047 2024/09/05 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング