Web服务器之Nginx综合详解

Web服务器之Nginx综合详解

• 引言
• 一、nginx 是什么
• 二、nginx 的核心工作流程
• 三、nginx 的基础概念
• 四、nginx 的典型使用场景
• 五、nginx 配置的基本结构
• 六、零基础如何理解 nginx
• 七、root、alias、rewrite 的搭配关系
• 八、进阶理解：nginx 的规则优先级
• 九、常见高级指令与用途
• 十、实际项目中怎么组合
• 十一、零基础学习 nginx 的正确顺序
• 十二、最容易踩坑的地方
• 十三、一个完整综合示例
• 十四、总结
• 拓展
• • 证书配置与缓存处理深度解析
  • • 一、HTTPS 与证书是什么
    • 二、HTTPS 工作流程（零基础理解）
    • 三、证书文件是什么
    • 四、nginx 配置 HTTPS
    • 五、HTTPS 配置详解
    • 六、HTTP 自动跳 HTTPS
    • 七、完整 HTTPS 配置（生产环境）
    • 八、HTTPS 中的重要优化
    • 九、什么是缓存
    • 十、缓存有哪些层级
    • 十一、静态资源缓存
    • 十二、expires
    • 十三、缓存控制 Header
    • 十四、为什么前端喜欢 hash 文件名
    • 十五、推荐的静态缓存方案
    • 十六、HTML 为什么不能长期缓存
    • 十七、前端缓存最佳实践
    • 十八、gzip 压缩
    • 十九、代理缓存（高级）
    • 二十、适合缓存的接口
    • 二十一、反向代理综合方案
    • 二十二、真实项目中的 nginx 分工
    • 二十三、nginx 学习路线（推荐）
    • 二十四、最容易踩的 HTTPS 坑
    • 二十五、最容易踩的缓存坑
    • 二十六、一句话总结 nginx
  • nginx 解决缓存问题（前端缓存 / 浏览器缓存 / nginx 缓存）
  • • 一、为什么会有缓存问题
    • 二、缓存问题最常见的场景
    • 三、缓存的层级
    • 四、前端缓存最佳实践（核心）
    • 五、为什么 HTML 不建议缓存
    • 六、为什么 JS/CSS 适合长期缓存
    • 七、正确 nginx 缓存配置（最重要）
    • 八、静态资源长期缓存（推荐）
    • 九、为什么这样不会有缓存问题
    • 十、Vue / React / Vite 默认已经支持 hash
    • 十一、最容易犯的错误
    • 十二、推荐生产方案（标准）
    • 十三、Vue / React SPA 完整推荐配置
    • 十四、如何强制浏览器更新
    • 十五、接口缓存问题
    • 十六、nginx 代理缓存（高级）
    • 十七、哪些接口适合缓存
    • 十八、缓存控制最核心 Header
    • 十九、304 是什么
    • 二十、缓存问题排查方法
    • 二十一、最推荐的现代缓存策略
    • 二十二、真正现代前端缓存体系
    • 二十三、完整生产级推荐配置
    • 二十四、一句话总结缓存问题

引言

nginx 是一个高性能的 Web 服务器、反向代理服务器、负载均衡器和静态资源服务器。它最常见的用途不是“单纯发网页”，而是站在前端与后端之间，负责静态资源分发、请求转发、协议终止、缓存、访问控制等工作。 如果把一个网站系统看成一条流水线，那么 nginx 常常处在最前面，负责接收请求、判断请求该去哪里、把请求交给静态文件或后端服务、再把结果返回给客户端。

一、nginx 是什么

nginx 的核心能力可以概括成四件事：

它不是一个“只会开网页”的工具，而是一个非常强的请求调度层。 常见身份有四种：

• Web 服务器：直接返回 HTML、CSS、JS、图片、下载文件
• 反向代理：把请求转发给后端应用
• 负载均衡器：把请求分配给多个后端实例
• 网关入口：统一处理 HTTPS、跨域、限流、鉴权、缓存等

