Cloudflare Pagesとは
Cloudflare Pagesは、Cloudflareが提供する静的ホスティングサービスです。CloudflareのCDNの恩恵を受けながら、静的なWebサイトを高速かつ安価に公開することができます（図1）。
CDN（Content Delivery Network）は、世界中に分散されたサーバーを使って、ユーザーに物理的に近い場所からコンテンツを配信する技術です。CDNを活用することで、大元のサーバーがユーザーから遠くにある場合でも、コンテンツの大半を占める静的ファイルをユーザーの近くから配信することで、高速にWebサイトを表示できます。
当初のCloudflare Pagesは、ただ単に静的ファイルをホスティングして、CDNを活用して配信するだけのサービスでしたが、最近ではサーバーレスなエッジコンピューティングもサポートされるようになりました。CDNのサーバー上で動作するランタイムであるCloudflare Workersをベースとした、Pages Functionsという機能が加わり、動的にコンテンツを生成しながらも、CDNの恩恵を受けられる、強力なプラットフォームになりました。
図2は、それぞれの概要を図示したものです。
Remixは、ページを表示する際、デフォルトでは常にサーバーサイドレンダリングを行う挙動になっており、事前に静的なHTMLを生成してホスティングしておくスタイルのフレームワークではありません。
つまり、デフォルトのままでは大量のリクエストを受け付けたときに、毎回ページを生成することになり、サーバーに負荷がかかります。そのため、Pages Functionsで実施したサーバーサイドレンダリングの結果をCDNにキャッシュできるCloudflare Pagesは、Remixと相性が良いと言えるでしょう。
Cloudflareのアカウントを作る
それでは、実際にCloudflare Pagesを使うための準備をしていきましょう。まずは、Cloudflareのアカウントを作成します。こちらのURLにアクセスして、アカウントを作成してください（図3）。
メールアドレスとパスワードを入力するだけの、簡単な手続きでアカウントを作成できます。サインアップに成功すると、確認メールが届くので、メール内のリンクをクリックしてアカウントを有効化してください。
初めてCloudflareのダッシュボードにアクセスすると、図4のようなようこそ画面が表示されます。英語だと読みづらい方は、このタイミングで右上の言語メニューを日本語に変更しておくことをお勧めします。
このようこそ画面では「Add a website or application（Web サイトまたはアプリケーションを追加する）」と「Explore all products（すべての製品を見る）」のどちらを選んでもダッシュボードに進むことができるので、好きな方を選んでください。
ダッシュボードに移動したら、左のメニューから「Workers & Pages」をクリックします（図5）。
すると、図6のようにCloudflare WorkersとCloudflare Pagesの管理画面が表示されます。
次にこの画面を訪れるときには、デプロイ済みのサイトが見られるので、楽しみにしていてください。では、次の手順に行きましょう。
Cloudflare Pages対応のRemixプロジェクトを作る
次は、Pages Functionsをサーバーとして利用する形で、Remixをセットアップします。通常のセットアップと比べていくつかの設定が必要になりますが、Cloudflareから提供されているCLIを使うことで、簡単にセットアップできます。
以下のコマンドを実行して、プロジェクトを作成します。通称、C3（Create Cloudflare CLI）と呼ばれるコマンドです。
$ npm create cloudflare@latest -- remix-on-cloudflare-sample --framework remix --deploy false > npx > create-cloudflare remix-on-cloudflare-sample --framework remix --deploy false using create-cloudflare version 2.21.7 // 中略 ╭ Deploy with Cloudflare Step 3 of 3 │ ├ Do you want to deploy your application? │ no deploy via `npm run deploy` │ ├ APPLICATION CREATED Deploy your application with npm run deploy │ │ Navigate to the new directory cd remix-on-cloudflare-sample │ Run the development server npm run dev │ Preview your application npm run preview │ Deploy your application npm run deploy │ Read the documentation https://developers.cloudflare.com/pages │ Stuck? Join us at https://discord.cloudflare.com │ ╰ See you again soon!
コマンドの読み方としては、 npm create cloudflare@latest までが事実上のコマンドで、 -- を挟んだ後ろがオプションです。-- を挟むことで、それ以降が npm コマンドの引数ではないことをシェルに対して明示しています。
このコマンドを実行すると、 --framework remix の指定によってRemixのプロジェクトを作成すると同時に、Cloudflare Pagesにデプロイするための設定が追加されます。デフォルトでは、このタイミングで一度デプロイを行うかどうかも訊かれるのですが、後ほど別途解説したいので、 --deploy false のオプションでデプロイをスキップしました。途中、Gitの初期化とNPMのインストールを行うか訊かれますが、NPMのインストールは行っておいたほうがよいでしょう。Gitは都合のいい方を選んでください。もし、TypeScriptが不要な場合は、 --ts false のオプションをつけておくとよいでしょう。
作成したプロジェクトをローカルで動かしてみる
プロジェクトが作成できたら、次は一度、ローカルで動かしてみましょう。 cd remix-on-cloudflare-sample を実行してプロジェクトのディレクトリに移動した後、いつものように npm run dev を実行します（リスト2）。
$ cd remix-on-cloudflare-sample $ npm run dev > dev > remix vite:dev ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help
慣れ親しんだ表示が出てきました。ブラウザで http://localhost:5173/ にアクセスして、Remixのデフォルトページが表示されることを確認します（図7）。
少しタイトルやリンク先がアレンジされていますが、いつものRemixのデフォルトページです。ローカル環境でも、つつがなく開発を開始できそうですね。
めでたしめでたし、と言いたいところですが、ここでひとつ、思い出さなければいけない情報があります。それは、Cloudflare Pages FunctionsやCloudflare Workersという環境は、Node.jsではないということです。
もちろん、今動かしたローカルの環境は npm run で開始したものですから、Node.js上で、Node.jsの標準ライブラリを使って動いています。その一方、デプロイ先となるPages Functionsは、Web標準のサービスワーカーをサーバーで動かしているような環境で、標準ライブラリもブラウザに準拠したものになっています。
もちろん、Cloudflare環境でしか使えないAPIもあります。実環境とローカル環境で、前提となる標準ライブラリが大きく異なってしまうと、開発が難しくなってしまいますね。
実は、Create Cloudflare CLIで作成したプロジェクトには、このギャップを埋めるための工夫が含まれています。 vite.config.ts を開いてみてください（リスト3）。
import {
vitePlugin as remix,
cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
remixCloudflareDevProxy(), // (1)
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
tsconfigPaths(),
],
});
（1）では @remix-run/dev に含まれる cloudflareDevProxyVitePlugin というプラグインが設定されています。これは、開発時にローカル環境を立ち上げるタイミングで、Miniflare（ミニフレア）という、Cloudflare Workersをエミュレートするためのツールと連携するためのものです。このプラグインを使うことで、ある程度実際の環境に近い状態で開発を進めることができます。
