feat: add page functions proxy to make response faster (#234)

frontend/.env.pages

@@ -0,0 +1,2 @@
+VITE_API_BASE=
+VITE_CF_WEB_ANALY_TOKEN=

frontend/.gitignore

@@ -28,5 +28,7 @@ coverage
 *.sw?
 
 .env.*
+!.env.example
+!.env.pages
 *-dist/
 components.d.ts

frontend/package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build -m prod --emptyOutDir",
     "build:release": "vite build -m example --emptyOutDir",
+    "build:pages": "vite build -m pages --emptyOutDir",
     "preview": "vite preview",
     "deploy:preview": "npm run build && wrangler pages deploy ./dist --branch preview",
     "deploy": "npm run build && wrangler pages deploy ./dist --branch production"

pages/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env.*
+*-dist/
+components.d.ts
+.wrangler/
+pnpm-lock.yaml

pages/functions/_middleware.js

@@ -0,0 +1,9 @@
+const API_PATHS = ["/api/", "/open_api/", "/user_api/", "/admin/"]
+
+export async function onRequest(context) {
+    const reqPath = new URL(context.request.url).pathname;
+    if (API_PATHS.map(path => reqPath.startsWith(path)).some(Boolean)) {
+        return context.env.BACKEND.fetch(context.request);
+    }
+    return await context.next();
+}

pages/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "temp-email-pages",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "wrangler pages dev",
+    "deploy": "wrangler pages deploy --branch production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "wrangler": "^3.55.0"
+  }
+}

pages/wrangler.toml

@@ -0,0 +1,8 @@
+name = "temp-email-pages"
+pages_build_output_dir = "../frontend/dist"
+compatibility_date = "2024-05-13"
+
+[[services]]
+binding = "BACKEND"
+service = "cloudflare_temp_email"
+environment = "production"

vitepress-docs/docs/zh/guide/cli/pages.md

@@ -1,5 +1,11 @@
 # Cloudflare Pages 前端
 
+::: warning
+下面两种方式选择一种即可
+:::
+
+## 前后端分离部署
+
 第一次部署会提示创建项目, `production` 分支请填写 `production`
 
 ```bash
@@ -23,3 +29,19 @@ pnpm run deploy
 部署完成之后你可以在 Cloudflare 控制台看到你的项目, 可以为 `pages` 配置自定义域名
 
 ![pages](/readme_assets/pages.png)
+
+## 通过 page functions 转发后端请求
+
+从 page functions 转发请求到 worker 后端, 可以获取更快的响应速度
+
+第一次部署会提示创建项目, `production` 分支请填写 `production`
+
+如果你的 worker 后端 名称不为 `cloudflare_temp_email` 请修改 `pages/wrangler.toml`
+
+```bash
+cd frontend
+pnpm install
+pnpm build:pages
+cd ../pages
+pnpm run deploy
+```