二、nginx 的核心工作流程

一个请求进入 nginx 后，通常会经历下面的过程： 客户端请求

→ 选择 server
→ 选择 location
→ 判断是否 rewrite
→ 决定 root / alias / proxy_pass / return
→ 可能执行 try_files
→ 返回静态文件或转发后端

这条流程非常重要。 很多 nginx 配置看起来复杂，本质上都是在这条链路上做控制。

三、nginx 的基础概念

1. server server 表示一个虚拟主机。 一个 nginx 可以配置多个 server，用来承载多个域名、多个站点、多个项目。 例如：

server {
listen 80;
server_name example.com;
}

意思是：当请求的域名是 example.com，并且端口是 80 时，走这个 server。

2. location location 是 nginx 的核心之一，用来匹配请求 URI。 例如：

location /api/ {
}

表示凡是以 /api/ 开头的请求，都进入这个规则。 location 决定“这个请求走哪一段逻辑”。

3. root root 是把 URI 直接拼接到目录后面。 例如：

location / {
root /var/www/site;
}

请求 /index.html 时，实际会找：

/var/www/site/index.html

如果请求 /assets/a.js，则找：

/var/www/site/assets/a.js

它适合“目录结构和 URL 结构比较一致”的场景。

4. alias alias 是把 location 匹配到的路径前缀替换成另一个目录。 例如：

location /images/ {
alias /data/pic/;
}

请求 /images/a.png 时，对应磁盘路径是：

/data/pic/a.png

它适合“URL 前缀和磁盘目录不一致”的场景。

5. rewrite rewrite 是修改 URI 的规则，不是文件映射。 例如：

rewrite ^/old/(.*)$ /new/$1 permanent;

表示把旧地址永久跳转到新地址。 它常用于：

• 老地址迁移
• URL 规范化
• 去掉前缀
• 加前缀
• 强制跳转到 HTTPS

6. try_files try_files 是 nginx 中非常实用的指令，作用是按顺序检查文件是否存在。 例如：

location / {
root /var/www/app;
try_files $uri $uri/ /index.html;
}

意思是：

• 先找真实文件
• 再找目录
• 都没有就返回 /index.html

这是前端单页应用最常见的写法。

7. proxy_pass proxy_pass 用于反向代理，把请求转发给后端服务 例如：

location /api/ {
proxy_pass http://127.0.0.1:3000;
}

表示 /api/ 下的请求都交给本地 3000 端口的后端程序。

四、nginx 的典型使用场景

1. 静态网站托管 适合 HTML、CSS、JS、图片、下载文件等。

server {
listen 80;
server_name example.com;

root /var/www/site;
index index.html;
}

适合：

• 公司官网
• 博客
• 文档站
• 活动页
• 资源下载站

2. 单页应用 SPA Vue、React、Angular 打包后，前端路由都需要 nginx 配合。

location / {
root /var/www/dist;
try_files $uri $uri/ /index.html;
}

作用：

• 直接访问 /home
• 刷新 /home
• 跳转到 /user/list

都不会 404，而是交给前端路由处理。

3. 反向代理后端接口 前端页面和后端接口通常分离。

location /api/ {
proxy_pass http://127.0.0.1:3000;
}

适合：

• Node.js
• NestJS
• Java Spring Boot
• Go
• Python
• PHP-FPM

4. 静态资源独立托管 图片、上传文件、音视频、PDF 等往往单独放目录。

location /upload/ {
alias /data/upload/;
}

适合：

• 用户头像
• 文件下载
• 上传图片
• 大文件存储

5. HTTPS 统一入口 nginx 常负责证书和 TLS 终止。

server {
listen 443 ssl;
server_name example.com;

ssl_certificate /path/fullchain.pem;
ssl_certificate_key /path/privkey.pem;
}

这样后端就不用自己处理证书。

6. 域名跳转、路径跳转

return 301 https://$host$request_uri;

常用于：

• HTTP 自动跳 HTTPS
• 老域名跳新域名
• 旧路径跳新路径

