Nginx配置实战：静态网站部署与性能优化

1. 静态网站秒级部署实战

对于前端开发者而言，Vue/React等框架打包后的dist目录部署是个高频需求。传统方式往往需要配置复杂的Web服务器，而Nginx仅需10行配置即可完美支持单页应用(SPA)。核心在于理解root指令与try_files的配合机制：

nginx复制server {
    listen 80;
    server_name www.example.com;
    root /data/www/dist;  # 物理路径映射
    index index.html;     # 默认入口文件

    location / {
        try_files $uri $uri/ /index.html;  # 路由回退逻辑
    }
}

1.1 关键参数解析

• root：将域名根路径映射到服务器上的绝对路径。注意生产环境建议使用/data等非用户目录，避免权限问题
• try_files：按顺序尝试访问文件，其工作流程为：
  1. 检查$uri是否存在（如/about路由对应的/about.html）
  2. 检查$uri/目录是否存在（传统多页模式）
  3. 全部失败时返回/index.html交由前端路由处理

踩坑提示：若遇到403 forbidden错误，请执行chmod -R 755 /data/www/dist确保Nginx工作进程(通常为www-data用户)有读取权限

1.2 性能优化技巧

添加以下配置可显著提升静态资源加载速度：

nginx复制location / {
    try_files $uri $uri/ /index.html;
    # 启用gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript;
    # 预压缩版本优先
    gzip_static on;
}

实测数据：对Vue打包的js文件，gzip可使传输体积减少70%。更推荐在构建阶段使用compression-webpack-plugin生成预压缩的.gz文件，节省服务器CPU开销。

2. 反向代理的工业级配置

现代Web架构中，前后端分离部署已成标配。以下配置实现将/api请求转发到后端服务，同时保留原始请求信息：

nginx复制location /api/ {
    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_pass http://192.168.1.10:8080/;  # 注意结尾斜杠
}

2.1 代理行为深度解析

• 斜杠陷阱：proxy_pass结尾的斜杠会替换匹配的路径前缀。例如：
  • /api/user → http://backend/ + user = http://backend/user
  • 若无斜杠：http://backend + /api/user = `http://backen