一文读懂 Nginx 动静分离-北京尧图网络

通俗理解动态资源交给后端程序处理静态资源直接由 Nginx 自己返回减轻后端服务器压力提升网站速度。1、什么是静态资源、什么是动态资源✅静态资源Nginx 直接读文件返回文件写死不会每次访问变化html、css、js图片 jpg/png/gif、字体、视频、下载文件访问时不需要 Java/Python/PHP 运行直接读取磁盘文件返回浏览器。✅动态资源Nginx 转发给后端程序每次访问结果不一样需要后端代码计算生成页面Java SpringBoot、PHP、Python、Go 接口比如登录、查询个人信息、订单列表数据来自数据库必须后端程序处理。动静分离核心思想Nginx 充当大门。浏览器请求过来如果是图片、css、js → Nginx 自己直接返回不找后端。如果是接口、动态页面 → Nginx 转发给后端服务处理拿到结果再返回浏览器。好处后端程序不用处理图片这类消耗 IO 的请求压力大幅下降Nginx 读取静态文件性能远高于 Java、PHP页面打开更快静态资源可以做缓存、压缩优化访问速度2、没有动静分离会发生什么举例子SpringBoot 项目把图片、css 全部放在 jar 包里面。浏览器请求一张图片http://xxx.com/a.jpg请求流程浏览器 → Nginx → SpringBoot → SpringBoot 读取 jar 包里图片 → 返回 Nginx → 返回浏览器。问题只是一张图片也要经过 Java 程序处理。大量用户刷图片Java 服务线程被占满接口就会卡甚至崩溃。做动静分离之后http://xxx.com/a.jpg浏览器→NginxNginx 直接在服务器磁盘找到 a.jpg直接返回完全不访问 SpringBoot 后端。只有访问接口/user/list才转发给 SpringBoot。3、目录规划实操准备假设服务器 Linux后端 SpringBoot 地址127.0.0.1:8080静态文件全部放到独立目录/data/static/把所有图片、css、js、html 放到这个文件夹/data/static/ ├─ css/ │ main.css ├─ js/ │ index.js └─ img/ logo.png访问图片地址http://域名/img/logo.png4、完整 Nginx 配置带注释零基础可复制nginx 配置文件一般是/etc/nginx/nginx.conf或者/etc/nginx/sites-available/defaultserver { listen 80; # 监听80端口 server_name www.test.com; # 你的域名 # 动静分离核心静态资源匹配 # 匹配后缀jpg png gif css js html 字体等静态文件 location ~* \.(jpg|png|gif|jpeg|css|js|ico|woff|woff2)$ { root /data/static; # 静态文件根目录 expires 7d; # 浏览器缓存7天不用重复下载 add_header Cache-Control public; } # 动态请求全部转发给后端SpringBoot location / { proxy_pass http://127.0.0.1:8080; # 后端服务地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }配置逻辑拆解location ~* \.(xxx)$~*代表不区分大小写正则匹配。只要 url 结尾是.jpg .css这类就走这个 location。root /data/static告诉 nginx去/data/static下面找文件。请求/img/logo.png→ nginx 拼接路径/data/static/img/logo.png不匹配静态后缀的请求全部落到location /转发给后端 8080。比如/login、/api/user全部交给 SpringBoot 处理。⚠️重要文件权限 Nginx 进程用户一般是nginx或者www-data必须给 /data/static 读权限否则报 403chmod -R 755 /data/static chown -R nginx:nginx /data/static检查配置重载 nginxnginx -t # 检查配置有没有写错 nginx -s reload # 平滑生效配置不中断业务5、两种常见动静分离方案方案 A静态文件放在本机磁盘上面例子✅优点简单小项目首选。❌缺点多台 Nginx 机器静态文件要同步复制。方案 B静态资源放到对象存储OSS生产常用图片、css 直接丢阿里云 OSS前端直接请求 OSS 域名。Nginx 不再管静态文件只代理动态接口。6、常见踩坑零基础最容易错坑 1root 路径写错访问图片 404root后面目录不要写到文件写根文件夹。错误root /data/static/img;正确root /data/static;坑 2分不清 root 和 aliasrooturl 路径拼接在 root 后面请求/a/b.jpg→ root /static →/static/a/b.jpgalias替换匹配路径location /static/ { alias /data/static/; }坑 3静态文件权限不足403 Forbidden文件夹没有读权限nginx 打不开磁盘文件。坑 4顺序问题location 匹配优先级正则 location 优先级高于普通前缀 location。静态资源正则要写在前面。坑 5SpringBoot 里面也放静态资源做动静分离之后建议把 jar 包里面静态资源全部移除统一交给 Nginx 管理。7、怎么验证有没有生效浏览器打开图片链接F12 开发者工具→网络面板。看响应头Server: nginx代表是 Nginx 直接返回静态文件没有走后端。如果是后端返回Server 会显示 SpringBoot 相关标识。8、拓展另一种写法按 url 前缀区分如果你的静态 url 全部以/static/开头http://www.test.com/static/img/a.jpglocation /static/ { alias /data/static/; expires 7d; } location / { proxy_pass http://127.0.0.1:8080; }只要 url 以/static/开头全部 Nginx 本地读取其余转发后端。9、完整请求流程回顾用户浏览器访问http://www.test.com/img/logo.png请求到达 Nginx 80 端口Nginx 正则匹配后缀.png命中静态 locationNginx 读取服务器磁盘/data/static/img/logo.png直接把图片返回浏览器SpringBoot 完全没有收到这个请求用户访问http://www.test.com/api/user/geturl 后缀不是图片不命中静态 location进入location /反向代理转发到127.0.0.1:8080/api/user/getSpringBoot 执行业务逻辑查数据库返回 jsonNginx 拿到结果返回浏览器。10. 图片到底放哪里一共有4 种存放位置每种对应不同架构动静分离配置也不一样。方式 1图片放在后端项目里面不做动静分离比如 SpringBoot把图片放到src/main/resources/static/打包进 jar。访问http://域名/a.jpg请求路径浏览器 → Nginx → SpringBoot → SpringBoot 读取 jar 内部图片返回缺点图片请求全部打给 Java 后端占用后端线程高并发差。小内部系统可以这么干生产高并发不推荐。方式 2图片放在Nginx 服务器本地磁盘最经典的动静分离就是我们前面配置例子/data/static/img/物理位置Nginx 所在的这台 Linux 服务器硬盘上不在 SpringBoot 项目里jar 包里面不再放图片。配置片段location ~* \.(jpg|png)$ { root /data/static; }请求/img/1.jpg→ Nginx 直接读本机磁盘/data/static/img/1.jpg不走后端程序。⚠️致命问题如果有2 台 Nginx 机器做负载均衡图片只上传到 A 机器B 机器没有这个文件用户访问落到 B Nginx 就 404。解决使用共享存储 NFS多台 Nginx 挂载同一个网络磁盘或者发布的时候把图片同步到所有 Nginx 机器。✅适合单机、中小项目。 ❌不适合多 Nginx 节点、大型业务。方式 3图片放在对象存储 OSS阿里云 OSS、腾讯云 COS【互联网生产主流】图片不上 Nginx 本机也不上后端服务器单独丢到云对象存储。图片地址直接是https://xxx.oss-cn-shenzhen.aliyuncs.com/img/1.jpg用法 A前端直接访问 OSS 地址最常用页面 img 标签直接写 OSS 完整 url图片请求根本不经过 Nginx。 Nginx 只代理动态接口。这也是动静分离思想静态资源彻底剥离出去。优点无限扩容不怕多台 Nginx不需要同步文件自带缓存、CDN 加速、防盗链、图片裁剪缺点会产生云存储流量费用。用法 BNginx 代理 OSS不暴露 OSS 原始域名浏览器访问http://域名/img/1.jpgNginx 内部反向代理到 OSS对前端隐藏 OSS 地址。location /img/ { proxy_pass https://xxx.oss-cn-shenzhen.aliyuncs.com/img/; }图片实际存在 OSSNginx 充当转发代理本机磁盘不存一张图片。重点这种 Nginx 本机没有图片文件只是转发请求到对象存储。✅适合绝大多数线上生产项目。方式 4图片放在后端服务器磁盘后端机器硬盘图片上传保存到 SpringBoot 所在机器磁盘/opt/upload/。❗注意不是 Nginx 机器是后端机器的磁盘那 Nginx 动静分离能不能直接读不行Nginx 和 SpringBoot 是两台机器Nginx 访问不到后端机器的本地磁盘。所以这种模式图片请求仍然要走后端接口读取返回不属于动静分离。示例/api/file/getImage?fileId123接口读取后端磁盘图片返回。缺点图片请求消耗后端服务高并发差。一般用于文件上传业务不适合静态展示图片。四种方案对比总结表存放位置图片物理位置是否属于动静分离问题适用场景后端 jar 包内后端程序 jar 包中❌否图片请求全部压后端小内部系统Nginx 本机磁盘Nginx 服务器硬盘✅经典动静分离多 Nginx 节点要同步文件单机、中小项目对象存储 OSS/COS云服务商存储✅高级动静分离产生云费用线上生产推荐后端服务器磁盘后端业务服务器硬盘❌否图片走后端接口文件上传业务非常容易混淆的点Q做动静分离图片必须放在 Nginx 机器吗A不是必须。狭义动静分离图片放 Nginx 本地磁盘。广义动静分离静态资源和后端业务解耦可以放到 OSS请求不走后端业务服务。实际业务开发怎么选学习、测试、单机部署图片放在 Nginx 本机/data/static真实线上项目优先对象存储 OSS不要往 Nginx 硬盘堆图片。用户上传头像、照片一律 OSS不要存服务器磁盘。补充一个常见坑业务里用户上传的图片和项目自带静态图片logo、背景图要区分项目自带固定图片logo、css 背景图 → Nginx 本地 / OSS用户上传图片头像、帖子图片 →绝对不要放 Nginx 本地磁盘优先 OSS因为会源源不断新增文件多机器同步会灾难。为什么不存服务器磁盘磁盘会满用户不断上传图片硬盘迟早爆掉。多实例部署灾难后端部署多台机器 A、B。用户上传落到 A 机器文件存在 A 磁盘下次请求打到 B 机器B 机器没有这个图片直接 404。服务器磁盘没有 CDN 加速图片加载慢。服务器磁盘没有防盗链、图片处理能力。一句话总结动静分离Nginx 干擅长的读文件后端程序专心干业务逻辑。