7. 负载均衡 多个后端实例时，nginx 可以分流。

upstream backend {
server 127.0.0.1:3000;
server 127.0.0.1:3001;
}

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

五、nginx 配置的基本结构

一个完整配置通常包括：

worker_processes auto;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;

server {
listen 80;
server_name example.com;

location / {
root /var/www/site;
index index.html;
}
}
}

理解顺序：

• events：网络事件模型
• http：HTTP 服务配置
• server：站点级配置
• location：路径级配置

六、零基础如何理解 nginx

你可以把 nginx 想成一个“规则分发器”。 它先看：

所以 nginx 的本质不是“写网页”，而是“决定请求该怎么走”。

七、root、alias、rewrite 的搭配关系

这三者是 nginx 路径处理的核心组合。

1. root + try_files 适合静态站点和 SPA。

location / {
root /var/www/app;
try_files $uri $uri/ /index.html;
}

这是最常用组合之一。

2. alias + try_files 适合独立目录映射。

location /files/ {
alias /data/storage/files/;
try_files $uri =404;
}

3. rewrite + root 适合先改地址，再按目录取文件。

rewrite ^/v1/(.*)$ /$1 last;

location / {
root /var/www/site;
}

4. rewrite + proxy_pass 适合旧接口转新接口，或统一 API 路由。

location /old-api/ {
rewrite ^/old-api/(.*)$ /api/$1 break;
proxy_pass http://127.0.0.1:3000;
}

5. location + alias 适合资源目录映射。

location /images/ {
alias /data/images/;
}

这是最清楚的写法之一。

八、进阶理解：nginx 的规则优先级

nginx 的配置不是“从上到下随便走”，而是有优先级的。 大致顺序可以理解为：

例如：

location = /login {
}

精确匹配最高。

九、常见高级指令与用途

1. return 用于直接返回状态码或跳转。

return 301 https://example.com$request_uri;

通常比 rewrite 更简单、更清晰。

2. index 定义默认首页。

location / {
root /var/www/site;
index index.html index.htm;
}

3. error_page 自定义错误页。

error_page 404 /404.html;

4. gzip 压缩响应内容，减少传输体积。

gzip on;

适合静态资源和文本内容。

5. expires 设置缓存时间。

location /static/ {
expires 30d;
}

适合版本固定的静态文件。

6. deny / allow 控制访问权限。

location /admin/ {
deny all;
}

或者做 IP 白名单。

7. upstream 管理后端服务组。

upstream app_server {
server 127.0.0.1:3000;
server 127.0.0.1:3001;
}

常用于负载均衡。

十、实际项目中怎么组合

方案一：前端 + 后端分离

server {
listen 80;
server_name example.com;

location / {
root /var/www/front;
try_files $uri $uri/ /index.html;
}

location /api/ {
proxy_pass http://127.0.0.1:3000;
}
}

适合：

• Vue + NestJS
• React + Spring Boot
• 任意前后端分离项目

方案二：静态资源独立目录

server {
listen 80;
server_name example.com;

location /static/ {
alias /data/static/;
expires 30d;
}
}

适合图片、CSS、JS、下载文件。

方案三：HTTPS 强制跳转

server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}

方案四：旧路径兼容

rewrite ^/old/(.*)$ /new/$1 permanent;

适合站点改版后保留旧链接。

十一、零基础学习 nginx 的正确顺序

建议按这个顺序学： 第一步：先理解 server 和 location 知道请求是怎么被分发的。 第二步：学会 root 和 alias 理解文件路径怎么映射。 第三步：学会 try_files 解决 404 和 SPA 刷新问题。 第四步：学会 proxy_pass 把前端和后端接起来。 第五步：学会 rewrite 和 return 处理跳转和路径规范化。 第六步：再学 upstream、缓存、压缩、访问控制 进入进阶使用。

十二、最容易踩坑的地方

1. root 和 alias 混用错误 root 是拼接，alias 是替换。 两者不是一回事。

