記事データの反映がうまくいってなかったので再度公開しました。 2024/12/12

はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Remix に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

Remix に少しでも興味のある方は、ぜひご覧ください。

フロントエンドの世界 2024 について

「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

デプロイ先

Remixは以下の中から選んだランタイムに対し、最適化されたビルドを行うことができます。

今回は元々気になっていたCloudflare Pagesを選択しました。

(参考: Deployment)

必要なパッケージの導入

ランタイム用に@remix-run/cloudflare @remix-run/cloudflare-pagesを、型定義用に@cloudflare/workers-typesをインストールします。

# turborepoを使用している場合 (ルートで実行)
pnpm --filter remix-client install @remix-run/cloudflare @remix-run/cloudflare-pages

# 通常インストール
npm install @remix-run/cloudflare @remix-run/cloudflare-pages

devDependencies のインストール

# turborepoを使用している場合 (ルートで実行)
pnpm --filter remix-client install -D wrangler @cloudflare/workers-types

# 通常インストール
npm install -D wrangler @cloudflare/workers-types

また cloudflare-pages のランタイムに変わるので node ランタイムを削除します。

# turborepoを使用している場合 (ルートで実行)
pnpm --filter remix-client uninstall @remix-run/node

# 通常アンインストール
npm uninstall @remix-run/node

コードの修正

tsconfig.json

型定義として@remix-run/cloudflareと@cloudflare/workers-types/2023-07-01を compilerOptions.types に追加します。

tsconfig.json

...
"compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": [
+     "@remix-run/cloudflare",
      "vite/client",
+     "@cloudflare/workers-types/2023-07-01"
    ],
}
...

vite.config.ts

cloudflareDevProxyVitePluginを plugins 配下に追加します。

(参考: Cloudflare Proxy)

vite.config.ts

import {
  vitePlugin as remix,
+ cloudflareDevProxyVitePlugin,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

declare module "@remix-run/cloudflare" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig({
  plugins: [
+   cloudflareDevProxyVitePlugin(),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
  ],
});

functions/[[path]].ts

プロジェクトルートに functions/[[path]].ts ファイルを追加します。
追加をすることですべての Remix リクエストが Cloudflare Pages 用のアダプターでハンドリングされるようになります。

(参考: functions/[[path]].ts)

functions/[[path]].ts

import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";

import * as build from "../build/server";

export const onRequest = createPagesFunctionHandler({ build });

public/_routes.json

public 配下に_routes.jsonを追加することで、functions のハンドリング対象に含めるパス、除外するパスの定義が行えます。

今回ビルド後の静的アセットはハンドリングして欲しく無いので exclude します。

(参考: Create a _routes.json file)

public/routes.json

{
  "version": 1,
  "include": ["/*"],
  "exclude": ["/assets/*"]
}

app/entry.server.tsx

Remix プロジェクト作成時に元々含まれていたファイルですが、Cloudflare Pages ランタイムではよしなに処理してくれるので削除します。

wrangler.toml

cloudflare のデプロイ設定を記述します。

name
任意のプロジェクト名を設定します。

main
先ほど適宜したアダプターのパスを設定します。

assets
静的コンテンツを Workers で配布できるように静的コンテンツのディレクトリを指定します。

compatibility_date
現在の日付を YYYY-MM-dd 形式で設定します。

wrangler.toml

name = "frontend-assort-2024-remix"
main = "./functions/[[path]].ts"
assets = { directory = "./build/client" }
compatibility_date = "2024-12-05"

ローカル環境の立ち上げ確認

立ち上げコマンド変更

元々の remix-serve コマンドを wrangler を用いた立ち上げ小マントに変更します。

(参考: pages dev)

package.json

{
  ...
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-   "start": "remix-serve ./build/server/index.js",
+   "start": "wrangler pages dev build/client",
    "typecheck": "tsc"
  },
  ...
}

ビルド

立ち上げ前にビルドを行います。

# turborepoの場合
pnpm --filter remix-client build

# 通常ビルド
npm run build

立ち上げ

# turborepoを使用している場合 (ルートで実行)
pnpm --filter remix-client start

# 通常立ち上げ
npm run start

wrangler cli からのデプロイ

wrangler cli からそのまま Cloudflare Pages へのデプロイも可能です。

(参考: pages public)

npx wrangler pages publish build

Cloudflare プロジェクトの追加

右上の「+ Add」から新しい Pages プロジェクトを追加します。

Github リポジトリとの連携

デプロイアセットの連携方法を聞かれるので今回は Connect to Gitから Github を選択します。

連携したい Github アカウントとリポジトリを選択します。

今回は本記事用に作成した frontend-assort-2024というリポジトリを選択し、「Begin setup」からセットアップを開始します。

Cloudflare プロジェクト設定

プロジェクト名と対象ブランチの選択

任意のプロジェクト名を入力し、自動デプロイの対象ブランチを選択します。

今回は frontend-assort-2024というプロジェクト名でmainブランチを自動デプロイ対象に選択します。

ビルド設定

フレームワークのプリセットはnoneを選択します。

※ 通常は Remix のプリセットで問題ないですが、本アプリケーションはTurborepoによるモノレポ管理を行っているのでnoneで設定します。

Framework preset

None

モノレポではない場合、Remixのフレームワークプリセット選択時の自動設定のままで基本的に問題ないです。

モノレポの場合 (省略可能)

本アプリケーションで使用しているTurborepoとpnpmを用いた設定例です。

Build command

pnpm build

Build output directory

build/client

Root Directory

apps/remix-client

デプロイ

ここまでの設定を完了し"Save and Deploy"を押すとデプロイ処理が実行されます。
数分程度待ち、無事にデプロイが完了したことを確認できました。

参考記事

おわりに

必要なファイルや設定が多く、正直デプロイ周りが一番詰まりました。
もっと本質的な理解を目指して慣れていこうと思います。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

この記事はフロントエンドの世界 Advent Calendar 2024の 12 記事目です。
次の記事はこちら SolidJS の世界: SolidJS とは？ #1