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. 查看服务器错误日志 |