2. SPA 刷新 404 原因通常是没有 try_files $uri $uri/ /index.html;。

3. rewrite 导致循环 特别是 last 使用不当时，会反复重写。

4. proxy_pass 路径拼接问题 location 和 proxy_pass 末尾斜杠不同，会影响路径结果。 这是 nginx 里非常经典的坑。

5. alias 末尾斜杠问题 alias 的路径写法要非常注意，尤其是 location /xxx/ 和 alias /path/ 的配合。

十三、一个完整综合示例

server {
listen 80;
server_name example.com;

# 强制跳转 HTTPS
return 301 https://$host$request_uri;
}

server {
listen 443 ssl;
server_name example.com;

ssl_certificate /path/fullchain.pem;
ssl_certificate_key /path/privkey.pem;

# 前端页面
location / {
root /var/www/front;
try_files $uri $uri/ /index.html;
}

# 后端接口
location /api/ {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# 静态图片
location /images/ {
alias /data/images/;
expires 30d;
}

# 旧地址跳转
location /old/ {
rewrite ^/old/(.*)$ /new/$1 permanent;
}
}

这个配置基本把 nginx 的常见能力都串起来了：

• HTTPS
• 静态页面
• 接口代理
• 图片目录
• 旧链接跳转

十四、总结

nginx 不是单纯的“网页服务器”，而是一个请求调度中心。 它最重要的能力就是：

• location：匹配请求
• rewrite / return：修改请求或跳转
• root / alias：映射文件路径
• try_files：判断文件是否存在
• proxy_pass：转发到后端

如果只记住一句话：nginx 的核心，就是根据 URI 决定这个请求是改、找、转、还是回。

拓展

证书配置与缓存处理深度解析

现代 nginx 项目里，真正最核心的两部分通常是：

1. HTTPS 证书
2. 缓存控制

因为：

• HTTPS 决定网站安全
• 缓存决定网站性能

几乎所有生产环境 nginx 配置，最终都会围绕：

静态资源
HTTPS
缓存
反向代理

这四大体系展开。

一、HTTPS 与证书是什么

HTTPS 本质上：

HTTP + SSL/TLS

作用：

• 数据加密
• 防止中间人攻击
• 身份认证
• 浏览器安全信任

如果没有 HTTPS：

用户名
密码
Token
Cookie

都可能被抓包。 所以现代网站基本必须 HTTPS。

二、HTTPS 工作流程（零基础理解）

浏览器访问：

https://example.com

时：

浏览器
↓
向服务器请求证书
↓
服务器返回 SSL 证书
↓
浏览器验证证书是否合法
↓
建立加密连接
↓
开始 HTTPS 通信

nginx 通常负责：

TLS 握手
证书加载
加密通信

后端程序：

NestJS
Node
Java
Go

通常只处理普通 HTTP。 这就是：

nginx HTTPS 终止

三、证书文件是什么

最常见的是：

现代 nginx 最常见：

fullchain.pem
privkey.pem

四、nginx 配置 HTTPS

最基础配置：

server {
listen 443 ssl;
server_name example.com;

ssl_certificate /ssl/fullchain.pem;
ssl_certificate_key /ssl/privkey.pem;

location / {
root /www/site;
index index.html;
}
}

五、HTTPS 配置详解

1. listen 443 ssl 表示：

监听 443 HTTPS 端口
启用 SSL

2. ssl_certificate 指定证书文件。

ssl_certificate /ssl/fullchain.pem;

里面包含：

网站公钥
证书链
CA 信息

3. ssl_certificate_key 指定私钥。

ssl_certificate_key /ssl/privkey.pem;

这是最重要文件。 绝对不能泄露。

六、HTTP 自动跳 HTTPS

生产环境基本都会这样：

server {
listen 80;
server_name example.com;

return 301 https://$host$request_uri;
}

作用：

HTTP 自动永久跳转 HTTPS

例如：

http://example.com/user
↓
https://example.com/user

七、完整 HTTPS 配置（生产环境）

server {
listen 80;
server_name example.com;

return 301 https://$host$request_uri;
}

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

ssl_certificate /ssl/fullchain.pem;
ssl_certificate_key /ssl/privkey.pem;

ssl_session_timeout 10m;
ssl_session_cache shared:SSL:10m;

ssl_protocols TLSv1.2 TLSv1.3;

ssl_ciphers HIGH:!aNULL:!MD5;

location / {
root /www/site;
try_files $uri $uri/ /index.html;
}
}

