🔥 “你部署的前端项目，99%都在裸奔！”

别再把 dist 文件夹扔上去就叫“上线”了。
没配 Nginx 的前端，不配谈生产环境。

一、你以为的“部署成功”，其实是“事故倒计时”

你是不是也经历过这些“经典时刻”？

• 用户刷新页面，直接 404 白屏
• 静态资源加载慢得像蜗牛，Lighthouse 打分 30 分
• 接口调不通，控制台满屏 CORS error
• 老板问“怎么还打不开”，你只能回“再等等”

然后你甩锅给运维？
不好意思，这是你前端自己的锅。

现代前端，早已不是“切完图扔给后端”那么简单。
你不学 Nginx，就等于把项目的命脉交给别人。

一个连 try_files 都不会写的前端，
和只会 console.log("hello") 的实习生有什么区别？

二、Nginx 不是运维专属，是前端的“护城河”

别再迷信什么“我只管业务代码”了。
真正的高级前端，必须懂部署。

为什么？

✅ 静态资源？Nginx 是王者

• Node.js 静态服务？性能差、资源占得多
• Nginx？C 语言写的，扛并发、吃内存少，天生为静态服务而生

✅ SPA 路由？Nginx 救你狗命

Vue Router 的 history 模式一刷新就 404？
React Router 同理？

一行配置解决：

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

这行代码，就是你前端路由的“复活甲”。

✅ 跨域？别再求后端加 header

后端不配合加 Access-Control-Allow-Origin？
你自己在 Nginx 上加，比求人快 10 倍：

add_header 'Access-Control-Allow-Origin' $http_origin always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

前端自己就能搞定，何必低声下气？

✅ 性能优化？Gzip + 缓存，直接起飞

JS 文件 2MB？
开启 Gzip，压缩到 500KB，加载速度翻倍：

gzip on;
gzip_types text/css application/javascript;

图片/CSS/JS 缓存 30 天，用户第二次访问秒开：

location ~* \.(jpg|css|js)$ {
    expires 30d;
}

这些，都是你前端该操的心。

三、5 分钟上手 Nginx：别再找借口

1. 安装（Ubuntu）

sudo apt update
sudo apt install nginx -y
sudo systemctl start nginx

装完访问 http://你的IP，看到“Welcome to nginx”就成功了。

2. 核心目录

• 配置文件：/etc/nginx/nginx.conf
• 项目配置：/etc/nginx/sites-available/
• 启用配置：软链接到 sites-enabled/
• 静态文件：/var/www/html/（或自定义）

3. 检查 & 重载

# 每次改完配置，必须执行！
sudo nginx -t           # 检查语法
sudo nginx -s reload    # 重新加载（不中断服务）

记住：不 nginx -t 的人，迟早炸服。

四、前端必会的三大实战配置

🎯 场景1：部署 Vue/React 项目（history 模式）

server {
    listen 80;
    server_name yoursite.com;

    root /var/www/my-app/dist;
    index index.html;

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

    location ~* \.(css|js|png|jpg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

关键点：

• root 指向 dist 目录
• try_files 是 SPA 的生命线
• 静态资源加缓存，用户体验直接提升

🎯 场景2：代理 API，彻底告别跨域

前端请求 /api/user，想转发到 https://api.yourservice.com/user：

location /api/ {
    rewrite ^/api/(.*)$ /$1 break;
    proxy_pass https://api.yourservice.com;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

从此，你的前端可以：

• 本地开发用 /api
• 上线后自动代理
• 不用改代码，不用求后端

🎯 场景3：开启 Gzip，让加载快到飞起

在 nginx.conf 的 http { } 块中加入：

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript;

效果：
JS/CSS 体积减少 60%+，Lighthouse 性能分直接 +30。

五、高级玩家都在用的“骚操作”

🔥 HTTP/2 + HTTPS：加载速度翻倍

listen 443 ssl http2;
ssl_certificate /path/to/fullchain.pem;
ssl_certificate_key /path/to/privkey.pem;

HTTP/2 支持多路复用，页面资源并行加载，快得离谱。

🔥 Brotli 压缩（比 Gzip 更狠）

安装 nginx-module-brotli，配置：

brotli on;
brotli_comp_level 6;
brotli_types text/css application/javascript;

压缩率比 Gzip 高 15%-20%，尤其适合现代 JS 框架。

🔥 安全加固：别让黑客轻松进来

add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";

这几行 header，能挡住 80% 的基础攻击。

🔥 负载均衡：前端也能玩后端架构

upstream backend {
    server api1.com:3000 weight=2;
    server api2.com:3000;
}

location /api/ {
    proxy_pass http://backend;
}

高并发场景下，这才是真正的“高可用”。

六、完整实战：一个电商前端的部署全流程

# /etc/nginx/sites-available/ecommerce
server {
    listen 80;
    server_name shop.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name shop.com;

    ssl_certificate /etc/letsencrypt/live/shop.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/shop.com/privkey.pem;

    root /var/www/ecommerce/dist;
    index index.html;

    gzip on;
    gzip_types text/css application/javascript;

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

    location ~* \.(css|js|png|svg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    location /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass https://api.shop.com;

        add_header 'Access-Control-Allow-Origin' $http_origin always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    }

    # 禁止访问 .env 和 .git
    location ~ /\.(env|git) {
        deny all;
        return 404;
    }
}

这套配置，已经覆盖：

• HTTPS 强制跳转
• SPA 路由支持
• 静态资源缓存
• API 代理 + 跨域
• 安全防护
• 错误页面处理

这才是真正的“生产级部署”。

七、新手必踩的坑，我替你踩过了

❌ 配置改了不生效？

• 忘了 sudo nginx -t
• 忘了 sudo nginx -s reload
• 配置没软链接到 sites-enabled

❌ try_files 还是 404？

• root 路径写错了
• index.html 不存在
• 文件权限不够（chmod -R 755 dist/）

❌ 代理返回 502？

• proxy_pass 地址错了
• 后端服务没启动
• 防火墙没开对应端口

八、结语：前端的边界，由你定义

十年前，前端只会 HTML/CSS/JS。
今天，前端必须懂构建、懂性能、懂部署。

Nginx 不是“运维的东西”，
它是前端掌控生产环境的最后一块拼图。

你可以在工位上优雅地写 React 组件，
也可以在服务器上用 Nginx 护航千万用户。

一个真正厉害的前端，
从代码提交，到用户访问，全程可控。

别再裸奔了。
现在就去配 Nginx，让你的项目，稳如老狗。