前言

老大:CDN + Nginx 怎么玩的你晓得不?

我:此处省略一亿个点 ... ☺

老大:简略来说,前端我的项目通过打包构建工具生成的最终产物,会先上传到【对象存储】中(例如:阿里云 OSS、腾讯云 COS);【对象存储】中的动态资源通过接入 CDN 服务,再由 CDN 进行减速解决,而后散发到用户客户端;但最前置会有个 Nginx 服务,它配置反向代理指向 CDN 地址,而后 CDN 去【对象存储】中拉数据

老大:这是最罕用的,前端资源打包后 PUSH 到【对象存储】时,就会去触发刷新 CDN

我:此处赞一手 ☺

于是痛定思痛,开始学习 Nginx 相干的内容,于是有了这篇文章.

Nginx 根底内容

是什么?

Nginx 是一个轻量级的 HTTP 服务器,采纳事件驱动、异步非阻塞解决形式的服务器,它具备极好的 IO 性能,罕用于 HTTP服务器(蕴含动静拆散)正向代理反向代理负载平衡 等等.

NginxNode.js 在很多方面是相似的,例如都是 HTTP 服务器、事件驱动、异步非阻塞等,且 Nginx 的领有的性能,也能够应用 Node.js 去实现,但它们的应用场景是不同的,Nginx 擅长于底层服务器端资源的解决(动态资源解决转发、反向代理,负载平衡等),Node.js 更善于下层具体业务逻辑的解决.

下载和启动

下载

可间接拜访 Nginx 官网 进行下载对应的压缩包:

  • 形式一:可间接在主页面的各种 主版本(mainline version)稳固版本(stable version) 进行下载

  • 形式二:可通过右侧导航的 download 选项进行下载,个别下载 稳固版本

解压

将对应的 .zip 压缩文件解压并存放到适合的磁盘目录即可.

启动服务

进入到对应的 Nginx 目录,双击执行 nginx.exe 或者在命令行中通过 start nginx 启动服务,启动后会有一闪而过的弹窗,这就代表启动胜利了,此时通过浏览器拜访 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/ 部署好的页面,如下所示:


    以上只是简略的配置动态资源服务,还能够自行设置缓存、配置代理、配置多个 server 内容等等

正向代理

正向代理的代理对象是客户端,正向代理就是代理服务器替客户端去拜访指标服务器.

这里举一个简略的 跨域 的例子,而后通过 nginx 去配置代理,解决对应的跨域问题.

  • 后端服务局部 基于 express 来启动模仿一个业务解决服务器,代码如下:

    const express = require('express');const app = express();app.get('/',(req, res,next)=>{    res.end('<h1>hello world!!!</h1>');});app.get('/getBooks',(req, res,next)=>{    setTimeout(()=>{        const data = new Array(5).fill(1).map((v,i) => {            return {id: i + 1, name: `test title ${i+1}`, price: i + 100 }        });        res.json(data);    }, 2000);});app.listen(8009, (err) => {    if(err) {        console.log("server run with error!!");        return    }    console.log("server is runing at:http://10.98.214.68:8009");});
  • 前端页面局部 依然应用下面的 vite-vue 我的项目,只不过会在 App.vue 组件的 onMounted 生命周期钩子中通过 fectch 申请 http://10.98.214.68:8009/getBooks 接口,后果如预期产生跨域:

  • 通过 nginx 配置代理并重新启动,具体如下:

    // 形式一location /getBooks {        proxy_buffer_size 64k;        proxy_buffers  32 32k;        proxy_busy_buffers_size 128k;        add_header Access-Control-Allow-Origin '*' always;        add_header Access-Control-Allow-Headers "Accept,Accept-Encoding,Accept-Language,Connection,Content-Length,Content-Type,Host,Origin,Referer,User-Agent";        add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS";        add_header Access-Control-Allow-Credentials true;        proxy_pass  http://10.98.214.68:8009/getBooks;}
  • App.vue 中通过申请 nginx 代理服务器,代码如下:

    onMounted(() => {  console.log('发送申请')  fetch('http://10.98.214.68:80/getBooks')    .then((res) => {      return res.json()    })      .then((res) => {      console.log('接管到响应后果:', res)    })    .catch((err) => {      console.error('申请异样:', err)    })})

    反向代理

    反向代理指代理后端服务器响应客户端申请的一个中介服务器,代理的对象是服务端.

这里举一个通过页面拜访 /abc//xyz/ 时,可能别离拜访不同服务器的例子,如下:

  • 启动两个 node 服务模仿不同的服务器,如下:

     // server-abc.js const express = require('express'); const app = express(); app.get('/',(req, res,next)=>{   res.end(`<h1>hello world 8001!!! <small>this page real url is http://127.0.0.1:8001</small></h1>`); }); app.listen(8001, (err) => {   if(err) {       console.log("server run with error!!");       return   }   console.log("server is runing at:http://127.0.0.1:8001"); }); // server-xyz.js const express = require('express'); const app = express(); app.get('/',(req, res,next)=>{   res.end(`<h1>hello world 8002!!! <small>this page real url is http://127.0.0.1:8002</small></h1>`); }); app.listen(8002, (err) => {   if(err) {       console.log("server run with error!!");       return   }   console.log("server is runing at:http://127.0.0.1:8002"); });

    • 配置 nginx 代理服务器,实现通过拜访 /abc/ 能跳转到 http://127.0.0.1:8001,通过拜访 /xyz/ 能跳转到 http://127.0.0.1:8002,具体配置如下:
            location /abc/ {             proxy_pass http://127.0.0.1:8001/;                 }         location /xyz/ {             proxy_pass http://127.0.0.1:8002/;                 } 
    • 重启 nginx 并拜访,如下:

负载平衡

负载平衡其意思就是摊派到多个操作单元上进行执行,例如 Web 服务器、FTP 服务器、企业要害应用服务器和其它要害工作服务器等,从而共同完成工作工作.

简略说就是当有 2 台或以上服务器时,依据规定随机的将申请散发到指定的服务器上解决,负载平衡配置个别都须要同时配置反向代理,通过反向代理跳转到负载平衡.

  • 外围配置如下:

    upstream myserver {   server 127.0.0.1:8001;server 127.0.0.1:8002;}server {  listen       80;  server_name  localhost;    ...  location / {      root   html;      index  index.html index.htm;      proxy_set_header Host $host:$server_port;      proxy_pass  http://myserver;  #申请转向 myserver 定义的服务器列表        }    ... }

    最初

    以上就是本文的所有内容,有不当之处能够在评论区指出,心愿本文对你有所帮忙!

本文参加了SegmentFault 思否写作挑战赛,欢送正在浏览的你也退出。