RemixのWebサイトをCloudflare Pagesにデプロイする方法を解説

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

　Remixを使って作成したWebサイトをCloudflare Pagesにデプロイする方法を解説します。CDNとエッジコンピューティングの扱いに強みのあるCloudflareが提供する静的ホスティングサービスとRemixを組み合わせることで、高速かつ安価にWebサイトを公開することができます。

対象読者

• Reactの基本を修めている方
• 通信回線が弱いユーザーにも高速に表示できるサイトを作りたいエンジニア
• WebブラウザとNode.jsという異なるランタイムをそれぞれキャッチアップするのが辛くなってきたエンジニア

前提環境

　 筆者の検証環境は以下の通りです。

• macOS Sonoma 14.5
• Node.js 22.3.0
• NPM 10.8.1
• Remix 2.9.2

Remixで作ったWebサイトを公開する

　本連載では、Remixを使ったWebサイトの実装方法を解説してきました。しかし、それらはすべて、ローカル環境でしか動作確認をしてきませんでした。Webサイトを実装したら、やはり公開したいですよね。そこで、今回は、Remixで作ったWebサイトを公開する方法を解説します。

　Remixと相性の良い、もしくは特別にサポートされているホスティングサービスはいくつかあります。その中でも有名なところを列挙してみましょう。まず、Node.jsが動作するサービスとしては次のようなものがあります。

• @remix-run/nodeが動く
  • Vercel
  • Fly.io
  • Netlify

また、それ以外にも@remix-run/xxxxといった名前のパッケージが特別に用意されているサービスもあります。

• @remix-run/cloudflare
  • Cloudflare Pages
• @remix-run/deno
  • Deno Deploy

　使い慣れたNode.jsで動かしたい場合は、VercelやFly.ioを使うのがよいでしょう。特にFly.ioは、Remixの公式Webサイトである https://remix.run のホスティングにも使われており、相性については疑う余地はないと思われます。

　もし、Web標準のFetch APIで Request や Response を扱ったり、Web標準のJavaScriptモジュール（ES Modules）を扱ったりと、よりWeb標準に近いバックエンドで動かしたい場合は、Cloudflare PagesやDeno Deployを使うのがよいでしょう。

　Node.jsとは少し違ったクセはあるものの、Cloudflareの強力なCDN（後述します）とエッジコンピューティング（一カ所のサーバーに世界中からアクセスするのではなく、ユーザーに近いネットワークの端"エッジ"に配置したコンピュータで演算を行うこと）の恩恵を受けられたり、DenoのTypeScriptファーストな開発体験を享受できたりします。

　今回は、せっかくなのでNode.js処理系から少し離れてみようと思います。とはいえいきなりDenoの世界に飛び込むのは怖いので、ある程度はNode.jsに近い感覚で開発できるCloudflare Pagesを使ってみることにします。

　前後編に分けて解説します。前編では、Cloudflare Pages向けのRemixプロジェクトを作成し、デプロイする手順を解説します。後編では、少し複雑なWebサイトを作成しつつ、Cloudfare Pagesの機能を活用する方法について解説します。