RemixをCloudflare Workersで動かす

やります。使用しているRemixのバージョンはv1.0.4です。

セットアップ

$ npx create-remix@latest
# deployment targetとしてCloudflare Workersを選択

dev

自分の環境（かつv1.0.4）だけかもしれないが、開発用のサーバーを立ち上げるのにnpm run devだけでは動かず、以下のようにnpm run startも合わせて実行する必要がある。

$ npm run start # workersをローカルで動かす
# ターミナルで別タブを開く
$ npm run dev # こっちも合わせて動かさないとライブリロードが有効にならない

これでhttp://127.0.0.1:8787/でプレビューができるようになる。

デプロイ

ソースコードには修正を加えずにそのままデプロイを行ってみる。

wranglerのセットアップ

Cloudflare WorkersではwranglerというCLIを使ってローカルからデプロイが実行できる。wranglerの設定方法は以下の記事を参照。

https://zenn.dev/catnose99/articles/f86d74cc5abc37

はじめてWorkersを使う場合はダッシュボードで初期設定を済ませておく

また、はじめてCloudflare Workersを使う場合はCloudflareのダッシュボードから［Workers］タブを選択し、サブドメインを決めておく必要がある。

デプロイ

以下を実行する

$ npm run deploy

デプロイが成功するとWorkersのURLが表示される。開いたときにこんな画面が表示されればOK。

SSRが動いているか試してみる

Cloudflare WorkersでSSRができているかも試してみる。demoアプリではhttps://workersのURL/demos/params/なにかテキストにアクセスすると、そのテキストがレンダリングされるようになっている。

例えばhttps://workersのURL/demos/params/test-paramsにアクセスすると以下のような表示になる。

整理してまとめたもの

https://zenn.dev/catnose99/articles/a4ff1953921e33