0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

フロントエンドの世界Advent Calendar 2024

Day 12

Remixの世界: ビルドとデプロイ #5

Last updated at Posted at 2024-12-11

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

はじめに

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

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

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

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

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

frontend-assort-2024-banner.png

もくじ

デプロイ先

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 プロジェクトを追加します。

cloudflare-add-pages.png

Github リポジトリとの連携

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

スクリーンショット 2024-11-27 0.51.57.png

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

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

cloudflare-github.png

Cloudflare プロジェクト設定

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

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

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

ビルド設定

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

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

Framework preset
None

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

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

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

Build command
pnpm build
Build output directory
build/client
Root Directory
apps/remix-client

スクリーンショット 2024-12-11 23.55.04.png

デプロイ

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

参考記事

おわりに

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

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


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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?