root 是拼接路径，alias 是路径替换；配置 location /static/ 时误用 root 会导致 404；gzip 和缓存需按文件类型差异化设置；正则 location 应精简避免性能损耗；跨域静态资源需补全 MIME 类型与 CORS 头。

location 匹配静态资源路径时，root 和 alias 的区别必须分清

很多人配置完 location /static/ 却发现 404，根本原因是把 root 和 alias 当成等价写法用了。它们行为完全不同：

• root 是拼接路径：请求 /static/js/app.js → 实际查找 /var/www/html/static/js/app.js
• alias 是路径替换：请求 /static/js/app.js → 实际查找 /var/www/assets/js/app.js（前提是 alias /var/www/assets/;）

典型错误写法：

location /static/ {
    root /var/www/assets;
}

启用 gzip 压缩和缓存头，但别盲目加 expires

静态资源开启压缩和缓存能显著降低带宽消耗，但 expires 的值不能一概设为 1y。浏览器强缓存后，若文件内容更新但文件名没变，用户就看不到新版本。

• 对带哈希指纹的文件（如 main.a1b2c3.js），可放心用 expires 1y;
• 对无版本号的通用文件（如 logo.png、style.css），建议用 expires 1h; 或配合 ETag + If-None-Match
• 务必同时设置 gzip on; 和 gzip_types，否则 JS/CSS/JSON 等文本资源不会被压缩

示例：

gzip on;
gzip_types text/plain text/css application/javascript application/json;
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1h;
    add_header Cache-Control "public, immutable";
}

避免 location 正则过度匹配导致性能下降

用 ~* 匹配所有静态后缀看似方便，但每次请求都要遍历正则表，尤其当有多个 location ~ 块时，Nginx 会按顺序逐个尝试，开销明显。

• 优先使用前缀匹配：location /images/ { ... } 比 location ~* \.png$ 更快
• 如果必须用正则，把高频后缀（如 .js、.css）放在前面，低频（如 .webp）放后面
• 避免在 server 级别写大量 location ~，应归并到统一块中处理

更合理的写法：

location ^~ /static/ {
    root /var/www/dist;
    expires 1y;
}
location ~* \.(js|css|json|txt)$ {
    add_header Content-Type text/plain;
}

跨域资源（如字体、WebAssembly）需显式允许 CORS

现代前端常加载 .woff2、.wasm 等资源，浏览器默认禁止跨域读取这些二进制类型，即使同域部署也可能因 MIME 类型或预检失败报错。

• 仅靠 add_header Access-Control-Allow-Origin "*"; 不够 —— 对 font 和 wasm，还需 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods
• Nginx 默认不给 .woff2 设置正确 Content-Type，要手动补全 types 块
• 注意：CORS 头不能出现在 304 响应中，所以搭配 expires 时要小心缓存逻辑

最小可行配置：

types {
    font/woff2 woff2;
    application/wasm wasm;
}
location ~* \.(woff2|wasm|ttf|eot)$ {
    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Allow-Methods "GET";
}

最易被忽略的是：静态资源路径配置后，没验证 try_files 是否干扰了真实文件查找；还有就是本地开发用 Webpack DevServer 代理时，Nginx 的 location 规则在生产环境可能因大小写、尾部斜杠、编码差异而失效。