nginx配置示例

 location /RedeMap {
          alias /opt/kun;
          index index.html;
          try_files $uri $uri/ /RedeMap/index.html;

          #root /opt/kun;
          #index index.html;
        }

按下面两种url访问都能成功：

https://****/RedeMap/

https://****/RedeMap/#/home

==========

原文链接：https://juejin.cn/post/7547136972324110377

Nginx 配置文件在哪里？

Linux 服务器上，Nginx 默认配置文件路径：

js

体验AI代码助手

代码解读

复制代码
```
/etc/nginx/nginx.conf
```
站点配置通常放在：

js

体验AI代码助手

代码解读

复制代码
```
/etc/nginx/conf.d/your-site.conf
```
或者：

js

体验AI代码助手

代码解读

复制代码
```
/etc/nginx/sites-enabled/default
```

1. 静态资源托管

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

常见写法：

 
js
体验AI代码助手
代码解读
复制代码

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

2. History 路由模式支持

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

 
js
体验AI代码助手
代码解读
复制代码

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

3. 缓存控制

前端性能优化常见手段：

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

 
js
体验AI代码助手
代码解读
复制代码

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
体验AI代码助手
代码解读
复制代码

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

5. 负载均衡

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

 
js
体验AI代码助手
代码解读
复制代码

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

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

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

 
js
体验AI代码助手
代码解读
复制代码

# 定义两个后端服务
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
体验AI代码助手
代码解读
复制代码

# 定义两个服务：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
体验AI代码助手
代码解读
复制代码

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;
    }
  }
}

作者：龙在天
链接：https://juejin.cn/post/7547136972324110377
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

posted on 2025-09-11 13:40 我和你并没有不同阅读(36) 评论(0) 收藏举报

刷新页面返回顶部

我和你并没有不同