八、HTTPS 中的重要优化

1. HTTP/2

listen 443 ssl http2;

作用：

• 多路复用
• 更快加载
• 减少阻塞

现代网站建议开启。

2. TLS 版本

ssl_protocols TLSv1.2 TLSv1.3;

建议：

禁用 TLS1.0 / TLS1.1

因为已经不安全。

3. Session 缓存

ssl_session_cache shared:SSL:10m;

作用：

减少重复握手
提高 HTTPS 性能

九、什么是缓存

缓存的本质：

不要重复请求

缓存能极大减少：

• 网络传输
• 服务器压力
• 页面加载时间

缓存是 nginx 最重要能力之一。

十、缓存有哪些层级

浏览器访问网页时：

浏览器缓存
↓
CDN 缓存
↓
nginx 缓存
↓
后端缓存
↓
数据库缓存

nginx 主要负责：

静态资源缓存
代理缓存

十一、静态资源缓存

这是最常见缓存。 例如：

• JS
• CSS
• 图片
• 字体
• 视频

这些文件通常不会频繁变化。

十二、expires

最经典缓存指令。

location /static/ {
expires 30d;
}

意思：

缓存 30 天

浏览器：

30 天内不再请求服务器

十三、缓存控制 Header

nginx 会自动生成：

Cache-Control
Expires

例如：

Cache-Control: max-age=2592000

十四、为什么前端喜欢 hash 文件名

例如：

app.9a8d7c.js

原因：

文件变了
hash 就变
浏览器自动重新请求

所以：

静态资源可以长期缓存

这就是现代前端缓存体系。

十五、推荐的静态缓存方案

location /static/ {
root /www/front;

expires 30d;

add_header Cache-Control "public";
}

适合：

• Vue
• React
• Vite
• Webpack

十六、HTML 为什么不能长期缓存

HTML 通常：

经常变化

如果缓存太久：

用户看到旧页面

所以：

location / {
add_header Cache-Control "no-cache";
}

十七、前端缓存最佳实践

现代前端通常：

十八、gzip 压缩

缓存之外：

压缩

也非常重要。

开启 gzip

gzip on;

推荐配置

gzip on;
gzip_comp_level 5;
gzip_min_length 1k;

gzip_types
text/plain
text/css
application/javascript
application/json;

作用 例如：

500KB JS
↓
100KB

加载速度大幅提升。

十九、代理缓存（高级）

nginx 不仅能缓存静态文件。 还能缓存：

后端接口响应

这叫：

proxy_cache

基础代理缓存

proxy_cache_path /data/cache levels=1:2
keys_zone=my_cache:10m
max_size=1g;

使用缓存

location /api/ {
proxy_cache my_cache;

proxy_pass http://127.0.0.1:3000;
}

作用：

第一次请求后端
后续直接返回缓存

二十、适合缓存的接口

适合：

• 新闻
• 商品列表
• 首页
• 公共配置

不适合：

• 用户信息
• 支付
• 登录状态

二十一、反向代理综合方案

现代 nginx 最典型：

