前言

hello,各位大佬下午好,这几天因为公司需要配置了Nginx,而在前端的开发工作中经常会使用Nginx来配置反向代理去解决跨域等问题,但是因为Nginx主要还是偏后端一点,所以很有幸的去更多的了解了一下Nginx,正好也记录一下这次学习的过程。

文章具体内容

我们需要了解一下何为Nginx,它是做什么的,它为什么能够被广泛应用,而我们在前端的实际开发过程中在怎样的场景下使用Nginx。今天这篇文章就围绕这几个问题展开。顺便讲讲Nginx的使用教程。

何为Nginx

首先Nginx是一款轻量级的http服务器,它是一位来自俄罗斯的大佬采用C语言开发的软件.与其说它是软件不如说它是一款高性能的服务器以及代理服务器。Nginx发布于2004年,经过很多年的技术积累之后,Nginx逐渐成为一个必备的基础工具,如今很多的大型网站都是搭建在Nginx之上,而关于Nginx和Node.js每个前端开发者都有不同的观点,但是首先要知道他们两者的区别在哪里,针对不同的业务场景两者配合使用,助力前端开发。

Nginx与Node.js的区别

  • Nginx擅长底层关于服务器端的资源的处理(静态资源的分发处理、反向代理、负载均衡等)
  • Node.js更擅长于底层之上的具体的业务逻辑的处理,

Nginx能做什么

http服务

Nginx作为一款http服务器和代理服务器,那么它能够做一些什么事情呢,首先它作为http服务器。它就可以开启http服务,提供独立的http服务。可以用作网页静态的服务器。

虚拟主机

其次它还可以被应用在虚拟主机上,可以实现在同一台服务器上虚拟出多个网站。比如您当前访问的个人网站它的服务器也是采用虚拟主机的形式为用户提供服务的。

反向代理

当然它最重要的作用是能够实现反向代理的功能,这里多嘴一句,有反向代理就有正向代理,那么何为正向代理。在正常的情况下,去代理用户去访问服务器,需要用户手动设置代理服务器的ip和端口号。

集群化

而反向代理则是通过代理服务器,代理用户要去访问的目标服务器,通过代理服务器去接受请求,然后转发给内网的服务器,这种多个服务器共同工作的场景也被称为“集群化”。最后将从内网服务器得到的结果返回给客户端,在这种情况下,代理服务器对外就表现为只有一个服务器。

负载均衡

其实它还有一个功能在实际开发中也常用到,就是负载均衡。负载均衡顾名思义,就是将从用户那里接收到的数据流量等平分给多个服务器去执行。从而减轻每台服务器的压力。刚刚又提到集群化,就是让多台服务器共同完成工作任务。而当每台服务器都能完成更多的工作任务时,整体提升了集群的吞吐量。(能够处理的总数据量变高了。)

动静分离

其实Nginx还有一个智能的功能,就是它能够将动态请求和静态请求分开来,这样合理的配置服务器的资源,能够使服务器的整个系统的性能和效率提高。这种智能高效的功能可以称它为动静分离。


为什么Nginx能够被广泛应用,

Nginx之所以能够被广泛应用是因为其具有以下一些特性:

  1. 轻量级
  2. 高性能
  3. 稳定性
  4. 并发性好
  5. 当然除了以上一些显著的特点意外其实它还有一些优点比如↓↓↓
  6. 跨平台-----Nginx不仅能运行于win、Mac还有其他小众平台也能运行。
  7. 其结构为master/worker结构:一个master进程,可以生成一个或多个worker进程。
  8. 开源--------其本身作为一款开源软件就很讨一些开源爱好者的喜。
    内置检查功能-------如果nginx代理的后端web服务器宕机了,不会影响我们前端去访问。
  9. 剩下的有人看到的来编一个吧。

通过几张图更直观了解其工作机制及运行原理




Nginx在我们前端开发中到底能做些什么呢,

  • 在前端的实际开发过程中,主要使用到的Nginx的功能就是反向代理,面试题也会经常问到前端开发过程中如何结果跨域等问题,都跟这个Nginx脱不开关系。
  • Nginx通过反向代理服务器,接收客户端的网络访问请求,然后服务器将请求通过其事先定好的规则去转发给公司企业个人的一些能够执行业务的服务器。最后将从这些服务器返回的结果,返回给发起连接请求的客户端。
