使用Nginx及简单部署


作为前端,我们并不需要很熟练的使用Nginx,把前端的活干好才是硬道理,那有人会想,这个我们还需要了解吗,答案是肯定的,在日常开发中用不到,不代表不需要去了解它,知道它的强大,对接后端的时候也会更加轻松。

一、Nginx 简言介绍

Nginx 是一个轻量级、高性能的HTTP反向代理服务器,并且还是一个TCP/UDP/IMAP/POP3/SMTP服务器(简称:通用代理服务器)。优点是 占用内存小、并发能力强、比同类型网页服务器处理并发表现更好。它还是一种轻量级Web服务器,可作为独立服务器部署网站、淘宝网站架构便是使用的Nginx

官网小tip:Nginx是由伊戈尔·赛索耶夫(Igor Sysoev)为俄罗斯访问量第二的Rambler.ru 站 (俄文为: Рамблер) 所开发。

二、正向代理和反向代理

我们前面说了,Nginx其实是一个反向代理服务器,何为正向代理,何为反向代理?

正向代理: 同一个局域网下的电脑用户想要直接访问网络行不通,只用通过代理服务器 Server去访问才行,那这种代理服务就称之为正向代理。

换个白话理解:小明和小红在一起的时候可以直接沟通对话无障碍,但是异地了就需要譬如电话这种通讯设备来实现通讯,那这个通讯设备就是“代理服务器”,小红能通过来电号知道是小明,那么这种行为就称之为正向代理。

反向代理:客户端无法感知代理,客户端访问网络不需要配置,只需要把请求发送到服务器,反向代理服务器就去选择目标服务器获取对应数据,随之返回到客户端,此时的反向代理服务器和目标服务器就是一个服务,暴露在外的就是代理服务器的地址,隐藏了真实服务器的ip。

白话理解:我们日常点外卖的童鞋可能会注意到,客户或者骑手使用的就是虚拟号码,在有效期内该号码是可以打通的,看不到机主真正的手机号码,暴露出一个虚拟号码保护隐私安全这种行为就是反向代理。

三、负载均衡

负载均衡 这个词理解起来也很容易,就是将服务器压力均摊出去,给服务器减负,它是高可用网络基础架构的关键组件,通常用于将工作 负载分布到多个服务器来提高网站、应用、数据库或其他服务的性能和可靠性。

假如正常没有负载均衡、那么客户端到服务端的操作通常就是 :客户发送请求到服务端->服务端去数据库查询数据->数据库将结果返回服务端->最后服务端返回相应的结果给客户端。

如果随着客户量的增多、数据的访问量过大、显然这种情况无法满足请求。那如果加大服务端的量让多个服务端均摊就来到了负载均衡的活了。

反向代理服务器在客户端和和服务端中间当中间人,那么不管多少个客户端去访问的都是反向代理服务器,地址也是固定的,不会去关那个服务端有时间,只看结果不管过程,那么老大分配任务到每个服务端从而减轻服务端的压力

客户端发送60个请求,反向代理服务器会平均分配给服务端,这个过程称之为:负载均衡

四、动静分离

客户端发起请求:

生活中的场景也很多见,某宝某东客服会有机器客服,他们的话语一般比较官方、还有像sir、小爱等等的语音助手都是数据库写好的回答术语,回答都一样,那么这种就称之为 静态资源 (HTML、CSS或常量)

而你对它说、人工客服、那么人工客服来回答的都是不同的比较细的这种就是动态资源(变量)

如果让每个客服都先回答机器人都可以回答的官方话术无疑是增加了人工客服的工作量,服务端处理请求也是同理、我们将动态资源和静态资源分离出来去请求,交给不同的服务器去解析、不仅加快了解析速度还降低了单个服务器的压力。

五、安装Nginx

**Nginx**官网下载地址:http://nginx.org/en/download.html

下载完后,解压出来的目录如下图:

在该目录下cmd 输入启动命令 start nginx 然后在浏览器localhost(默认监听80端口,可在nginx.conf文件中修改)

server {
       listen       80;          // 默认端口修改
       server_name  localhost;
   }

如果出现一下界面则表示安装成功

Nginx命令介绍

  1. start nginx开启nginx服务
  2. nginx -s stop 关闭nginx 服务,快速停止nginx,可能并不保存相关信息
  3. nginx -s quit 关闭nginx服务,完整有序的停止nginx,并且保存相关信息
  4. nginx -s reload 重载nginx服务,当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
  5. 使用taskkill /F /IM nginx.exe > nul命令强制关停nginx服务器

六、部署测试

本地打包一个项目然后将 dsit放进html文件,当然放入什么文件夹可以自己决定,同样也是在nginx.conf文件中配置

location / {
            root   html;           //默认以html文件夹为根文件夹
            index  index.html index.htm; //默认启动文件
        }

我本地测试一个网易云音乐的小demo打包后放入html,看看能否启动成功

html文件夹中有两个默认的html文件,50x.html是报错文件,index.html是欢迎页,那么我们直接浏览器访问dist 里面就去自动去找index.html的文件了

但结果却报错白屏了

那为什么会报错白屏呢??这个项目我本地是能正常运行的,可是部署到nginx中就报错了…

查询解决方案我了解到

若项目没有直接部署在Nginx主目录下,而是在其子目录,如:
Nginx配置root路径为:nginx/html,子目录路径为:nginx/html/dist,此时Nginx应该这样配置:

location / {
  try_files $uri $uri/ /dist/index.html;    #解决刷新404
}

配置好后,我们重启nginx服务,再次打开

这次的错误是 意外的标记 <,可能是路径问题,通过查看引入的文件不难发现,它直接在根目录下面去请求需要的js文件,所以找不到文件报了该错误

那么找到问题我们就去解决文件路径的问题,修改nginx配置

location / {
    root   html/dist;       #将启动文件改为dist目录下即可
    index  index.html index.htm;
    try_files $uri $uri/ /dist/index.html;
}

OK,可以看到项目正常启动啦~

七 、总结

关于Nginx一些基础知识点已经前端经常把dist文件交给后端,这回我们自己部署,而这些对于前端而言,也足够啦,如果意犹未尽的小伙伴可以去参考一位博主写的: 写给前端新人的nginx教程

里面会有详细的搭建服务器及Linux搭建的一些知识点写的很不错,好啦,这就是我学习的Nginx基础知识点,回见!


文章作者: feico
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 feico !
评论
  目录