102 lines
3.2 KiB
Markdown
102 lines
3.2 KiB
Markdown
# 前后端分离部署说明
|
||
|
||
项目支持**前后端分离**部署：前端为纯静态资源，后端为独立 Node API，便于分别部署到静态主机与 API 服务器。
|
||
|
||
---
|
||
|
||
## 一、目录与职责
|
||
|
||
| 类型 | 目录/文件 | 说明 |
|
||
|------|-----------|------|
|
||
| **前端（静态）** | `index.html`, `config.json`, `api.config.json`, `lib/`, `image/` | 可部署到 Nginx、OSS、Vercel、GitHub Pages 等 |
|
||
| **后端（API）** | `server/`（含 `server.js`, `db.js`, `index.js`, `package.json`） | 单独部署到 Node 主机，仅提供 `/api/*` 接口 |
|
||
|
||
---
|
||
|
||
## 二、前端部署
|
||
|
||
1. **构建静态包**（在项目根目录）：
|
||
```bash
|
||
npm run build
|
||
```
|
||
产出目录 `dist/`，内含：`index.html`, `config.json`, `api.config.json`, `lib/`, `image/`。
|
||
|
||
2. **配置 API 地址**：
|
||
将 `dist/` 部署到你的静态站点后，修改 **`dist/api.config.json`**（或部署前在根目录改好再 build）：
|
||
```json
|
||
{
|
||
"apiBase": "https://你的API域名"
|
||
}
|
||
```
|
||
- 不填或空字符串 `""` 表示与当前页面同源（例如 Nginx 反向代理了 `/api` 到后端时可用 `""`）。
|
||
- 前后端不同域时填后端根地址，例如 `https://api.example.com`（不要以 `/` 结尾）。
|
||
前端会请求 `apiBase + '/api/config'`、`apiBase + '/api/stats'` 等。
|
||
|
||
3. **上传**：将 `dist/` 内所有文件上传到静态主机或 CDN。
|
||
|
||
---
|
||
|
||
## 三、后端部署
|
||
|
||
1. **只部署 API**：进入后端目录并安装依赖、启动：
|
||
```bash
|
||
cd server
|
||
npm install
|
||
npm start
|
||
```
|
||
默认端口 3000，可通过环境变量 `PORT` 修改。
|
||
数据文件为 `server/data/store.json`（首次运行自动创建，纯 JSON，无原生依赖）。
|
||
|
||
2. **生产环境建议**：
|
||
- 使用 pm2、systemd 等保活。
|
||
- 如需限制跨域，设置环境变量 `CORS_ORIGIN` 为前端域名，例如：
|
||
`CORS_ORIGIN=https://你的前端域名`
|
||
|
||
---
|
||
|
||
## 四、弹幕配置（后端）
|
||
|
||
弹幕**默认不显示**，由后端配置控制。
|
||
|
||
- 接口：**GET /api/config** 返回示例：
|
||
```json
|
||
{
|
||
"danmakuEnabled": false,
|
||
"danmakuPosition": "top"
|
||
}
|
||
```
|
||
- 数据来源：`server/data/store.json` 中的 `settings` 对象：
|
||
- `danmaku_enabled`：`"1"` 开启弹幕，`"0"` 关闭（默认）。
|
||
- `danmaku_position`：弹幕区域位置，目前仅使用 `top`（顶部）。
|
||
|
||
**开启弹幕**：在部署后端的机器上任选一种方式：
|
||
|
||
1. 直接编辑 `server/data/store.json`，将 `settings.danmaku_enabled` 改为 `"1"`。
|
||
2. 或执行（需在 `server` 目录下）：
|
||
```bash
|
||
cd server
|
||
node -e "
|
||
const fs=require('fs'),path=require('path');
|
||
const p=path.join(process.cwd(),'data','store.json');
|
||
const s=JSON.parse(fs.readFileSync(p,'utf8'));
|
||
s.settings.danmaku_enabled='1';
|
||
fs.writeFileSync(p,JSON.stringify(s,null,0));
|
||
console.log('已开启弹幕');
|
||
"
|
||
```
|
||
|
||
前端会周期性/首次请求 `/api/config`，收到 `danmakuEnabled: true` 后显示顶部弹幕并拉取留言。
|
||
|
||
---
|
||
|
||
## 五、本地联合运行（不分离）
|
||
|
||
在项目根目录：
|
||
|
||
```bash
|
||
npm install
|
||
npm start
|
||
```
|
||
|
||
会同时提供静态资源与 `/api` 接口（根目录 `server.js` 挂载 `server/` 的 API），适合本地开发。此时 `api.config.json` 的 `apiBase` 保持为 `""` 即可。
|