Kaynağa Gözat

feat(api): 根据环境自动切换API基础地址

docs: 更新部署文档,添加详细的生产环境部署说明

更新API服务配置,使其能根据NODE_ENV自动切换开发和生产环境的API地址。同时完善部署文档,添加服务器配置、Nginx示例和常见问题解决方案。
max_liu 2 hafta önce
ebeveyn
işleme
298bbb9e9a
2 değiştirilmiş dosya ile 104 ekleme ve 5 silme
  1. 4 1
      src/services/api.js
  2. 100 4
      运行和打包说明.md

+ 4 - 1
src/services/api.js

@@ -1,6 +1,9 @@
 import axios from 'axios';
 
-const API_BASE_URL = 'http://localhost:3001/api';
+// 根据环境自动切换API地址
+const API_BASE_URL = process.env.NODE_ENV === 'production' 
+  ? '/api'  // 生产环境使用相对路径,通过Nginx代理
+  : 'http://localhost:3001/api';  // 开发环境使用本地地址
 
 const api = axios.create({
   baseURL: API_BASE_URL,

+ 100 - 4
运行和打包说明.md

@@ -88,26 +88,122 @@ npm run dev
 
 ## 生产环境部署
 
+### ⚠️ 重要说明
+
+本项目是**前后端分离**架构,需要同时部署前端静态文件和后端API服务。仅上传 `build` 文件夹无法正常工作,因为前端需要调用后端API接口。
+
 ### 1. 构建前端项目
 
 ```bash
 # 在项目根目录下
+yarn build
+# 或者
 npm run build
 ```
 
 构建完成后,会在项目根目录生成 `build` 文件夹,包含所有静态资源。
 
-### 2. 部署后端服务
+### 2. 服务器部署方案
+
+#### 方案一:单服务器部署(推荐)
 
+**步骤 1:准备部署文件**
 ```bash
-# 在 server 目录下
+# 需要上传到服务器的文件:
+- build/          # 前端构建文件
+- server/         # 完整的后端服务目录
+```
+
+**步骤 2:部署后端服务**
+```bash
+# 在服务器上进入 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
 ```
 
-### 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:数据库连接失败
+**原因**: 服务器无法访问数据库
+**解决**: 检查网络连接和数据库配置
 
 ## 项目配置说明