前端必备 Nginx 实战指南 8 个核心场景直接抄

现在前端开发早就不是只写页面了部署上线相关的 Nginx 配置也得懂不然遇到问题只能等别人帮忙。其实 Nginx 对前端来说核心就是解决部署路由缓存跨域这些问题下面 8 个实战场景配置直接能用。

先搞懂基础部署流程

1 本地运行 npm run build 生成 dist 或 build 文件夹2 把文件夹上传到 Linux 服务器常见路径是 /usr/share/nginx/html3 配置 Nginx 文件让服务器能访问静态资源4 启动 Nginx 完成部署

Nginx 配置文件常见路径

主配置文件 /etc/nginx/nginx.conf
站点配置 /etc/nginx/conf.d/your-site.conf 或 /etc/nginx/sites-enabled/default

8 个核心配置场景

1 静态资源托管前端打包后的 HTML CSS JS 图片等都靠 Nginx 提供访问这是最基础的配置。

ini 复制代码

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

2 History 路由兜底React Vue 用 History 模式时刷新页面会 404 用 try_files 把所有路由指向 index.html 就行。

bash 复制代码

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

3 缓存策略优化静态资源设强缓存 7 天内不用重复下载 index.html 禁用强缓存保证更新能及时生效。

ini 复制代码

server {
    listen 80;
    server_name yourdomain.com;
    root /usr/share/nginx/html;

    location / {
        add_header Cache-Control no-cache no-store must-revalidate;
        add_header Pragma no-cache;
        add_header Expires 0;
        try_files $uri /index.html;
    }

    location ~* .(?:js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf)$ {
        expires 7d;
        add_header Cache-Control public;
    }
}

4 跨域与反向代理线上接口跨域或者需要转发请求到后端用这个配置不用前端额外处理。

javascript 复制代码

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

5 负载均衡接口请求量大时把请求分发到多台后端服务器支持权重 ip_hash 等策略。

ini 复制代码

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

6 灰度发布与 A/B 测试根据 cookie 把用户分到不同版本适合功能测试或灰度上线。

ini 复制代码

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;

    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 静态页面保证用户能正常访问。

ini 复制代码

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;
        proxy_intercept_errors on;
        error_page 500 502 503 504 = @csr_location;
    }

    location @csr_location {
        rewrite ^/ssr/(.*)$ /$1 break;
        proxy_pass http://csr;
    }
}

8 图片格式自动兼容浏览器支持 WebP 就返回 WebP 格式不支持就降级为 PNG 或 JPG 提升加载性能。

ini 复制代码

http {
    map $http_accept $webp_suffix {
        default   "";
        ~*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) {
                rewrite ^/(.*).(png|jpe?g)$ /$1.webp break;
                error_page 404 = @static_img;
            }

            proxy_intercept_errors on;
            add_header Vary Accept;
            proxy_pass http://static_env;
            expires 7d;
        }

        location @static_img {
            rewrite ^/.+$ $request_uri break;
            proxy_pass http://static_env;
            expires 7d;
        }
    }
}

其实前端用 Nginx 不用搞复杂的核心就是解决部署后的各种问题比如资源访问路由兼容性能优化这些。上面的配置直接抄过去改改路径和域名就能用掌握这些部署上线再也不用等别人帮忙了。

海云前端丨前端开发丨简历面试辅导丨求职陪跑