83 lines
3.0 KiB
Markdown
83 lines
3.0 KiB
Markdown
# 萌芽导航 - 前后端分离版
|
||
|
||
- **前端**：静态 PWA，部署到 **Cloudflare Pages**
|
||
- **后端**：API Worker，部署到 **Cloudflare Workers**（目录 `cf-nav-backend`）
|
||
|
||
## 一、后端（Cloudflare Worker）
|
||
|
||
1. 进入后端目录并安装依赖、部署：
|
||
|
||
```bash
|
||
cd cf-nav-backend
|
||
npm install
|
||
npm run deploy
|
||
```
|
||
|
||
2. 修改 `cf-nav-backend/wrangler.toml`：
|
||
- 如需新 KV：`wrangler kv:namespace create "NAV_KV"`，将返回的 `id` 填入 `[[kv_namespaces]]` 的 `id`
|
||
- 修改 `[vars]` 中的 `ADMIN_PASSWORD`，或使用 `wrangler secret put ADMIN_PASSWORD` 设置密钥
|
||
|
||
3. 部署成功后记下 Worker 地址，例如：
|
||
`https://cf-nav-backend.你的子域.workers.dev`
|
||
|
||
## 二、前端（Cloudflare Pages）
|
||
|
||
1. **配置 API 地址**
|
||
编辑项目根目录下的 `config.js`，将 `window.API_BASE` 改为你的后端 Worker 地址，例如：
|
||
|
||
```javascript
|
||
window.API_BASE = 'https://cf-nav-backend.你的子域.workers.dev';
|
||
```
|
||
|
||
2. **部署到 Pages**
|
||
|
||
- **方式 A - Git 推送**
|
||
- 在 Cloudflare Dashboard → Pages → 创建项目 → 连接 Git
|
||
- 构建：**无**（或留空）
|
||
- 输出目录：`/`（根目录）
|
||
- 部署后前端即可通过你的 `*.pages.dev` 或自定义域名访问
|
||
|
||
- **方式 B - 直接上传**
|
||
- Pages → 创建项目 → 直接上传
|
||
- 将当前仓库根目录下所有前端文件（含 `config.js`、`index.html`、`app.js`、`admin.html`、`admin.js`、`styles.css`、`sw.js`、`manifest.webmanifest`、`logo.png`、`favicon.ico`、`offline.html`、`_redirects`）打包上传
|
||
|
||
3. **本地预览**
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
浏览器打开 `http://localhost:3000`。本地未配置同源 API 时，需在 `config.js` 中填写后端 Worker 地址才能正常请求数据。
|
||
|
||
## 三、目录结构说明
|
||
|
||
```
|
||
mengya-nav/
|
||
├── index.html # 首页
|
||
├── admin.html # 后台
|
||
├── app.js # 首页逻辑
|
||
├── admin.js # 后台逻辑
|
||
├── config.js # API 地址（部署前必改）
|
||
├── styles.css
|
||
├── sw.js # PWA Service Worker
|
||
├── manifest.webmanifest
|
||
├── offline.html
|
||
├── logo.png / favicon.ico
|
||
├── _redirects # 后台请直接访问 /admin.html（勿用 /admin 避免重定向）
|
||
├── package.json # 前端脚本
|
||
└── cf-nav-backend/ # 后端 Worker
|
||
├── worker.js # 仅 API，无静态资源
|
||
├── wrangler.toml
|
||
└── package.json
|
||
```
|
||
|
||
## 四、CORS 与安全
|
||
|
||
- 后端 Worker 已设置 `Access-Control-Allow-Origin: *`，Pages 域名可正常请求。
|
||
- 生产环境建议在 Worker 中把 `Access-Control-Allow-Origin` 改为你的 Pages 域名，并务必修改/保管好 `ADMIN_PASSWORD`。
|
||
|
||
## 五、数据迁移
|
||
|
||
若之前已用旧版单 Worker 部署并使用了 KV，只需在 `cf-nav-backend/wrangler.toml` 中沿用原来的 KV namespace `id`，即可继续使用同一份数据，无需迁移。
|