194 lines
3.2 KiB
Markdown
194 lines
3.2 KiB
Markdown
|
|
# 管理端宝塔部署指南(无 Nginx 方案)
|
|||
|
|
|
|||
|
|
## 方案 1:使用 Node.js 运行(推荐)
|
|||
|
|
|
|||
|
|
### 步骤 1:本地构建
|
|||
|
|
```bash
|
|||
|
|
cd e:\ai-clone\ai-clone\admin
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 2:上传到服务器
|
|||
|
|
将整个 `admin` 目录上传到服务器,例如:
|
|||
|
|
```
|
|||
|
|
/www/wwwroot/admin-frontend/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 3:在服务器安装依赖
|
|||
|
|
```bash
|
|||
|
|
cd /www/wwwroot/admin-frontend
|
|||
|
|
npm install
|
|||
|
|
npm install -g serve
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 4:使用 serve 运行
|
|||
|
|
```bash
|
|||
|
|
serve -s dist -l 20002
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 5:配置 PM2 守护进程(保持运行)
|
|||
|
|
```bash
|
|||
|
|
# 安装 PM2
|
|||
|
|
npm install -g pm2
|
|||
|
|
|
|||
|
|
# 启动服务
|
|||
|
|
pm2 serve dist 20002 --name admin-frontend --spa
|
|||
|
|
|
|||
|
|
# 保存配置
|
|||
|
|
pm2 save
|
|||
|
|
|
|||
|
|
# 设置开机自启
|
|||
|
|
pm2 startup
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 6:开放端口
|
|||
|
|
在宝塔面板 -> 安全 -> 放行端口:`20002`
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 方案 2:使用 Python SimpleHTTPServer
|
|||
|
|
|
|||
|
|
### 步骤 1:上传 dist 目录
|
|||
|
|
将构建后的 `dist` 目录上传到:
|
|||
|
|
```
|
|||
|
|
/www/wwwroot/admin-frontend/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 2:创建启动脚本
|
|||
|
|
在服务器创建文件 `/www/wwwroot/admin-frontend/start.sh`:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
#!/bin/bash
|
|||
|
|
cd /www/wwwroot/admin-frontend/dist
|
|||
|
|
python3 -m http.server 20002
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 3:赋予执行权限
|
|||
|
|
```bash
|
|||
|
|
chmod +x /www/wwwroot/admin-frontend/start.sh
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 4:使用 PM2 运行
|
|||
|
|
```bash
|
|||
|
|
pm2 start /www/wwwroot/admin-frontend/start.sh --name admin-frontend
|
|||
|
|
pm2 save
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 方案 3:修改后端支持静态文件(最简单)
|
|||
|
|
|
|||
|
|
直接让 Spring Boot 后端同时提供管理端前端页面。
|
|||
|
|
|
|||
|
|
### 步骤 1:构建前端
|
|||
|
|
```bash
|
|||
|
|
cd e:\ai-clone\ai-clone\admin
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 2:复制 dist 到后端
|
|||
|
|
将 `dist` 目录下的所有文件复制到:
|
|||
|
|
```
|
|||
|
|
e:\ai-clone\ai-clone\ai-clone\src\main\resources\static\admin\
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 3:访问
|
|||
|
|
访问:`http://115.190.167.176:20002/admin/index.html`
|
|||
|
|
|
|||
|
|
但这样就不是 20002 端口了。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 推荐配置(方案 1 - PM2 + serve)
|
|||
|
|
|
|||
|
|
这是最稳定的方案,步骤如下:
|
|||
|
|
|
|||
|
|
### 1. 本地构建
|
|||
|
|
```powershell
|
|||
|
|
cd e:\ai-clone\ai-clone\admin
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 压缩 dist 目录
|
|||
|
|
将 `dist` 目录压缩为 `dist.zip`
|
|||
|
|
|
|||
|
|
### 3. 上传到服务器
|
|||
|
|
使用宝塔面板文件管理,上传到 `/www/wwwroot/`
|
|||
|
|
|
|||
|
|
### 4. 解压并创建目录
|
|||
|
|
```bash
|
|||
|
|
cd /www/wwwroot
|
|||
|
|
mkdir admin-frontend
|
|||
|
|
cd admin-frontend
|
|||
|
|
unzip ../dist.zip
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. 安装 serve 和 PM2
|
|||
|
|
```bash
|
|||
|
|
npm install -g serve pm2
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 6. 启动服务
|
|||
|
|
```bash
|
|||
|
|
cd /www/wwwroot/admin-frontend
|
|||
|
|
pm2 serve dist 20002 --name admin-frontend --spa
|
|||
|
|
pm2 save
|
|||
|
|
pm2 startup
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 7. 开放端口
|
|||
|
|
宝塔面板 -> 安全 -> 添加端口规则:`20002`
|
|||
|
|
|
|||
|
|
### 8. 访问测试
|
|||
|
|
浏览器访问:`http://115.190.167.176:20002`
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## PM2 常用命令
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 查看运行状态
|
|||
|
|
pm2 list
|
|||
|
|
|
|||
|
|
# 查看日志
|
|||
|
|
pm2 logs admin-frontend
|
|||
|
|
|
|||
|
|
# 重启服务
|
|||
|
|
pm2 restart admin-frontend
|
|||
|
|
|
|||
|
|
# 停止服务
|
|||
|
|
pm2 stop admin-frontend
|
|||
|
|
|
|||
|
|
# 删除服务
|
|||
|
|
pm2 delete admin-frontend
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 故障排查
|
|||
|
|
|
|||
|
|
### 1. 端口被占用
|
|||
|
|
```bash
|
|||
|
|
# 查看端口占用
|
|||
|
|
netstat -tunlp | grep 20002
|
|||
|
|
|
|||
|
|
# 杀死进程
|
|||
|
|
kill -9 <PID>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 防火墙未开放
|
|||
|
|
```bash
|
|||
|
|
# 检查防火墙
|
|||
|
|
firewall-cmd --list-ports
|
|||
|
|
|
|||
|
|
# 开放端口
|
|||
|
|
firewall-cmd --permanent --add-port=20002/tcp
|
|||
|
|
firewall-cmd --reload
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 页面刷新 404
|
|||
|
|
使用 `--spa` 参数:
|
|||
|
|
```bash
|
|||
|
|
pm2 serve dist 20002 --spa --name admin-frontend
|
|||
|
|
```
|