記事データの反映がうまくいってなかったので再度公開しました。 2024/12/12
はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった Remix に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
Remix に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
- はじめに
- フロントエンドの世界 2024 について
- もくじ
- デプロイ先
- 必要なパッケージの導入
- コードの修正
- ローカル環境の立ち上げ確認
- wrangler cli からのデプロイ
- Cloudflare プロジェクトの追加
- Github リポジトリとの連携
- Cloudflare プロジェクト設定
- 参考記事
- おわりに
デプロイ先
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 に追加します。
...
"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)
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)
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)
{
"version": 1,
"include": ["/*"],
"exclude": ["/assets/*"]
}
app/entry.server.tsx
Remix プロジェクト作成時に元々含まれていたファイルですが、Cloudflare Pages ランタイムではよしなに処理してくれるので削除します。
wrangler.toml
cloudflare のデプロイ設定を記述します。
name
任意のプロジェクト名を設定します。
main
先ほど適宜したアダプターのパスを設定します。
assets
静的コンテンツを Workers で配布できるように静的コンテンツのディレクトリを指定します。
compatibility_date
現在の日付を YYYY-MM-dd 形式で設定します。
name = "frontend-assort-2024-remix"
main = "./functions/[[path]].ts"
assets = { directory = "./build/client" }
compatibility_date = "2024-12-05"
ローカル環境の立ち上げ確認
立ち上げコマンド変更
元々の remix-serve コマンドを wrangler を用いた立ち上げ小マントに変更します。
(参考: pages dev)
{
...
"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で設定します。
None
モノレポではない場合、Remixのフレームワークプリセット選択時の自動設定のままで基本的に問題ないです。
モノレポの場合 (省略可能)
本アプリケーションで使用しているTurborepoとpnpmを用いた設定例です。
pnpm build
build/client
apps/remix-client
デプロイ
ここまでの設定を完了し"Save and Deploy"を押すとデプロイ処理が実行されます。
数分程度待ち、無事にデプロイが完了したことを確認できました。
参考記事
おわりに
必要なファイルや設定が多く、正直デプロイ周りが一番詰まりました。
もっと本質的な理解を目指して慣れていこうと思います。
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 12 記事目です。
次の記事はこちら SolidJS の世界: SolidJS とは？ #1