一文读懂 Nginx 动静分离

相关推荐

Agent开发入门：小白也能学会的大模型硬核技能，收藏提升竞争力！

单片机计算机毕设之基于 STM32 的多模式室内环境智能调控系统设计基于 STM32 的语音 + 移动端双控制智能环境监测系统设计

基于大语言模型与向量数据库构建具备长期记忆的AI Agent宠物

更多资讯

汝州市电工证办理流程全解析，怕考不过白交培训费？看这里

电工证爬杆操作视频全流程办理指南：实操考试心里没底怕挂科？官方报名入口全解析

低压电工证配备最新政策解读：学历不高怕报不上名？官方报名入口全攻略

初级电工证接线千万别踩坑！工地太忙根本没时间复习考试

广东省报名特种作业操作证在哪考有证才能找到好工作

赤峰电工证报名时间怎么考，学历不高也能拿全国通用的证

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？

相关推荐

Agent开发入门：小白也能学会的大模型硬核技能，收藏提升竞争力！

单片机计算机毕设之基于 STM32 的多模式室内环境智能调控系统设计 基于 STM32 的语音 + 移动端双控制智能环境监测系统设计

基于大语言模型与向量数据库构建具备长期记忆的AI Agent宠物

更多资讯

汝州市电工证办理流程全解析，怕考不过白交培训费？看这里

电工证爬杆操作视频全流程办理指南：实操考试心里没底怕挂科？官方报名入口全解析

低压电工证配备最新政策解读：学历不高怕报不上名？官方报名入口全攻略

初级电工证接线千万别踩坑！工地太忙根本没时间复习考试

广东省报名特种作业操作证在哪考 有证才能找到好工作

赤峰电工证报名时间怎么考，学历不高也能拿全国通用的证

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？

单片机计算机毕设之基于 STM32 的多模式室内环境智能调控系统设计基于 STM32 的语音 + 移动端双控制智能环境监测系统设计

广东省报名特种作业操作证在哪考有证才能找到好工作

新疆电工作业干活累吗良心建议助你避开考不过的坑

新疆电工作业干活累吗良心建议助你避开考不过的坑