概要
RemixをCloudflareWorkersで動かして、初期画面を描画することを目的としています。
事前に Cloudflare のアカウントが作成済みであることが前提です。
手順
プロジェクト作成
Cloudflare公式のRemixのページを参照してプロジェクトをセットアップします。
今回は pnpm を使用し、プロジェクト名は remix-sandbox としています。
$ 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と入力しています。
ローカルで起動
まず、プロジェクトのルートに移動します。
$ cd remix-sandbox
中身は以下のような構成でになっています。
$ 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
起動コマンドを実行すると
$ 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/ にアクセスすると以下の画面が表示されます。
Cloudflare Workers のローカル環境で起動
Cloudflare Workers は専用のローカル環境を構築できるようになっており、実際のエッジネットワーク環境にデプロイする前にローカルでの開発とテストを行うことができます。
具体的には wrangler.toml ファイルに記載された設定を元に、ローカル開発サーバーが起動します。
これにより、ローカルマシン上で Cloudflare Workers の動作を確認することができるのです。
ローカルの Cloudflare Workers 環境で動かすためにまずビルドします。
$ 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 コマンドをインストールしておく必要があります。（公式のページ）
このタイミングで wrangler でログインできていると実際にデプロイするときにスムーズです。
今ログインできているかは以下で確認できます。
$ wrangler whoami
ログインできていない場合は
$ wrangler login
でログインします。
次に、環境を立ち上げます。
# 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 というコマンドも準備されています。
"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つで完了するので楽ちんです。
$ 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 に設定したものです。
訪問する を押下すると、先程と同じRemixの初期画面が表示されます。
これでRemixのアプリケーションを Cloudflare Workers 上で動かすことができました。