Nginx 前端项目部署指南

作为IT工程师，我将详细介绍如何使用Nginx部署前端项目的完整流程。

基本部署步骤

1. 准备前端项目

# 构建生产环境代码（以React/Vue为例）
npm run build
# 或
yarn build

这会生成dist或build目录，包含静态资源文件。

2. 安装Nginx

# Ubuntu/Debian
sudo apt update
sudo apt install nginx

# CentOS/RHEL
sudo yum install epel-release
sudo yum install nginx

# MacOS
brew install nginx

3. 配置Nginx

编辑配置文件（通常位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/default）：

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名或IP

    root /path/to/your/project/dist;  # 指向构建后的目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 支持前端路由
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

4. 启动/重载Nginx

# 测试配置是否正确
sudo nginx -t

# 启动Nginx
sudo systemctl start nginx

# 重载配置（修改后）
sudo systemctl reload nginx

# 设置开机启动
sudo systemctl enable nginx

高级配置选项

1. HTTPS配置（使用Let's Encrypt）

# 安装Certbot
sudo apt install certbot python3-certbot-nginx

# 获取证书
sudo certbot --nginx -d yourdomain.com

2. 负载均衡（多实例）

upstream frontend_servers {
    server 127.0.0.1:8001;
    server 127.0.0.1:8002;
    server 127.0.0.1:8003;
}

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://frontend_servers;
    }
}

3. 代理API请求

location /api/ {
    proxy_pass http://api_server:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

4. Gzip压缩

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;
gzip_proxied any;

常见问题解决

1. 403 Forbidden错误

   • 检查Nginx用户是否有项目目录的读取权限
   • 确保index文件存在且命名正确

2. 路由刷新404

   • 确保配置中包含try_files $uri $uri/ /index.html;

3. 静态资源加载失败

   • 检查路径是否正确（构建后的路径可能改变）
   • 确保Nginx配置了正确的MIME类型

4. 性能优化

   • 启用HTTP/2: listen 443 ssl http2;
   • 配置浏览器缓存头
   • 启用Brotli压缩（需要额外模块）

最佳实践

1. 使用Docker容器化部署
2. 配置日志轮转
3. 设置适当的文件权限
4. 监控Nginx性能指标
5. 定期更新Nginx版本

如需更具体的配置或遇到特殊问题，可以提供更多细节，我可以给出更有针对性的建议。