前后端分离部署说明

项目支持前后端分离部署：前端为纯静态资源，后端为独立 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/*` 接口

二、前端部署

构建静态包（在项目根目录）：
```
npm run build
```
产出目录 dist/，内含：index.html, config.json, api.config.json, lib/, image/。
配置 API 地址：
将 dist/ 部署到你的静态站点后，修改 dist/api.config.json（或部署前在根目录改好再 build）：
```
{
  "apiBase": "https://你的API域名"
}
```
- 不填或空字符串 "" 表示与当前页面同源（例如 Nginx 反向代理了 /api 到后端时可用 ""）。
- 前后端不同域时填后端根地址，例如 https://api.example.com（不要以 / 结尾）。
  前端会请求 apiBase + '/api/config'、apiBase + '/api/stats' 等。
上传：将 dist/ 内所有文件上传到静态主机或 CDN。

三、后端部署

只部署 API：进入后端目录并安装依赖、启动：
```
cd server
npm install
npm start
```
默认端口 3000，可通过环境变量 PORT 修改。
数据库文件为 server/data/pano.db（首次运行自动创建）。
生产环境建议：
- 使用 pm2、systemd 等保活。
- 如需限制跨域，设置环境变量 CORS_ORIGIN 为前端域名，例如：
  CORS_ORIGIN=https://你的前端域名

四、弹幕配置（后端）

弹幕默认不显示，由后端配置控制。

接口：GET /api/config 返回示例：

{
  "danmakuEnabled": false,
  "danmakuPosition": "top"
}

数据来源：SQLite 表 settings（在 server/data/pano.db 所在库）：
- danmaku_enabled：1 开启弹幕，0 关闭（默认）。
- danmaku_position：弹幕区域位置，目前仅使用 top（顶部）。

开启弹幕：在部署后端的机器上执行（或通过自建管理接口写入）：

cd server
node -e "
const db = require('better-sqlite3')('data/pano.db');
db.prepare(\"INSERT OR REPLACE INTO settings (key, value) VALUES ('danmaku_enabled', '1')\").run();
db.close();
"

或使用 SQLite 客户端执行：

INSERT OR REPLACE INTO settings (key, value) VALUES ('danmaku_enabled', '1');

前端会周期性/首次请求 /api/config，收到 danmakuEnabled: true 后显示顶部弹幕并拉取留言。

五、本地联合运行（不分离）

在项目根目录：

npm install
npm start

会同时提供静态资源与 /api 接口（根目录 server.js 挂载 server/ 的 API），适合本地开发。此时 api.config.json 的 apiBase 保持为 "" 即可。

3.1 KiB Raw Blame History Unescape Escape