87 lines
4.5 KiB
Markdown
87 lines
4.5 KiB
Markdown
# 前端与接口关系说明
|
||
|
||
## 一、架构关系
|
||
|
||
```
|
||
浏览器访问 https://view.airtep.com
|
||
│
|
||
▼
|
||
Nginx (80/443)
|
||
│
|
||
├─ / → root dist/ → index.html、config.json、api.config.json、lib/、image/
|
||
├─ /api/* → 反代到 127.0.0.1:5599/ → 后端 Node（无 /api 前缀）
|
||
└─ 其他静态 → dist/ 下文件
|
||
```
|
||
|
||
- **前端**：纯静态，来自 `dist/`（index.html、config.json、api.config.json、lib/、image/）。由 Nginx 的 `root` + `location /` 提供。
|
||
- **接口**：Node 进程监听 **5599**，路由为 **/config、/stats、/view、/join、/comments** 等（**没有 /api 前缀**）。
|
||
- **Nginx 反代**：必须用 `location /api` 且 `proxy_pass http://127.0.0.1:5599/;`（末尾有 `/`），这样请求 `/api/config` 会被转成后端的 `/config`。
|
||
|
||
## 二、为何出现 404
|
||
|
||
`nginx -T` 里会看到**多个** `location /api` 和 **location /api/**，来自不同站点或 include：
|
||
|
||
- **location /api**（4 个字符）→ 反代到 5599 ✅
|
||
- **location /api/**（5 个字符）→ 可能反代到 3000、3001、9091 等 ❌
|
||
|
||
Nginx 对**前缀 location** 选**最长匹配**。请求 `/api/config` 时，若当前 server 里**同时存在** `location /api` 和 `location /api/`，会匹配到 **location /api/**。若这个 `/api/` 指向的是 3001 等其它服务，就会返回 404。
|
||
|
||
因此：**view.airtep.com 的 server 里只能保留「反代到 5599」的那一个 location，且不要有「location /api/」指向其它端口。**
|
||
|
||
## 三、正确配置（view.airtep.com 仅此一段 /api）
|
||
|
||
在 view.airtep.com 的 server 块内：
|
||
|
||
- **只保留**下面这一段，**不要**再写 `location /api/` 或其它端口的 `/api`：
|
||
|
||
```nginx
|
||
location /api {
|
||
proxy_pass http://127.0.0.1:5599/;
|
||
proxy_http_version 1.1;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||
proxy_set_header X-Forwarded-Proto $scheme;
|
||
}
|
||
```
|
||
|
||
- 若存在 **include**（例如 `extension/view.airtep.com/*.conf`），检查这些 conf 里是否带有 **location /api/** 或 **location /api**。若有且指向 3000/3001/9091 等，要在 view.airtep.com 的站点下**删掉或注释**这些 include 中的 `/api` 配置，或在该 include 里**只保留**上面这段 5599 反代。
|
||
|
||
## 四、检查与验证
|
||
|
||
在服务器上：
|
||
|
||
```bash
|
||
# 1. 本机 API 正常
|
||
curl -s http://127.0.0.1:5599/config
|
||
# 应返回：{"danmakuEnabled":false,"danmakuPosition":"top"}
|
||
|
||
# 2. 查看 view.airtep.com 所在 server 块中的 /api 配置（行号供对照）
|
||
grep -n "location /api\|proxy_pass" /www/server/panel/vhost/nginx/view.airtep.com.conf
|
||
|
||
# 3. 查看是否有 extension 覆盖 /api
|
||
ls /www/server/panel/vhost/nginx/extension/view.airtep.com/
|
||
cat /www/server/panel/vhost/nginx/extension/view.airtep.com/*.conf
|
||
|
||
# 4. 重载后测 80 和 443
|
||
nginx -t && nginx -s reload
|
||
curl -s -o /dev/null -w "80: %{http_code}\n" "http://127.0.0.1/api/config" -H "Host: view.airtep.com"
|
||
curl -sk -o /dev/null -w "443: %{http_code}\n" "https://view.airtep.com/api/config"
|
||
# 两者都应为 200
|
||
```
|
||
|
||
## 五、后端数据落库与前端显示
|
||
|
||
- **存储**：后端使用 `server/data/store.json`（JSON 文件），路径由 `server/db.js` 的 `__dirname` 决定，与进程当前工作目录无关；每次修改（浏览/点赞/分享/加入离开/评论）都会调用 `save()` 落盘。
|
||
- **验证落库**：在服务器上查看 `server/data/store.json` 或请求 `curl -s http://127.0.0.1:5599/stats` 即可确认数据是否写入。
|
||
- **前端显示异常**：若接口正常但页面上的「播放次数、点赞、分享、评论、在看」出现被置 0 或错乱，多为前端用「部分接口返回值」直接刷新整块统计导致（例如 `/join` 只返回 `watchingNow`，却用 `updateStatsUI({ watchingNow })` 把其他项也刷成 0）。处理方式：前端维护一份 `lastStats`，每次只合并本次接口返回的字段再刷新 UI，避免部分更新覆盖其它统计。
|
||
|
||
## 六、小结
|
||
|
||
| 角色 | 说明 |
|
||
|------------|------|
|
||
| 前端 | Nginx 提供 dist/ 下静态资源，同域访问。 |
|
||
| 接口 | Node 监听 5599，路由为 /config、/stats 等（无 /api 前缀）。 |
|
||
| Nginx 反代 | 仅用 **location /api** 且 **proxy_pass http://127.0.0.1:5599/**，且本站点内不要有 **location /api/** 指向其它端口。 |
|
||
| 404 原因 | 存在 **location /api/** 且指向 3001 等，优先于 **location /api**，请求被转到错误后端。 |
|