146 lines
3.2 KiB
Markdown
146 lines
3.2 KiB
Markdown
|
# 部署说明
|
|||
|
|
|
|||
|
|
## 问题解决
|
|||
|
|
|
|||
|
|
### 文件上传问题修复
|
|||
|
|
|
|||
|
|
之前程序部署到线上环境后无法上传文件的问题已经修复。主要修改包括：
|
|||
|
|
|
|||
|
|
1. **移除硬编码地址**：将前端代码中硬编码的 `http://localhost:3000` 地址替换为动态配置
|
|||
|
|
2. **环境配置**：创建了环境配置文件来管理不同环境的API地址
|
|||
|
|
3. **统一图片处理**：统一了图片URL的处理逻辑
|
|||
|
|
|
|||
|
|
### 修改的文件
|
|||
|
|
|
|||
|
|
- `frontend/src/config/index.js` - 新增环境配置文件
|
|||
|
|
- `frontend/.env.development` - 开发环境配置
|
|||
|
|
- `frontend/.env.production` - 生产环境配置
|
|||
|
|
- `frontend/src/views/Transfers.vue` - 转账页面
|
|||
|
|
- `frontend/src/views/Profile.vue` - 个人资料页面
|
|||
|
|
- `frontend/src/views/Matching.vue` - 匹配页面
|
|||
|
|
|
|||
|
|
## 部署步骤
|
|||
|
|
|
|||
|
|
### 1. 前端构建
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd frontend
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 后端部署
|
|||
|
|
|
|||
|
|
确保服务器上有以下目录结构：
|
|||
|
|
```
|
|||
|
|
/
|
|||
|
|
├── server.js
|
|||
|
|
├── routes/
|
|||
|
|
├── middleware/
|
|||
|
|
├── uploads/ # 文件上传目录
|
|||
|
|
├── frontend/dist/ # 前端构建文件
|
|||
|
|
└── admin/dist/ # 管理后台构建文件
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 环境变量配置
|
|||
|
|
|
|||
|
|
在生产环境中，确保以下环境变量正确设置：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 数据库配置
|
|||
|
|
DB_HOST=your_db_host
|
|||
|
|
DB_USER=your_db_user
|
|||
|
|
DB_PASSWORD=your_db_password
|
|||
|
|
DB_NAME=your_db_name
|
|||
|
|
|
|||
|
|
# 服务器配置
|
|||
|
|
PORT=3000
|
|||
|
|
NODE_ENV=production
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 文件权限
|
|||
|
|
|
|||
|
|
确保 `uploads` 目录有正确的读写权限：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
chmod 755 uploads
|
|||
|
|
chown -R www-data:www-data uploads # 根据你的服务器用户调整
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. Nginx 配置（推荐）
|
|||
|
|
|
|||
|
|
如果使用 Nginx 作为反向代理，配置示例：
|
|||
|
|
|
|||
|
|
```nginx
|
|||
|
|
server {
|
|||
|
|
listen 80;
|
|||
|
|
server_name your-domain.com;
|
|||
|
|
|
|||
|
|
# 静态文件
|
|||
|
|
location /uploads/ {
|
|||
|
|
alias /path/to/your/app/uploads/;
|
|||
|
|
expires 1d;
|
|||
|
|
add_header Cache-Control "public, immutable";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
# API 请求
|
|||
|
|
location /api/ {
|
|||
|
|
proxy_pass http://localhost:3000;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
# 前端应用
|
|||
|
|
location / {
|
|||
|
|
proxy_pass http://localhost:3000;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 6. PM2 部署（推荐）
|
|||
|
|
|
|||
|
|
使用 PM2 管理 Node.js 进程：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 安装 PM2
|
|||
|
|
npm install -g pm2
|
|||
|
|
|
|||
|
|
# 启动应用
|
|||
|
|
pm2 start server.js --name "your-app"
|
|||
|
|
|
|||
|
|
# 设置开机自启
|
|||
|
|
pm2 startup
|
|||
|
|
pm2 save
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 验证部署
|
|||
|
|
|
|||
|
|
1. 访问网站确保页面正常加载
|
|||
|
|
2. 测试用户注册/登录功能
|
|||
|
|
3. 测试文件上传功能（头像、收款码、转账凭证等）
|
|||
|
|
4. 检查浏览器控制台是否有错误
|
|||
|
|
|
|||
|
|
## 故障排除
|
|||
|
|
|
|||
|
|
### 文件上传失败
|
|||
|
|
|
|||
|
|
1. 检查 `uploads` 目录权限
|
|||
|
|
2. 检查服务器磁盘空间
|
|||
|
|
3. 查看服务器日志：`pm2 logs your-app`
|
|||
|
|
|
|||
|
|
### 图片显示不正常
|
|||
|
|
|
|||
|
|
1. 检查 Nginx 静态文件配置
|
|||
|
|
2. 确认图片文件存在于 `uploads` 目录
|
|||
|
|
3. 检查图片URL是否正确
|
|||
|
|
|
|||
|
|
### API 请求失败
|
|||
|
|
|
|||
|
|
1. 检查服务器是否正常运行
|
|||
|
|
2. 检查数据库连接
|
|||
|
|
3. 查看服务器错误日志
|