补充说明
因为上一次发布文章的时候对于前端使用nginx这块没有太详细的赘述,所以此次更新的更详细一些,也是自己对于nginx有个更深刻认识的记录。

实现访问限制:

    location / {
        deny  192.168.1.100;
        allow 192.168.1.107/200;
        allow 10.10.50.16;
        deny  all;
    }
  • 在公司或者多人开发的场景中时,经常有需求就是禁止或者只让某部分人访问地址,

在上面的代码块中deny和allow是Nginx内置的ngx_http_access_module模块,其运行原理就是像js那样从上往下匹配,匹配到了之后则不在继续匹配。

deny

deny的意思是禁止访问,第一行则禁止了192.168.1.10这个ip去访问,

allow

allow的意思是允许访问,第二行则允许了192.168.1.107192.168.1.200这个IP分段去访问,但是第一行已经禁止192.168.1.10这个IP去访问了,第三行允许10.10.50.16这个指定的IP去访问,

最后all则让不符合条件的都禁止访问,这样就可以达到访问限制的效果。也可以保证安全。

解决跨域问题

什么是跨域

浏览器从一个域名的网页去请求另一个域名的资源时,域名端口协议,这三者有一个不同的话,都会跨域

为什么会有跨域

在前后端分离的开发模式下,前后端的域名是不一致,此时就会发生跨域访问问题。在请求的过程中我们要想去后端去拿数据一般都是post/get请求,所以跨域问题出现

最后解决Nginx跨域问题

Nginx的优点就是可以在前端就可以解决跨域问题,尤其是前后端分离调试时,现在很多公司的开发模式都是前后端分离,而前端在本地把项目跑起来之后,接口获得的数据希望是后端传过来的实际数据,而不是本地mock的假数据,此时就需要使用Nginx进行代理,location/后面的是URL的path,分别以data、serve、project,proxy——pss后面的路径则是需要请求的线上路径,这样就可以绕开浏览器的跨域安全限制,实现了跨域访问。

http {
server {
    listen 8080;
    server_name localhost;
    location /data {
        proxy_pass http://145.45.4.5:81;
    }
    location /serve {
        proxy_pass http://baidudev.baidutest.com:81/serve;
    }
    location /project {
        proxy_pass http://tigerdev.iftiger.com:8080/project;
    }
}
}

Nginx使用方法:(很笼统)

下载压缩包并解压

1.首先下载当前系统环境下可以正常使用的Nginx版本的压缩包,然后将压缩包解压后打开,会看到如下图所示:

处理打包后的代码

2.对于前端这块而言,我们需要将打包好的代码(执行build指令后)移至html文件夹内,

配置代码环境

3.在Nginx文件夹目录下找到conf文件夹,找到nginx.conf文件,以记事本或者notepad等方式打开,直接找到server处,
http {
server {
    # 这里是服务启动后监听的端口,
    listen 8080;
    # 这里是启动时需要被代理的地址,
    server_name localhost;
    #启动后,在地址栏会代理到下面的ip地址和端口号以及拼接路径data,也就是http://145.45.4.5:81/data...这种形式。
    location /data {
        proxy_pass http://145.45.4.5:81;
    }
    #还可以监听多个地址,因为在实际开发中会有很多的地址,都需要去配置代理,配置下方的地址可能会连上公司内部的生产测试环境等,而配置上方的ip则可能会跟后端更方便的连调接口,提升开发效率。
    location /serve {
        proxy_pass http://baidudev.baidutest.com:81/serve;
    }
}
}

常用的Nginx指令

4.最后通过命令行工具启动Nginx服务,

可以直接在nginx文件夹根目录单击地址栏输入cmd启动命令行工具,
老规矩nginx -v 查看当前nginx版本,
输入启动指令,
> start nginx
启动完成后,最好在代码编辑器内重启服务。

停止nginx服务
>nginx -s stop

重启nginx服务
nginx -s reload

完整有序的停止nginx
nginx -s quit

测试nginx的配置文件是否正确
nginx -t -c /path/to/nginx.conf

查看日志文件
nginx -s reopen

一般直接双击nginx.exe文件也可以启动nginx服务,窗口闪动一下代表服务已启动。

公众号噜噜科技君

最后修改:2021 年 07 月 01 日 11 : 24 PM
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。