前言老大：你知道CDN+Nginx是怎么工作的吗？我：这里省略了1亿点...?老板：简单的说，前端项目通过打包构建工具生成的最终产品会上传到【对象存储】（例如：阿里云OSS，腾讯云COS);【对象存储】中的静态资源访问CDN服务，CDN加速处理，再分发给用户客户端；但是前面会有一个Nginx服务，配置反向代理指向CDN地址，然后CDN去【对象存储】拉数据boss：这个是最常用的。当前端资源打包推送到【对象存储】时，会触发CDN刷新，于是就有了这篇文章。Nginx的基本内容是什么？Nginx是一个轻量级的HTTP服务器，它使用事件驱动、异步和非阻塞的处理方式。具有优秀的IO性能，常用于HTTP服务器（包括动静分离）、正向代理、反向代理、负载均衡等。等等Nginx和Node.js在很多方面是相似的，比如HTTP服务器、事件驱动、异步非阻塞等等，Nginx的功能也可以使用Node.js来实现，但是它们的使用场景是不同的。Nginx擅长底层服务器端资源的处理（静态资源处理和转发、反向代理、负载均衡等），而Node.js更擅长上层具体业务逻辑的处理。下载并开始下载可以直接访问Nginx官网下载对应的压缩包：方法一：可以在主页直接下载各种主版本（mainlineversion）或者稳定版（stableversion）方法二：可以通过右侧导航中的下载选项，一般下载稳定版解压并解压对应的.zip压缩文件，存放在合适的磁盘目录下。启动服务并进入对应的Nginx目录，双击执行nginx.exe或者在命令行中通过startnginx启动服务，启动后会有一个闪过的弹窗，表示启动成功成功的。此时通过浏览器访问http://localhost:.conf配置文件。Nginx的配置文件位置是/nginx-xxx/conf/nginx.conf，可以查看或者添加和修改配置文件：配置文件的大致结构可以分为：Nginx实战这里直接使用Http服务一个简单的vite-vue3项目演示nginx部署静态资源的过程：准备一个demo项目，通过脚手架web服务正常访问，如下：打包demo项目，得到构建产品dist目录。将dist目录重命名为vite-vue3，放入D:修改\nginx-1.22.0\html目录下的D:\nginx-1.22.0\conf\nginx.conf配置文件。对应的配置如下，比较简单：访问http://localhost/vite-vue3/进行部署页面如下：以上只是静态资源服务的简单配置，还可以设置缓存，配置代理，配置多台服务器等内容。正向代理正向代理的代理对象是客户端，正向代理是代理服务器为客户端访问目标服务器。这里举个简单的跨域例子，然后通过nginx配置代理，解决相应的跨域问题。后端服务部分基于express启动模拟业务处理服务器。代码如下：constexpress=require('express');constapp=express();app.get('/',(req,res,next)=>{res.end('

helloworld!!!

');});app.get('/getBooks',(req,res,next)=>{setTimeout(()=>{constdata=newArray(5).fill(1).map((v,i)=>{return{id:i+1,name:`testtitle${i+1}`,price:i+100}});res.json(data);},2000);});app.listen(8009,(err)=>{if(err){console.log("服务器运行错误！！");return}console.log("服务器正在运行在：httpp://10.98.214.68:8009");});前端页面部分仍然使用上面的vite-vue项目，但是会在App的onMounted生命周期钩子中通过fectch请求http://10.98。vue组件.214.68:8009/getBooks接口，结果果然跨域：通过nginx配置代理，重启，如下：//方法一location/getBooks{proxy_buffer_size64k;proxy_buffers3232k;proxy_busy_buffers_size128k;add_headerAccess-Control-Allow-Origin'*'always;add_headerAccess-Control-Allow-Headers“接受、接受编码、接受语言、连接、内容长度、内容类型、主机、来源、引用者、用户代理”;add_headerAccess-Control-Allow-Methods"GET,POST,PUT,OPTIONS";add_headerAccess-Control-Allow-Credentialstrue;proxy_passhttp://10.98.214.68:8009/getBooks;}在App.vue中通过请求nginx代理服务器，代码如下：onMounted(()=>{console.log('发送请求')fetch('http://10.98.214.68:80/getBooks').then((res)=>{returnres.json()}).then((res)=>{console.log('收到响应结果：',res)}).catch((err)=>{console.error('Requestexception:',err)})})反向代理反向代理是指中间服务器，它作为后端服务器的代理来响应客户端请求。代理的对象是服务这里以通过页面访问/abc/和/xyz/时访问不同服务器为例，如下：启动两个节点服务模拟不同服务器，如下：//server-abc.jsconstexpress=require('express');constapp=express();app.get('/',(req,res,next)=>{res.end(`

helloworld8001!!!本页面真实url为http://127.0.0.1:8001

`);});app.listen(8001,(err)=>{if(err){console.log("服务器运行错误！！");return}console.log("服务器运行于：http://127.0.0.1:8001");});//server-xyz.jsconstexpress=require('express');constapp=express();app.get('/',(req,res,next)=>{res.end(`

helloworld8002!!!本页真实url为http://127.0.0.1:8002

`);});app.listen(8002,(err)=>{if(err){console.log("serverrunwitherror!!");return}console.log("服务器运行于：http://127.0.0.1:8002");});配置nginx代理服务器，使访问/abc/可以跳转到http://127.0.0.1:8001，访问/xyz/可以跳转到http://127.0.0.1:8002，具体配置为如下：location/abc/{proxy_passhttp://127.0.0.1:8001/;}location/xyz/{proxy_passhttp://127.0.0.1:8002/;}重启nginx并访问，如下：负载均衡负载均衡是指分配给多个运行单元执行，如Web服务器、FTP服务器、企业关键应用服务器等关键任务服务器等，从而完成一起完成任务。简单的说，当有2台或更多服务器时，请求按照规则随机分发到指定的服务器处理。一般负载均衡配置需要同时配置反向代理，通过反向代理跳转到负载均衡。核心配置如下：upstreammyserver{server127.0.0.1:8001;server127.0.0.1:8002;}server{listen80;服务器名称本地主机；...位置/{根html;索引index.html索引。htm;proxy_set_header主机$host:$server_port;proxy_passhttp://myserver;#请求重定向到myserver定义的服务器列表}...}最后，以上就是本文的全部内容。如有不当之处，可在评论区指出。希望这篇文章对你有所帮助！本文参加了SegmentFault思维写作挑战赛，欢迎正在阅读的你加入。