RemixアプリをCloudflare Pagesにデプロイしてみた

Remixを触ってみているところです。Vercel / Amplifyなども試したいところですが、まずはアプリケーションセットアップからCloudflare Pagesへのデプロイまでに挑戦しました。

Cloudflare Pages向けに作る場合は、npx create cloudflareでセットアップする

フレームワークそれぞれにセットアップ用のコマンドがありますが、Cloudflare Pages向けにアプリを作る場合は、CloudflareのCLIツールが推奨されている様子です。—frameworkオプションで指定できるので、remixを指定しました。

npm create cloudflare@latest my-remix-app -- --framework=remix

立ち上がったRemixアプリには、ViteのConfigファイルが用意されていました。Cloudflareむけのproxyなども追加されているため、Remixに関してはこちらの手法で立ち上げるのが最短距離になりそうです。

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(),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
});

Cloudflare Pagesへのデプロイも簡単

フレームワーク側のセットアップコマンドでアプリを立ち上げると、fsやcrypto周りなどで、Cloudflare Pages向けの調整をいくつか入れないといけないことがあります。しかしCloudflareのCLIツールでセットアップした場合は、そのままdeployコマンドを実行できました。Cloudflare Pagesのプロジェクトがない場合でも、対話形式で新規作成できますので、CLIだけで一通り完了できるのがよいですね。

% yarn deploy
yarn run v1.22.22
warning ../package.json: No license field
$ npm run build && wrangler pages deploy

> build
> remix vite:build

vite v5.2.13 building for production...
✓ 83 modules transformed.
build/client/.vite/manifest.json                1.07 kB │ gzip:  0.29 kB
build/client/assets/_index-C6MBye11.js          0.69 kB │ gzip:  0.40 kB
build/client/assets/root-LChrk_Sm.js            1.44 kB │ gzip:  0.84 kB
build/client/assets/jsx-runtime-56DGgGmo.js     8.11 kB │ gzip:  3.06 kB
build/client/assets/entry.client-jPehgn16.js   11.63 kB │ gzip:  4.08 kB
build/client/assets/components-BAmE7OwT.js    224.08 kB │ gzip: 72.39 kB
✓ built in 1.12s
vite v5.2.13 building SSR bundle for production...
✓ 5 modules transformed.
build/server/.vite/manifest.json  0.15 kB
build/server/index.js             4.63 kB
✓ built in 30ms
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&cxxxxx
Successfully logged in.
The project you specified does not exist: "remix-rag-app". Would you like to create it?"
❯ Create a new project
✔ Enter the production branch name: … main
✨ Successfully created the 'remix-rag-app' project.
▲ [WARNING] Warning: Your working directory is a git repo and has uncommitted changes

  To silence this warning, pass in --commit-dirty=true


✨ Compiled Worker successfully
🌍  Uploading... (7/7)

✨ Success! Uploaded 7 files (1.74 sec)

✨ Uploading _headers
✨ Uploading Functions bundle
✨ Uploading _routes.json
🌎 Deploying...
✨ Deployment complete! Take a peek over at https://xxxx1.remix-rag-app.pages.dev
✨  Done in 44.36s.

Pages向けかそれ以外かで、セットアップ方法が変わる点だけ注意しよう

今回はRemixでしたが、おそらくNext.jsなどもCloudflareのCLIツールから立ち上げた方が設定周りの最短距離を走れる可能性がたかそうです。ただ、まだ記事としてまとめれていませんが、時々最新版ではない実装でセットアップされるフレームワークもある様子でした。そのため、もし「ん？」と思う場面に遭遇した場合は、「設定値だけ参照する」用の部品取りとして立ち上げるのもよいかもしれません。