Closed8
pnpm-workspaceで複数のcloudflare workersを利用する

とりあえずディレクトリ作成する
mkdir sample-dir
cd sample-dir

c3でworkerを作成する
webの作成
pnpm create cloudflare@latest
In which directory do you want to create your application?
-> workers/web
What would you like to start with?
-> Framework Starter
Which development framework do you want to use?
-> React Router
calcの作成
npm create cloudflare@latest
In which directory do you want to create your application?
-> workers/calc
What would you like to start with?
-> Hello World example
Which template would you like to use?
-> Worker only

pnpm-workspace.yaml
を作る
packages:
- "workers/*"
package.json
にscript追加する
"scripts": {
"dev": "pnpm -r run dev"
},

calcの src/index.ts
を編集
WorkerEntrypoint
を継承したクラスを作成する
参考:https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/rpc/
import { WorkerEntrypoint } from 'cloudflare:workers'
export default class Calc extends WorkerEntrypoint {
async fetch(): Promise<Response> {
return new Response();
}
async add(a: number, b: number): Promise<Response> {
const result = a + b;
return new Response(result.toString());
}
}

webの wrangler.jsonc
に services
を追加する
"services": [
{
"binding": "CALC",
"service": "calc"
}
]

bindingがうまくいかない
react-routerだとまだサポートされてない?

これだ
webの vite.config.ts
に追記したら起動した!
cloudflare({
viteEnvironment: { name: "ssr" },
+ auxiliaryWorkers: [{ configPath: "../calc/wrangler.jsonc" }],
}),

完成物
- dev OK
- deploy OK
TODO
- typeをwrangler types に統一
このスクラップは5ヶ月前にクローズされました