148 lines
5.5 KiB
Markdown
148 lines
5.5 KiB
Markdown
# 宝塔面板部署说明
|
||
|
||
在宝塔面板中部署本项目：前端由 Nginx 提供静态资源，`/api` 反向代理到本机 Node 后端（默认端口 5599），API 由 `run.sh` 或宝塔 Node 项目管理器保活。
|
||
|
||
---
|
||
|
||
## 一、环境准备
|
||
|
||
1. **安装 Node.js**（若未安装）
|
||
宝塔 → **软件商店** → 搜索 **Node 版本管理器** 或 **Node.js** → 安装，并在「设置」中安装 18 或 20 LTS。
|
||
|
||
2. **项目目录**
|
||
将项目放到计划使用的路径，例如：
|
||
`/www/wwwroot/view.airtep.com/720yun-offline`
|
||
或任意目录，下面以 `项目根目录` 表示。
|
||
|
||
---
|
||
|
||
## 二、添加网站并设置根目录
|
||
|
||
1. 宝塔 → **网站** → **添加站点**。
|
||
2. **域名**：填你的访问域名（如 `view.airtep.com`），或 IP。
|
||
3. **根目录**：必须指向**构建后的前端目录**：
|
||
- 推荐：`项目根目录/dist`
|
||
例如：`/www/wwwroot/view.airtep.com/720yun-offline/dist`
|
||
- 这样访问域名时打开的是 `dist/index.html`，且与 `/api` 同源，无需改 `api.config.json`。
|
||
4. **PHP 版本**：选「纯静态」即可（不需要 PHP）。
|
||
5. 创建站点后，先不关页面，接着配置反向代理。
|
||
|
||
---
|
||
|
||
## 三、配置 Nginx 反向代理（/api → 5599）
|
||
|
||
1. 在 **网站** 列表中找到刚添加的站点，点击 **设置**。
|
||
2. 左侧选 **反向代理** → **添加反向代理**。
|
||
3. 填写：
|
||
- **代理名称**：随意，如 `api`
|
||
- **目标 URL**：`http://127.0.0.1:5599/`（**末尾必须带 `/`**，这样 `/api/config` 会转成后端的 `/config`，因本后端路由无 `/api` 前缀）
|
||
- **代理目录**：`/api`（表示只把 `/api` 开头的请求转给后端）
|
||
- **发送域名**：默认 `$host` 即可
|
||
4. 保存后，若宝塔生成的 `proxy_pass` 没有末尾 `/`，请到 **设置 → 配置文件** 中把 `proxy_pass http://127.0.0.1:5599;` 改为 `proxy_pass http://127.0.0.1:5599/;`，再重载 Nginx。
|
||
|
||
效果：访问 `http://你的域名/api/config` 时，Nginx 会转发到 `http://127.0.0.1:5599/config`，后端才能正确返回。
|
||
|
||
---
|
||
|
||
## 四、部署与启动后端 API
|
||
|
||
后端需在本机 5599 端口常驻，任选一种方式即可。
|
||
|
||
### 方式 A：用 run.sh 一键部署（推荐）
|
||
|
||
在服务器 SSH 中进入项目根目录执行：
|
||
|
||
```bash
|
||
cd /www/wwwroot/view.airtep.com/720yun-offline # 换成你的项目路径
|
||
chmod +x run.sh
|
||
./run.sh
|
||
```
|
||
|
||
`run.sh` 会依次执行：拉代码 → 安装依赖 → 构建到 `dist/` → **后台启动 API**（nohup 或 pm2）。
|
||
因为网站根目录指向的是 `项目根目录/dist`，构建完成后刷新页面即可看到最新前端；API 已在后台运行，无需再开终端。
|
||
|
||
**使用 pm2 保活（推荐生产环境）：**
|
||
|
||
```bash
|
||
export USE_PM2=1
|
||
./run.sh
|
||
```
|
||
|
||
之后可在宝塔 **软件商店** → **Node 版本管理器** 或 SSH 中用 `pm2 list` / `pm2 logs view-airtep-api` 查看。
|
||
|
||
**若 Nginx 未反代 /api**（例如直接访问 IP:端口）：先设置再执行：
|
||
|
||
```bash
|
||
export API_BASE_URL="http://你的域名或IP:5599"
|
||
./run.sh
|
||
```
|
||
|
||
### 方式 B：用宝塔「Node 项目」托管 API
|
||
|
||
1. 宝塔 → **软件商店** → 安装 **Node 项目**（或 **PM2 管理器**）。
|
||
2. **网站** 里站点已按上面设好根目录与反向代理后，在 **Node 项目** 中：
|
||
- **添加项目**；
|
||
- **项目路径**：`项目根目录/server`（例如 `/www/wwwroot/view.airtep.com/720yun-offline/server`）；
|
||
- **启动文件**：`index.js`；
|
||
- **运行端口**：`5599`（与反向代理目标一致）；
|
||
- 保存并启动项目。
|
||
3. 部署/更新前端时，在项目根目录执行（不启动 API，由宝塔管）：
|
||
|
||
```bash
|
||
cd /www/wwwroot/view.airtep.com/720yun-offline
|
||
git pull
|
||
npm install --no-audit --no-fund
|
||
npm run build
|
||
```
|
||
|
||
然后在宝塔 Node 项目中点击「重启」该应用即可。
|
||
|
||
---
|
||
|
||
## 五、检查是否正常
|
||
|
||
1. **前端**：浏览器访问 `http://你的域名`，应能打开全景页。
|
||
2. **API**：
|
||
- 同机执行：`curl -s http://127.0.0.1:5599/config`，应返回 JSON。
|
||
- 或访问：`http://你的域名/api/config`，应返回相同内容（说明反代生效）。
|
||
|
||
若 `/api/config` 报 502，多半是 5599 端口未启或未监听：用方式 A 再跑一次 `./run.sh`，或用方式 B 在宝塔 Node 项目中启动/重启。
|
||
|
||
---
|
||
|
||
## 六、Nginx 配置参考（可选）
|
||
|
||
若你习惯手改 Nginx，在对应站点的 `server { ... }` 内可保留或加入类似配置（与宝塔「反向代理」界面效果一致）：
|
||
|
||
```nginx
|
||
root /www/wwwroot/view.airtep.com/720yun-offline/dist; # 与宝塔中「网站根目录」一致
|
||
index index.html;
|
||
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
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;
|
||
}
|
||
```
|
||
|
||
根目录路径请按你在宝塔中设置的「网站根目录」修改。保存后重载 Nginx。
|
||
|
||
---
|
||
|
||
## 七、小结
|
||
|
||
| 步骤 | 说明 |
|
||
|------|------|
|
||
| 1. 网站根目录 | 指向 `项目根目录/dist` |
|
||
| 2. 反向代理 | 代理目录 `/api` → 目标 `http://127.0.0.1:5599/`（末尾带 `/`） |
|
||
| 3. 后端保活 | 用 `./run.sh`（或 `USE_PM2=1 ./run.sh`），或用宝塔 Node 项目托管 `server/index.js` 端口 5599 |
|
||
|
||
按上述配置后，在宝塔中即可正常访问前端，且 `/api` 请求会由 Nginx 转发到本机 Node 服务并正常运行。
|