我是前端，我来总结一下前端配 Nginx 的一些案例

前端自己本地是配置不到 Nginx 的，需要有服务器权限（一般是运维 / 后端部署同学来搞）。但是现在是什么时代，现在是一个人即一个公司的年代，是什么时代，反正不是以前那种只会一个小流程的时代。

所以很有必要，前端也要知道怎么配 Nginx，不配也要知道一下，要不然觉得好像自己做的很简单，觉得别人做得很复杂，产生那种前端低人一等的心态。

前端上线部署环境（生产）

当你要把前端项目部署到服务器上，才会用到 Nginx 来做静态资源的托管。

常见的步骤是：

你运行 npm run build → 生成 dist/ 或 build/ 文件夹。
把 dist/ 上传到服务器（Linux 服务器，比如 /usr/share/nginx/html/）。
服务器上安装并运行 Nginx，让它来提供静态文件访问。
在 Nginx 配置文件 里设置缓存策略（就像我刚才写的 location 配置）。

Nginx 配置文件在哪里？

Linux 服务器上，Nginx 默认配置文件路径：
js 复制代码
```
/etc/nginx/nginx.conf
```

站点配置通常放在：

js 复制代码

/etc/nginx/conf.d/your-site.conf

或者：

js 复制代码

/etc/nginx/sites-enabled/default

1. 静态资源托管

前端打包出来的文件（HTML / CSS / JS / 图片 / 字体）需要一个 Web 服务器来对外提供访问。 👉 Nginx 轻量、高效，性能比 Apache 更强，基本成了部署前端项目的标配。

常见写法：

js 复制代码

location / {
    root /usr/share/nginx/html;
    index index.html;
}

2. History 路由模式支持

前端框架（React / Vue / Angular）用 history 模式时，刷新页面可能会 404。 👉 用 try_files 把所有路由都兜底到 index.html。

js 复制代码

location / {
    try_files $uri $uri/ /index.html;
}

3. 缓存控制

前端性能优化常见手段：

对 静态资源 （css/js/img）设置强缓存（expires 7d;）
对 index.html 禁止强缓存，只用协商缓存（保证新版本能被及时加载）

js 复制代码

server {
    listen 80;
    server_name yourdomain.com;

    root /usr/share/nginx/html;

    location / {
        # 对 index.html 禁止强缓存
        # 每次都会跟服务器确认是否有新版本
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires 0;
        try_files $uri /index.html;
    }

    # 对静态资源设置强缓存（7天）
    location ~* \.(?:js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf)$ {
        expires 7d;
        add_header Cache-Control "public";
    }
}

4. 跨域和反向代理

本地开发常用 devServer 代理，但线上接口也需要。 👉 Nginx 可以：

跨域处理 ：添加 Access-Control-Allow-Origin *
反向代理 ：把 /api 请求转发到后端服务

js 复制代码

location ^~ /api/ {
    proxy_pass http://backend_server;
    add_header Access-Control-Allow-Origin *;
}

5. 负载均衡

当前端请求的接口量很大时，可以让 Nginx 把请求分发到多台后端服务器。 👉 支持 round-robin、ip_hash、weight 等策略。

js 复制代码

upstream backserver {
    server 127.0.0.1:8080 weight=2;
    server 127.0.0.1:9090;
}

6. 灰度发布 / A/B 测试

👉 根据 cookie 或 header 把不同用户分到不同的服务版本（旧版本 / 新版本）。前端常用在灰度测试、实验功能中。

js 复制代码

# 定义两个后端服务
upstream stable {
    server 127.0.0.1:8080;  # 稳定版本服务
}
upstream canary {
    server 127.0.0.1:9090;  # 灰度版本服务
}

server {
    listen 80;
    server_name mysite.com;

    # 默认走稳定版本
    set $group "stable";

    # 如果 cookie 中有 tts_version_id=canary，就走灰度服务
    if ($http_cookie ~* "tts_version_id=canary") {
        set $group canary;
    }

    location / {
        proxy_pass http://$group;   # 根据变量选择后端
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

7. 优雅降级

👉 如果 SSR 服务挂了，可以自动切回 CSR（纯前端渲染）。保证页面至少能用。

如果 SSR（服务端渲染）服务报错 ，就降级到 CSR（前端渲染）静态页面。

js 复制代码

# 定义两个服务：SSR（可能挂）、CSR（兜底）
upstream ssr {
    server 127.0.0.1:8080;
}
upstream csr {
    server 127.0.0.1:9090;
}

server {
    listen 80;
    server_name mysite.com;

    location ^~ /ssr/ {
        proxy_pass http://ssr;   # 默认先走 SSR 服务

        # 开启错误拦截
        proxy_intercept_errors on;

        # 如果 SSR 返回 500 系列错误，就走 @csr_location
        error_page 500 502 503 504 = @csr_location;
    }

    # 兜底 CSR
    location @csr_location {
        rewrite ^/ssr/(.*)$ /$1 break;  # 去掉 /ssr/ 前缀
        proxy_pass http://csr;
    }
}

8. 图片处理 / 格式兼容

👉 自动判断浏览器是否支持 WebP，不支持就降级为 PNG。这是前端性能优化的常见 trick。

js 复制代码

http {
  # 变量映射：判断浏览器 Accept 是否包含 webp
  map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";   # 如果支持 webp，就加上后缀
  }

  upstream static_env {
    server 127.0.0.1:8080;  # 静态资源服务器
  }

  server {
    listen 80;
    server_name mysite.com;

    # 图片请求处理
    location ~* \.(png|jpe?g)$ {
      if ($webp_suffix ~* webp) {
        # 浏览器支持 webp，就尝试访问 webp 图片
        rewrite ^/(.*)\.(png|jpe?g)$ /$1.webp break;
        # 如果 webp 文件不存在（返回 404），就降级为原图
        error_page 404 = @static_img;
      }

      proxy_intercept_errors on;
      add_header Vary Accept;  # 告诉缓存系统：不同 Accept 结果不一样
      proxy_pass http://static_env;
      expires 7d;   # 缓存 7 天
    }

    # 找不到 webp 时，回退到原始图片
    location @static_img {
      rewrite ^/.+$ $request_uri break;
      proxy_pass http://static_env;
      expires 7d;
    }
  }
}

🎯 总结一句话

前端用 Nginx 不是写页面逻辑，而是用它来做：

部署静态资源
路由兜底
缓存策略
跨域代理
负载均衡 / 灰度 / 降级
资源优化（gzip / webp）

说白了：Nginx 是前端上线后"保驾护航"的运维利器。

我是前端，我来总结一下前端 配 Nginx 的一些案例

1. 静态资源托管

2. History 路由模式支持

3. 缓存控制

4. 跨域和反向代理

5. 负载均衡

6. 灰度发布 / A/B 测试

7. 优雅降级

8. 图片处理 / 格式兼容

🎯 总结一句话

我是前端，我来总结一下前端配 Nginx 的一些案例