?? “你部署的前端項(xiàng)目，99%都在裸奔！”

別再把?dist?文件夾扔上去就叫“上線”了。
沒配 Nginx 的前端，不配談生產(chǎn)環(huán)境。

一、你以為的“部署成功”，其實(shí)是“事故倒計(jì)時(shí)”

你是不是也經(jīng)歷過這些“經(jīng)典時(shí)刻”？

• 用戶刷新頁面，直接 404 白屏
• 靜態(tài)資源加載慢得像蝸牛，Lighthouse 打分 30 分
• 接口調(diào)不通，控制臺(tái)滿屏?CORS error
• 老板問“怎么還打不開”，你只能回“再等等”

然后你甩鍋給運(yùn)維？
不好意思，這是你前端自己的鍋。

現(xiàn)代前端，早已不是“切完圖扔給后端”那么簡單。
你不學(xué) Nginx，就等于把項(xiàng)目的命脈交給別人。

一個(gè)連?try_files?都不會(huì)寫的前端，
和只會(huì)?console.log("hello")?的實(shí)習(xí)生有什么區(qū)別？

二、Nginx 不是運(yùn)維專屬，是前端的“護(hù)城河”

別再迷信什么“我只管業(yè)務(wù)代碼”了。
真正的高級(jí)前端，必須懂部署。

為什么？

? 靜態(tài)資源？Nginx 是王者

• Node.js 靜態(tài)服務(wù)？性能差、資源占得多
• Nginx？C 語言寫的，扛并發(fā)、吃內(nèi)存少，天生為靜態(tài)服務(wù)而生

? SPA 路由？Nginx 救你狗命

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

一行配置解決：

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

這行代碼，就是你前端路由的“復(fù)活甲”。

? 跨域？別再求后端加 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';

前端自己就能搞定，何必低聲下氣？

? 性能優(yōu)化？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
• 項(xiàng)目配置：/etc/nginx/sites-available/
• 啟用配置：軟鏈接到?sites-enabled/
• 靜態(tài)文件：/var/www/html/（或自定義）

3. 檢查 & 重載

# 每次改完配置，必須執(zhí)行！
sudo nginx -t ? ? ? ? ??# 檢查語法
sudo nginx -s reload ? ?# 重新加載（不中斷服務(wù)）

記?。翰?nginx -t?的人，遲早炸服。

四、前端必會(huì)的三大實(shí)戰(zhàn)配置

?? 場景1：部署 Vue/React 項(xiàng)目（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";
? ? }
}

關(guān)鍵點(diǎn)：

• root?指向?dist?目錄
• try_files?是 SPA 的生命線
• 靜態(tài)資源加緩存，用戶體驗(yàn)直接提升

?? 場景2：代理 API，徹底告別跨域

前端請(qǐng)求?/api/user，想轉(zhuǎn)發(fā)到?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;
}

從此，你的前端可以：

• 本地開發(fā)用?/api
• 上線后自動(dòng)代理
• 不用改代碼，不用求后端

?? 場景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。

五、高級(jí)玩家都在用的“騷操作”

?? HTTP/2 + HTTPS：加載速度翻倍

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

HTTP/2 支持多路復(fù)用，頁面資源并行加載，快得離譜。

?? Brotli 壓縮（比 Gzip 更狠）

安裝?nginx-module-brotli，配置：

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

壓縮率比 Gzip 高 15%-20%，尤其適合現(xiàn)代 JS 框架。

?? 安全加固：別讓黑客輕松進(jìn)來

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

這幾行 header，能擋住 80% 的基礎(chǔ)攻擊。

?? 負(fù)載均衡：前端也能玩后端架構(gòu)

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

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

高并發(fā)場景下，這才是真正的“高可用”。

六、完整實(shí)戰(zhàn)：一個(gè)電商前端的部署全流程

# /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;
? ? }
}

這套配置，已經(jīng)覆蓋：

• HTTPS 強(qiáng)制跳轉(zhuǎn)
• SPA 路由支持
• 靜態(tài)資源緩存
• API 代理 + 跨域
• 安全防護(hù)
• 錯(cuò)誤頁面處理

這才是真正的“生產(chǎn)級(jí)部署”。

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

? 配置改了不生效？

• 忘了?sudo nginx -t
• 忘了?sudo nginx -s reload
• 配置沒軟鏈接到?sites-enabled

??try_files?還是 404？

• root?路徑寫錯(cuò)了
• index.html?不存在
• 文件權(quán)限不夠（chmod -R 755 dist/）

? 代理返回 502？

• proxy_pass?地址錯(cuò)了
• 后端服務(wù)沒啟動(dòng)
• 防火墻沒開對(duì)應(yīng)端口

八、結(jié)語：前端的邊界，由你定義

十年前，前端只會(huì) HTML/CSS/JS。
今天，前端必須懂構(gòu)建、懂性能、懂部署。

Nginx 不是“運(yùn)維的東西”，
它是前端掌控生產(chǎn)環(huán)境的最后一塊拼圖。

你可以在工位上優(yōu)雅地寫 React 組件，
也可以在服務(wù)器上用 Nginx 護(hù)航千萬用戶。

一個(gè)真正厲害的前端，
從代碼提交，到用戶訪問，全程可控。

別再裸奔了。
現(xiàn)在就去配 Nginx，讓你的項(xiàng)目，穩(wěn)如老狗。