jurong_circle_black/DEPLOYMENT.md

部署说明

问题解决

文件上传问题修复

之前程序部署到线上环境后无法上传文件的问题已经修复。主要修改包括：

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. 前端构建

cd frontend
npm run build

2. 后端部署

确保服务器上有以下目录结构：

/
├── server.js
├── routes/
├── middleware/
├── uploads/          # 文件上传目录
├── frontend/dist/    # 前端构建文件
└── admin/dist/       # 管理后台构建文件

3. 环境变量配置

在生产环境中，确保以下环境变量正确设置：

# 数据库配置
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 目录有正确的读写权限：

chmod 755 uploads
chown -R www-data:www-data uploads  # 根据你的服务器用户调整

5. 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 进程：

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