server {
listen 443 ssl http2;

server_name example.com;

ssl_certificate /ssl/fullchain.pem;
ssl_certificate_key /ssl/privkey.pem;

gzip on;

# 前端页面
location / {

root /www/front;

try_files $uri $uri/ /index.html;

add_header Cache-Control "no-cache";
}

# 静态资源
location /static/ {
root /www/front;

expires 30d;

add_header Cache-Control "public";
}

# 接口
location /api/ {
proxy_pass http://127.0.0.1:3000;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# 图片
location /upload/ {
alias /data/upload/;

expires 7d;
}
}

二十二、真实项目中的 nginx 分工

nginx 通常负责：

二十三、nginx 学习路线（推荐）

初级先学

• server
• location
• root
• alias
• try_files

中级再学：

• proxy_pass
• rewrite
• return
• HTTPS

高级最后学

• upstream
• 缓存
• gzip
• 限流
• WebSocket
• Lua/OpenResty

二十四、最容易踩的 HTTPS 坑

1. 证书路径错误

找不到 pem/key

2. 私钥不匹配

pem 和 key 不是一对

3. 没开放 443 云服务器安全组经常忘记。

4. HTTP 和 HTTPS 混用 会出现：

Mixed Content

二十五、最容易踩的缓存坑

1. HTML 被缓存 导致页面更新后用户还是旧版本。

2. JS 缓存失效 解决方案：

hash 文件名

3. 接口缓存错误 用户数据被缓存给别人。 这是严重问题。

二十六、一句话总结 nginx

nginx 的核心本质：

根据 URI 和规则
决定请求该如何处理

而现代生产环境 nginx 的核心能力：

HTTPS
缓存
静态资源
反向代理
负载均衡

这几乎就是所有互联网项目的基础入口层。

nginx 解决缓存问题（前端缓存 / 浏览器缓存 / nginx 缓存）

缓存问题是前端和 nginx 中最常见的问题之一。 典型现象：

页面更新了
用户还是旧页面

或者：

CSS 改了没生效
JS 更新了浏览器不加载

再或者：

接口返回旧数据

这些本质上都是：

缓存没有正确失效

一、为什么会有缓存问题

浏览器为了提高速度，会缓存：

• HTML
• JS
• CSS
• 图片
• 接口数据

这样下次访问：

直接本地读取
不用重新请求

性能更高。 但问题是：

资源更新后
浏览器可能继续使用旧缓存

这就是缓存问题。

二、缓存问题最常见的场景

1. HTML 更新不生效 例如：

index.html 修改了
用户还是旧页面

这是最危险的问题。

2. JS/CSS 更新不生效 例如：

app.js 更新了
浏览器继续使用旧 JS

导致：

• 页面异常
• 接口错误
• 功能失效

3. 图片缓存 例如：

logo 改了
用户看到旧 logo

4. nginx 代理缓存 例如：

接口返回旧数据

三、缓存的层级

一个请求可能经过：

浏览器缓存
↓
Service Worker
↓
CDN 缓存
↓
nginx 缓存
↓
后端缓存

所以：

缓存问题不一定是 nginx

四、前端缓存最佳实践（核心）

现代前端真正标准方案：

五、为什么 HTML 不建议缓存

HTML 是入口文件。 例如：

index.html

它里面引用：

<script src="/static/app.a1b2c3.js"></script>

如果 HTML 被缓存：

用户永远拿不到新 JS

所以：

HTML 必须尽量不缓存

六、为什么 JS/CSS 适合长期缓存

现代前端会生成：

app.8a9d7c.js
style.a8c9d1.css

这种：

hash 文件名

机制。 文件内容变：

hash 就变

于是：

浏览器自动重新请求

这才是现代缓存体系核心。

七、正确 nginx 缓存配置（最重要）

HTML 不缓存（推荐）

location / {
root /www/front;

try_files $uri $uri/ /index.html;

add_header Cache-Control "no-cache, no-store, must-revalidate";

add_header Pragma "no-cache";

add_header Expires 0;
}

Cache-Control 核心缓存头。

no-cache 表示：

使用缓存前必须重新验证

no-store 表示：

完全不允许缓存

must-revalidate 表示：

缓存失效后必须重新请求

Pragma 兼容老浏览器。

Expires 0 立即过期。

八、静态资源长期缓存（推荐）

JS/CSS/图片缓存

location /static/ {
root /www/front;

expires 30d;

add_header Cache-Control "public";
}

九、为什么这样不会有缓存问题

因为：

JS 文件名带 hash

例如：

app.abc123.js

更新后：

app.xyz888.js

浏览器认为：

这是新文件

于是自动重新下载。

十、Vue / React / Vite 默认已经支持 hash

例如：

dist/assets/index-8d9a7c.js

这就是：

缓存优化

十一、最容易犯的错误

错误一：HTML 长缓存 例如：

expires 30d;

如果加到：

/

上。 会导致：

index.html 被缓存

用户更新不了。

错误二：所有文件都 no-cache 这样虽然不会缓存错误。 但：

性能极差

因为：

• JS
• CSS
• 图片

每次都重新下载。

十二、推荐生产方案（标准）

HTML 不缓存

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

add_header Cache-Control "no-cache";
}

