RemixをCloudflare Workersでとりあえず動かす

# 概要

RemixをCloudflareWorkersで動かして、初期画面を描画することを目的としています。

事前に Cloudflare のアカウントが作成済みであることが前提です。

# 手順

## プロジェクト作成

[Cloudflare公式のRemixのページ](https://developers.cloudflare.com/workers/frameworks/framework-guides/remix/)を参照してプロジェクトをセットアップします。
今回は pnpm を使用し、プロジェクト名は `remix-sandbox` としています。

```sh
$ pnpm create cloudflare@latest remix-sandbox --framework=remix --experimental

.../1944b0904b7-766                      |   +1 +
.../1944b0904b7-766                      | Progress: resolved 1, reused 0, downloaded 1, added 1, done

──────────────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.35.2!
🧡 Let's get started.

🧪 Running in experimental mode

📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.

Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
──────────────────────────────────────────────────────────────────────────────────────────────────────────

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./remix-sandbox
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework Remix
│
├ Continue with Remix via `pnpm dlx create-remix@2.15.2 remix-sandbox --template https://github.com/remix-run/remix/tree/main/templates/cloudflare-workers`
│

 WARN  2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Packages: +205
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 205, reused 203, downloaded 2, added 205, done

 remix   v2.15.2 💿 Let's build a better website...
      ◼  Directory: Using remix-sandbox as project directory

      ◼  Template: Using https://github.com/remix-run/remix/tree/main/templates/cloudflare-workers...
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with pnpm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

         Enter your project directory using cd ./remix-sandbox
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord


├ Copying template files
│ files copied to project directory
│
╰ Application created 

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing @cloudflare/workers-types
│ installed via pnpm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Retrieving current workerd compatibility date
│ compatibility date 2025-01-09
│
├ Updating the Wrangler version
│ updated wrangler@latest
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Committing new files
│ git commit
│
╰ Application configured 

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `pnpm run deploy`
│
╰ Done 

────────────────────────────────────────────────────────────
🎉  SUCCESS  Application created successfully!

💻 Continue Developing
Change directories: cd remix-sandbox
Start dev server: pnpm run dev
Deploy: pnpm run deploy

📖 Explore Documentation
https://developers.cloudflare.com/workers

🐛 Report an Issue
https://github.com/cloudflare/workers-sdk/issues/new/choose

💬 Join our Community
https://discord.cloudflare.com
────────────────────────────────────────────────────────────
```

以下、セットアップ項目の自分で入力した箇所です。

>    git   Initialize a new git repository?
         Yes
>  deps   Install dependencies with pnpm?
         Yes

gitで初期化するか、pnpm を使うかにそれぞれyesと入力しています。

## ローカルで起動

まず、プロジェクトのルートに移動します。

```shell
$ cd remix-sandbox
```

中身は以下のような構成でになっています。

```shell
$ ls
README.md			load-context.ts			pnpm-lock.yaml			server.ts			vite.config.ts
app				node_modules			postcss.config.js		tailwind.config.ts		worker-configuration.d.ts
build				package.json			public				tsconfig.json			wrangler.toml
```

起動コマンドを実行すると

```sh
$ pnpm run dev

> remix-sandbox@ dev /Users/~~~~/remix-sandbox
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
```

http://localhost:5173/ にアクセスすると以下の画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640055/59cf9d77-d47c-c897-e685-b9693e6f1721.png)

## Cloudflare Workers のローカル環境で起動

Cloudflare Workers は専用のローカル環境を構築できるようになっており、実際のエッジネットワーク環境にデプロイする前にローカルでの開発とテストを行うことができます。
具体的には `wrangler.toml` ファイルに記載された設定を元に、ローカル開発サーバーが起動します。
これにより、ローカルマシン上で Cloudflare Workers の動作を確認することができるのです。

ローカルの Cloudflare Workers 環境で動かすためにまずビルドします。

```sh
$ pnpm run build

> remix-sandbox@ build /Users/~~~~/remix-sandbox
> remix vite:build

vite v5.4.11 building for production...
✓ 85 modules transformed.
build/client/.vite/manifest.json                1.12 kB │ gzip:  0.32 kB
build/client/assets/root-CS6YCbpS.css           6.79 kB │ gzip:  2.01 kB
build/client/assets/root-mRSze8Wz.js            1.73 kB │ gzip:  0.99 kB
build/client/assets/entry.client-CHpbgU94.js    3.73 kB │ gzip:  1.43 kB
build/client/assets/_index-CoBtcnsZ.js          5.05 kB │ gzip:  2.05 kB
build/client/assets/jsx-runtime-D5FwP9M8.js     8.11 kB │ gzip:  3.05 kB
build/client/assets/components-UFyj0GOY.js    247.43 kB │ gzip: 79.88 kB
✓ built in 558ms
vite v5.4.11 building SSR bundle for production...
✓ 6 modules transformed.
build/server/.vite/manifest.json               0.22 kB
build/server/assets/server-build-CS6YCbpS.css  6.79 kB
build/server/index.js                          7.73 kB
✓ built in 21ms
```

起動の前に `wrangler` コマンドをインストールしておく必要があります。（[公式のページ](https://developers.cloudflare.com/workers/wrangler/install-and-update/)）

このタイミングで wrangler でログインできていると実際にデプロイするときにスムーズです。
今ログインできているかは以下で確認できます。

```sh
$ wrangler whoami
```

ログインできていない場合は

```sh
$ wrangler login
```

でログインします。

次に、環境を立ち上げます。

```sh
# pnpm run start

> remix-sandbox@ start /Users/~~~~/remix-sandbox
> wrangler dev


 ⛅️ wrangler 3.100.0
--------------------

[wrangler:inf] Ready on http://localhost:8787
⎔ Starting local server...
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│  [b] open a browser, [d] open devtools, [l] turn off local mode, [c] clear console, [x] to exit  │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
```

キーボードの `B` を押すと http://localhost:8787 が開き、先程と同じ画面が表示されます。

（余談）

`package.json` には以下のような記述されており、ビルドと起動を同時に行ってくれる `pnpm run preview` というコマンドも準備されています。

```json
  "scripts": {
    "build": "remix vite:build",
    "deploy": "pnpm run build && wrangler deploy",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "wrangler dev",
    "typecheck": "tsc",
    "typegen": "wrangler types",
    "preview": "pnpm run build && wrangler dev",
    "cf-typegen": "wrangler types"
  }
```

## Cloudflare Workers にデプロイ

`wrangler` コマンドがインストールされておりログインも済んでいれば、デプロイはコマンド1つで完了するので楽ちんです。

```sh
$ pnpm run deploy

> remix-sandbox@ deploy /Users/~~~~/remix-sandbox
> pnpm run build && wrangler deploy


> remix-sandbox@ build /Users/~~~~/remix-sandbox
> remix vite:build

vite v5.4.11 building for production...
✓ 85 modules transformed.

（中略）

Current Version ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
```

その後 Cloudflare のダッシュボードの `Workers & Pages` のタブを開くとプロジェクトが作成されます。
ここに表示される名前は `wrangler.toml` に記載されている `name` に設定したものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640055/3583773f-34c4-2b45-6e34-b8e72bf4bed2.png)

`訪問する` を押下すると、先程と同じRemixの初期画面が表示されます。

これでRemixのアプリケーションを Cloudflare Workers 上で動かすことができました。