hzdyjs/docs/部署文档/nginx配置/nginx部署说明.md

Nginx部署说明 - hzdyjsweb.camasort.com

📋 部署步骤

1. 上传nginx配置文件

将 hzdyjsweb.camasort.com.conf 文件上传到服务器的nginx配置目录：

# 方法1：放到sites-available目录（推荐）
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/sites-available/

# 创建软链接到sites-enabled
sudo ln -s /etc/nginx/sites-available/hzdyjsweb.camasort.com.conf /etc/nginx/sites-enabled/

# 方法2：直接放到conf.d目录
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/conf.d/

2. 创建网站目录

# 创建目录
sudo mkdir -p /root/hzdyjsweb9091/dist

# 设置目录权限
sudo chown -R www-data:www-data /root/hzdyjsweb9091/dist
sudo chmod -R 755 /root/hzdyjsweb9091/dist

3. 上传构建产物

将前端构建产物（web/dist/目录下的所有文件）上传到 /root/hzdyjsweb9091/dist/：

# 如果使用scp上传
scp -r ./web/dist/* root@your-server:/root/hzdyjsweb9091/dist/

# 或者使用rsync
rsync -avz ./web/dist/ root@your-server:/root/hzdyjsweb9091/dist/

4. 创建日志目录

# 确保日志目录存在
sudo mkdir -p /var/log/nginx
sudo touch /var/log/nginx/hzdyjsweb.camasort.com.access.log
sudo touch /var/log/nginx/hzdyjsweb.camasort.com.error.log
sudo chown www-data:www-data /var/log/nginx/hzdyjsweb.camasort.com.*

5. 测试nginx配置

# 测试nginx配置语法
sudo nginx -t

# 如果配置正确，应该看到：
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

6. 重载nginx配置

# 重载nginx配置（推荐）
sudo nginx -s reload

# 或者重启nginx服务
sudo systemctl restart nginx

# 检查nginx状态
sudo systemctl status nginx

7. 配置域名解析

在你的域名服务商处，将 hzdyjsweb.camasort.com 解析到服务器IP地址：

A记录: hzdyjsweb.camasort.com -> 你的服务器IP

🔧 常用nginx管理命令

# 检查nginx配置
sudo nginx -t

# 重载配置（不中断服务）
sudo nginx -s reload

# 重启nginx
sudo systemctl restart nginx

# 查看nginx状态
sudo systemctl status nginx

# 查看nginx错误日志
sudo tail -f /var/log/nginx/error.log

# 查看网站访问日志
sudo tail -f /var/log/nginx/hzdyjsweb.camasort.com.access.log

# 查看网站错误日志
sudo tail -f /var/log/nginx/hzdyjsweb.camasort.com.error.log

🚨 故障排除

1. 403 Forbidden错误

# 检查文件权限
ls -la /root/hzdyjsweb9091/dist/

# 设置正确权限
sudo chown -R www-data:www-data /root/hzdyjsweb9091/dist/
sudo chmod -R 755 /root/hzdyjsweb9091/dist/

2. 502 Bad Gateway错误

• 检查nginx配置语法
• 确保网站目录存在且有正确权限
• 查看nginx错误日志

3. 域名无法访问

• 确认域名DNS解析正确
• 检查服务器防火墙设置
• 确认nginx正在运行

4. 页面刷新404错误

• 确认 try_files $uri $uri/ /index.html; 配置正确
• 检查是否有其他location规则冲突

📝 配置说明

主要功能特性：

1. Vue Router支持: 配置了 try_files 支持SPA路由
2. 静态资源缓存: JS/CSS等静态资源缓存1年
3. Gzip压缩: 启用gzip压缩减少传输大小
4. 安全头: 添加了基本的安全响应头
5. 日志记录: 独立的访问和错误日志
6. 文件上传: 支持最大50M文件上传

可选配置：

• API代理: 如果需要避免CORS问题，可以取消注释API代理配置
• HTTPS: 已预留HTTPS配置，需要SSL证书时可启用

✅ 验证部署

部署完成后，访问以下URL验证：

1. 主页: http://hzdyjsweb.camasort.com
2. 任意路由: http://hzdyjsweb.camasort.com/system/user
3. 静态资源: 检查CSS/JS文件是否正常加载

如果一切正常，你应该能看到完整的前端应用界面！