静态资源长缓存

location /assets/ {
expires 30d;

add_header Cache-Control "public";
}

十三、Vue / React SPA 完整推荐配置

server {
listen 80;

server_name example.com;

root /www/front;

# HTML
location / {
try_files $uri $uri/ /index.html;

add_header Cache-Control "no-cache";
}

# 静态资源
location /assets/ {
expires 30d;

add_header Cache-Control "public";
}
}

这是现代 SPA 最经典配置。

十四、如何强制浏览器更新

方法一：Ctrl + F5 强制刷新。

方法二：改文件 hash（推荐） 真正标准方案。

方法三：修改 URL 参数 例如：

app.js?v=2

但：

已经逐渐淘汰

现代前端更推荐：

hash 文件名

十五、接口缓存问题

禁止接口缓存

location /api/ {
proxy_pass http://127.0.0.1:3000;

add_header Cache-Control "no-store";
}

适合：

• 用户信息
• 登录状态
• 实时数据

十六、nginx 代理缓存（高级）

nginx 可以缓存接口。

开启缓存

proxy_cache_path /data/cache
levels=1:2
keys_zone=my_cache:10m
max_size=1g;

使用缓存

location /api/ {
proxy_cache my_cache;

proxy_cache_valid 200 10m;

proxy_pass http://127.0.0.1:3000;
}

含义 200 响应缓存 10 分钟

十七、哪些接口适合缓存

适合

• 新闻列表
• 首页
• 商品列表
• 配置接口

不适合

• 用户数据
• Token
• 支付
• 登录

十八、缓存控制最核心 Header

Cache-Control 最重要。 例如：

Cache-Control: no-cache

Expires HTTP1.0 老机制。

ETag 资源唯一标识。 浏览器：

文件没变
直接返回 304

Last-Modified 最后修改时间。

十九、304 是什么

很多人误以为：

304 没请求服务器

其实：

请求了
但服务器告诉浏览器文件没变

所以：

继续使用缓存

二十、缓存问题排查方法

Chrome F12 打开：

Network

查看：

• Status
• Cache-Control
• Expires
• ETag

Disable cache 开发时可勾选：

Disable cache

二十一、最推荐的现代缓存策略

HTML

no-cache

JS/CSS

hash + 长缓存

图片

长缓存

API

按业务决定

二十二、真正现代前端缓存体系

现代项目真正核心：

HTML 永远最新
JS/CSS 永远 hash

这是：

Vue
React
Vite
Webpack

默认就在做的事情。

二十三、完整生产级推荐配置

server {
listen 80;

server_name example.com;

root /www/front;

# HTML
location / {
try_files $uri $uri/ /index.html;

add_header Cache-Control "no-cache, no-store, must-revalidate";

expires -1;
}

# 静态资源
location /assets/ {
expires 30d;

add_header Cache-Control "public";
}

# 图片
location /images/ {
expires 7d;
}

# 接口
location /api/ {
proxy_pass http://127.0.0.1:3000;

add_header Cache-Control "no-store";
}
}

二十四、一句话总结缓存问题

缓存问题真正核心：

不要缓存 HTML
长期缓存带 hash 的静态资源

这是现代 Web 最标准方案。