259 lines
7.4 KiB
Markdown
Executable File
259 lines
7.4 KiB
Markdown
Executable File
# 生产环境部署指南
|
||
|
||
## 一、服务器地址配置说明
|
||
|
||
### 1. 当前代码中的服务器地址配置位置
|
||
|
||
代码中使用了**相对路径**作为 API 的 baseURL，这意味着：
|
||
|
||
- **开发环境**：通过 Vite 代理转发到后端服务器
|
||
- **生产环境**：需要通过 Nginx 等反向代理服务器配置转发
|
||
|
||
#### 代码中的 API 路径配置：
|
||
|
||
1. **登录接口** (`src/request/http.ts`)
|
||
- baseURL: `/dada`
|
||
- 开发环境代理：`vite.config.ts` 第 44-48 行
|
||
|
||
2. **智能审核接口** (`src/request/reviewHttp.ts`)
|
||
- baseURL: `/ai-review/api`
|
||
- 开发环境代理：`vite.config.ts` 第 25-29 行
|
||
|
||
3. **智能写作接口** (`src/request/writingHttp.ts`)
|
||
- baseURL: `/ai-doc/api`
|
||
- 开发环境代理：`vite.config.ts` 第 31-35 行
|
||
|
||
4. **AI助手对话接口** (`src/api/finyxbot.ts`)
|
||
- baseURL: `/finyx-bot/api`
|
||
- 开发环境代理：`vite.config.ts` 第 37-41 行
|
||
|
||
### 2. 开发环境服务器地址
|
||
|
||
当前开发环境配置的服务器地址为：`https://finyxdev.datacubeworld.com`
|
||
|
||
位置：`vite.config.ts` 第 26、32、38、45 行
|
||
|
||
```typescript
|
||
// 开发环境代理配置（仅开发时使用）
|
||
proxyConf['/ai-review/api'] = {
|
||
target: 'https://finyxdev.datacubeworld.com', // 开发环境地址
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(ENV.VITE_BASE_PATH, '/')
|
||
}
|
||
```
|
||
|
||
## 二、生产环境部署步骤
|
||
|
||
### 步骤 1：修改开发环境代理地址（可选）
|
||
|
||
如果需要在开发环境测试生产服务器，可以修改 `vite.config.ts` 中的 `target` 地址：
|
||
|
||
```typescript
|
||
// 将以下地址改为你的生产环境地址
|
||
const PROD_SERVER = 'https://your-production-server.com'
|
||
|
||
proxyConf['/ai-review/api'] = {
|
||
target: PROD_SERVER,
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(ENV.VITE_BASE_PATH, '/')
|
||
}
|
||
|
||
proxyConf['/ai-doc/api'] = {
|
||
target: PROD_SERVER,
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(ENV.VITE_BASE_PATH, '/')
|
||
}
|
||
|
||
proxyConf['/finyx-bot/api'] = {
|
||
target: PROD_SERVER,
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(ENV.VITE_BASE_PATH, '/')
|
||
}
|
||
|
||
proxyConf['/dada'] = {
|
||
target: PROD_SERVER,
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(ENV.VITE_BASE_PATH, '/')
|
||
}
|
||
```
|
||
|
||
### 步骤 2：构建生产版本
|
||
|
||
```bash
|
||
# 构建生产版本
|
||
pnpm run build:prd
|
||
|
||
# 或者
|
||
pnpm run build
|
||
```
|
||
|
||
构建完成后，会在 `dist` 目录生成静态文件。
|
||
|
||
### 步骤 3：配置 Nginx 反向代理
|
||
|
||
生产环境需要配置 Nginx 反向代理，将前端请求转发到后端服务器。
|
||
|
||
#### Nginx 配置示例：
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
|
||
# 前端静态文件目录
|
||
root /path/to/your/dist;
|
||
index index.html;
|
||
|
||
# 前端路由（Vue Router history 模式）
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
# 登录接口代理
|
||
location /dada {
|
||
proxy_pass https://your-production-server.com;
|
||
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;
|
||
proxy_ssl_verify off;
|
||
}
|
||
|
||
# 智能审核接口代理
|
||
location /ai-review/api {
|
||
proxy_pass https://your-production-server.com;
|
||
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;
|
||
proxy_ssl_verify off;
|
||
}
|
||
|
||
# 智能写作接口代理
|
||
location /ai-doc/api {
|
||
proxy_pass https://your-production-server.com;
|
||
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;
|
||
proxy_ssl_verify off;
|
||
}
|
||
|
||
# AI助手对话接口代理
|
||
location /finyx-bot/api {
|
||
proxy_pass https://your-production-server.com;
|
||
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;
|
||
proxy_ssl_verify off;
|
||
}
|
||
|
||
# WebSocket 支持（如果需要）
|
||
location /finyx-bot/api/v1/chat/stream {
|
||
proxy_pass https://your-production-server.com;
|
||
proxy_http_version 1.1;
|
||
proxy_set_header Upgrade $http_upgrade;
|
||
proxy_set_header Connection "upgrade";
|
||
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;
|
||
proxy_read_timeout 3600s;
|
||
proxy_ssl_verify off;
|
||
}
|
||
|
||
# 静态资源缓存
|
||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
}
|
||
```
|
||
|
||
**重要提示**：
|
||
- 将 `your-production-server.com` 替换为你的实际生产环境服务器地址
|
||
- 将 `your-domain.com` 替换为你的实际域名
|
||
- 将 `/path/to/your/dist` 替换为实际的 dist 目录路径
|
||
|
||
### 步骤 4：部署静态文件
|
||
|
||
将构建好的 `dist` 目录内容上传到服务器，并确保 Nginx 配置的 `root` 路径正确。
|
||
|
||
### 步骤 5：重启 Nginx
|
||
|
||
```bash
|
||
# 测试 Nginx 配置
|
||
sudo nginx -t
|
||
|
||
# 重启 Nginx
|
||
sudo systemctl restart nginx
|
||
# 或
|
||
sudo service nginx restart
|
||
```
|
||
|
||
## 三、环境变量配置（可选）
|
||
|
||
如果需要使用环境变量，可以在 `env` 目录下创建环境变量文件：
|
||
|
||
### 创建 `env/.env.production` 文件：
|
||
|
||
```env
|
||
# 基础路径
|
||
VITE_BASE_PATH=/
|
||
|
||
# 应用端口（开发环境）
|
||
VITE_APP_PORT=5173
|
||
|
||
# 构建模式
|
||
VITE_BUILD=PRD
|
||
|
||
# Mock 服务器（开发环境）
|
||
VITE_MOCK_DEV_SERVER=false
|
||
```
|
||
|
||
## 四、常见问题
|
||
|
||
### Q1: 如何确认当前连接的是哪个服务器？
|
||
|
||
**开发环境**：
|
||
- 查看浏览器开发者工具的 Network 面板
|
||
- 查看请求的实际 URL，开发环境会显示为 `localhost:5173` 开头的地址
|
||
|
||
**生产环境**：
|
||
- 查看浏览器开发者工具的 Network 面板
|
||
- 查看请求的 Response Headers 中的 `X-Forwarded-Host` 或实际请求的域名
|
||
|
||
### Q2: 生产环境如何切换服务器地址？
|
||
|
||
生产环境的服务器地址在 **Nginx 配置**中设置，修改 `proxy_pass` 后面的地址即可：
|
||
|
||
```nginx
|
||
location /dada {
|
||
proxy_pass https://new-production-server.com; # 修改这里
|
||
# ... 其他配置
|
||
}
|
||
```
|
||
|
||
修改后需要：
|
||
1. 测试配置：`sudo nginx -t`
|
||
2. 重新加载：`sudo nginx -s reload` 或重启 Nginx
|
||
|
||
### Q3: 代码中需要修改服务器地址吗？
|
||
|
||
**不需要**。代码中使用的是相对路径（如 `/dada`、`/ai-review/api`），这些路径会通过 Nginx 代理转发到实际的后端服务器。只需要在 Nginx 配置中修改 `proxy_pass` 的目标地址即可。
|
||
|
||
### Q4: 如何同时支持多个环境？
|
||
|
||
可以通过环境变量和 Nginx 配置来实现：
|
||
|
||
1. 在 `vite.config.ts` 中根据环境变量动态设置代理地址
|
||
2. 在 Nginx 配置中使用变量或不同的 server 块来区分环境
|
||
|
||
## 五、总结
|
||
|
||
1. **开发环境**：服务器地址在 `vite.config.ts` 的代理配置中（第 26、32、38、45 行）
|
||
2. **生产环境**：服务器地址在 **Nginx 配置**的 `proxy_pass` 中设置
|
||
3. **代码中**：使用相对路径，无需修改代码即可切换服务器
|
||
4. **部署流程**：构建 → 上传静态文件 → 配置 Nginx → 重启服务
|