Cloudflare Pagesで_worker.jsを使ってリクエストを中継する
ディレクトリ構成はこんな感じ。
code:sh
.
├── package-lock.json
├── package.json
├── public
│ ├── _worker.js
│ └── index.html
└── tsconfig.json
package.jsonがこんな感じで、
code:json
{
"name": "pages-sample",
"version": "0.0.0",
"devDependencies": {
"@cloudflare/workers-types": "^4.20221111.1",
"typescript": "^4.9.3",
"wrangler": "2.4.2"
},
"private": true,
"scripts": {
"dev": "wrangler pages dev public --local"
}
}
HTMLがこんな感じで、
code:html
<html>
<body>
<h1>Hello Pages</h1>
<a href="/api/dummy">Go to /api/dummy</a>
</body>
</html>
_worker.jsは下記のような具合。/api/*のパスへのリクエストは全てプロキシされる。
code:js
export default {
async fetch(request, env) {
const url = new URL(request.url);
if (url.pathname.startsWith("/api/")) {
return new Response(
request: ${JSON.stringify(request)}\n env: ${JSON.stringify(env)}
);
}
return env.ASSETS.fetch(request);
},
};