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です。
ドメインを移管・登録したい場合は、左のメニューからそれぞれの項目を選び、画面の指示に従って進めてください。
Cloudflare Pagesのプロジェクトにカスタムドメインを設定する
Cloudflareでドメインを管理していることを前提に、Cloudflare Pagesのプロジェクトにカスタムドメインを設定する方法を解説します。まずは、Cloudflare Pagesのドメインを設定したいプロジェクトにアクセスし、上部のタブから「カスタムドメイン」を選択します。すると、図3のような画面が表示されます。
次に「カスタムドメインを設定」をクリックすると、図4のような画面が表示されます。
設定したいドメインまたはサブドメインの入力を求められるので、ここで入力します。今回は筆者が持っているnkzn.devのドメインにremix-sample.nkzn.devというサブドメインを設定することにします。入力が終わったら「続行」をクリックします。すると、DNSへの設定内容が自動生成されて、図5のような確認画面が表示されます。
特に問題なければ、「ドメインをアクティブにする」をクリックします。図6のようにDNSの設定が始まるので、完了まで待ちましょう。
しばらく待つと、図7のようにステータスが「アクティブ」になります。
これで、Cloudflare Pagesのプロジェクトにカスタムドメインが設定されました。プロジェクトのトップ（デプロイタブ）を見に行ってみましょう（図8）。
「ドメイン」の欄に、設定したドメインが表示されていることを確認できます。これで、Cloudflare Pagesのプロジェクトにカスタムドメインが設定されました。ブラウザでhttps://remix-sample.nkzn.dev/を開いてみると、ちゃんとカスタムドメインが効いていることがわかります（図9）。
このように、Cloudflareの管理下にあるドメインであれば、Cloudflare Pagesのプロジェクトにカスタムドメインを簡単に設定できます。
CDNキャッシュが効いているか確認する
今回の最後の話題として、Cloudflare PagesのCDNキャッシュが効いているかどうかを確認する方法を解説します。CDNキャッシュが効いているかどうかを確認するためには、ブラウザの開発者ツールを使って、レスポンスヘッダーを確認するのがわかりやすくてよいでしょう。先ほどデプロイしたhttps://remix-sample.nkzn.dev/にアクセスして、Chromeの開発者ツールの「ネットワーク」タブを開き、favicon.icoを選択してみましょう（図10）。
レスポンスヘッダーに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）。
public/_headersに設定したヘッダーが、実際のレスポンスにも反映されていますね。同様に、リスト1のpublic/_headersでは/assets/*にもCache-Control: public, max-age=31536000, immutableが設定されていました。ブラウザキャッシュの期間を1年間とし、その期間内であればサーバーに再問い合わせをしない（immutable）という設定です。/assetsフォルダには、Remixプロジェクトをビルドした際の生成物であるJavaScriptやCSSのファイルが格納されています（図12）。
これらのファイルは、ビルド時にハッシュ値が付与されるため、ファイルの内容が変わるとハッシュ値も変わります。そのため、immutableを設定しても問題なく、キャッシュが効くようになっています。
他にも、Cloudflare Cacheのデフォルトの挙動が存在し、Set-Cookieの有無や拡張子によってもキャッシュの挙動が変わります。これについては、次回の記事で検証してみましょう。
まとめ
今回は、Remixの設定項目や、Cloudflare Pagesでキャッシュの利用を始めるためのカスタムドメインの設定について解説しました。
次回は、今回の設定を踏まえながら、Remix側でどんな設定を行うとキャッシュの挙動がどう変わるのかについて解説します。
