|
@@ -88,26 +88,122 @@ npm run dev
|
|
|
|
|
|
## 生产环境部署
|
|
## 生产环境部署
|
|
|
|
|
|
|
|
+### ⚠️ 重要说明
|
|
|
|
+
|
|
|
|
+本项目是**前后端分离**架构,需要同时部署前端静态文件和后端API服务。仅上传 `build` 文件夹无法正常工作,因为前端需要调用后端API接口。
|
|
|
|
+
|
|
### 1. 构建前端项目
|
|
### 1. 构建前端项目
|
|
|
|
|
|
```bash
|
|
```bash
|
|
# 在项目根目录下
|
|
# 在项目根目录下
|
|
|
|
+yarn build
|
|
|
|
+# 或者
|
|
npm run build
|
|
npm run build
|
|
```
|
|
```
|
|
|
|
|
|
构建完成后,会在项目根目录生成 `build` 文件夹,包含所有静态资源。
|
|
构建完成后,会在项目根目录生成 `build` 文件夹,包含所有静态资源。
|
|
|
|
|
|
-### 2. 部署后端服务
|
|
|
|
|
|
+### 2. 服务器部署方案
|
|
|
|
+
|
|
|
|
+#### 方案一:单服务器部署(推荐)
|
|
|
|
|
|
|
|
+**步骤 1:准备部署文件**
|
|
```bash
|
|
```bash
|
|
-# 在 server 目录下
|
|
|
|
|
|
+# 需要上传到服务器的文件:
|
|
|
|
+- build/ # 前端构建文件
|
|
|
|
+- server/ # 完整的后端服务目录
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+**步骤 2:部署后端服务**
|
|
|
|
+```bash
|
|
|
|
+# 在服务器上进入 server 目录
|
|
cd server
|
|
cd server
|
|
|
|
+
|
|
|
|
+# 安装生产环境依赖
|
|
|
|
+npm install --production
|
|
|
|
+
|
|
|
|
+# 使用 PM2 启动服务(推荐)
|
|
|
|
+npm install -g pm2
|
|
|
|
+pm2 start server.js --name "tools-auto-server"
|
|
|
|
+pm2 save
|
|
|
|
+pm2 startup
|
|
|
|
+
|
|
|
|
+# 或者直接启动
|
|
npm start
|
|
npm start
|
|
```
|
|
```
|
|
|
|
|
|
-### 3. 部署前端静态文件
|
|
|
|
|
|
+**步骤 3:配置 Web 服务器(Nginx 示例)**
|
|
|
|
+```nginx
|
|
|
|
+server {
|
|
|
|
+ listen 80;
|
|
|
|
+ server_name your-domain.com;
|
|
|
|
+
|
|
|
|
+ # 前端静态文件
|
|
|
|
+ location / {
|
|
|
|
+ root /path/to/build;
|
|
|
|
+ try_files $uri $uri/ /index.html;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ # 后端API代理
|
|
|
|
+ location /api/ {
|
|
|
|
+ proxy_pass http://localhost:3001;
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+#### 方案二:分离部署
|
|
|
|
+
|
|
|
|
+**前端部署**
|
|
|
|
+- 将 `build` 文件夹部署到 CDN 或静态托管服务
|
|
|
|
+- 配置环境变量指向后端API地址
|
|
|
|
+
|
|
|
|
+**后端部署**
|
|
|
|
+- 将 `server` 目录部署到云服务器
|
|
|
|
+- 配置 CORS 允许前端域名访问
|
|
|
|
+- 确保数据库连接正常
|
|
|
|
+
|
|
|
|
+### 3. 环境配置
|
|
|
|
+
|
|
|
|
+#### API 地址配置
|
|
|
|
+项目已配置自动环境切换:
|
|
|
|
+- **开发环境**: `http://localhost:3001/api`
|
|
|
|
+- **生产环境**: `/api` (通过 Nginx 代理)
|
|
|
|
+
|
|
|
|
+#### 数据库配置
|
|
|
|
+确保服务器可以访问数据库:
|
|
|
|
+```javascript
|
|
|
|
+// server/config/database.js
|
|
|
|
+host: 'rm-t4na9qj85v7790tf84o.mysql.singapore.rds.aliyuncs.com'
|
|
|
|
+port: 3306
|
|
|
|
+// ... 其他配置
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+### 4. 部署检查清单
|
|
|
|
+
|
|
|
|
+- [ ] 后端服务正常启动(端口 3001)
|
|
|
|
+- [ ] 数据库连接正常
|
|
|
|
+- [ ] Nginx 配置正确,API 代理生效
|
|
|
|
+- [ ] 前端静态文件部署完成
|
|
|
|
+- [ ] 浏览器可以正常访问页面
|
|
|
|
+- [ ] API 请求正常响应
|
|
|
|
+
|
|
|
|
+### 5. 常见部署问题
|
|
|
|
+
|
|
|
|
+#### 问题 1:API 请求失败
|
|
|
|
+**原因**: 只部署了前端 `build` 文件夹,没有启动后端服务
|
|
|
|
+**解决**: 按照上述步骤部署后端服务
|
|
|
|
+
|
|
|
|
+#### 问题 2:CORS 错误
|
|
|
|
+**原因**: 前后端域名不同,跨域配置问题
|
|
|
|
+**解决**: 在后端添加 CORS 配置或使用 Nginx 代理
|
|
|
|
|
|
-将 `build` 文件夹中的内容部署到 Web 服务器(如 Nginx、Apache)或 CDN。
|
|
|
|
|
|
+#### 问题 3:数据库连接失败
|
|
|
|
+**原因**: 服务器无法访问数据库
|
|
|
|
+**解决**: 检查网络连接和数据库配置
|
|
|
|
|
|
## 项目配置说明
|
|
## 项目配置说明
|
|
|
|
|