160 lines
3.8 KiB
Markdown
160 lines
3.8 KiB
Markdown
# Nginx部署说明 - hzdyjsweb.camasort.com
|
||
|
||
## 📋 部署步骤
|
||
|
||
### 1. 上传nginx配置文件
|
||
|
||
将 `hzdyjsweb.camasort.com.conf` 文件上传到服务器的nginx配置目录：
|
||
|
||
```bash
|
||
# 方法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. 创建网站目录
|
||
|
||
```bash
|
||
# 创建目录
|
||
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/`：
|
||
|
||
```bash
|
||
# 如果使用scp上传
|
||
scp -r ./web/dist/* root@your-server:/root/hzdyjsweb9091/dist/
|
||
|
||
# 或者使用rsync
|
||
rsync -avz ./web/dist/ root@your-server:/root/hzdyjsweb9091/dist/
|
||
```
|
||
|
||
### 4. 创建日志目录
|
||
|
||
```bash
|
||
# 确保日志目录存在
|
||
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配置
|
||
|
||
```bash
|
||
# 测试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配置
|
||
|
||
```bash
|
||
# 重载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管理命令
|
||
|
||
```bash
|
||
# 检查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错误
|
||
```bash
|
||
# 检查文件权限
|
||
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文件是否正常加载
|
||
|
||
如果一切正常，你应该能看到完整的前端应用界面！ |