前言
对于自己上线项目的前端来说,nginx也是必须要了解和熟悉的,查了很多的nginx文章,看着写的都很详细,但是却没有了整体的概念。这里就重新梳理一遍,也理清思路。
我们在安装nginx之后,会自动生成很多的文件,但是nginx.conf这个文件是我们的核心,如何去正确的修改和优化它是nginx的核心。
首先我们可以先看下原本的配置,你会觉得无所适从,因为感觉这个鬼东西也太多了吧。而且感觉根本就不理解,也不知道该怎么写。下面,就一步一步的教你如何入门到熟悉
一.nginx.conf原本配置到解释
看到这个118行是不是觉得有点害怕
没关系,我们把其中的注释都删掉,除掉了注释之后的nginx代码,现在只有22行了。感觉好多了
二.整体基本理解
虽然上面有了注解,但是看起来还是很迷糊。接着解释:我们可以把nginx.conf分为三个部分进行理解:
- 第一部分:全局块
- 第二部分:events块
- 第三部分:http块
对应图解:
全局块:
作用:从配置文件开始到 events 块之间的内容,主要会设置一些影响nginx 服务器整体运行的配置指令,主要包括配 置运行 Nginx 服务器的用户(组)、允许生成的 worker process 数,进程 PID 存放路径、日志存放路径和类型以 及配置文件的引入等。
比如上面第一行配置的
上述例子就表示每个 work process 支持的最大连接数为 1024。
这部分的配置对 Nginx 的性能影响较大,在实际中应该灵活配置。
http块:
作用:这算是 Nginx 服务器配置中最频繁的部分,代理、缓存和日志定义等绝大多数功能和第三方模块的配置都在这里。
需要注意的是:http 块也可以包括 http全局块、server 块。
- http全局块
http全局块配置的指令包括文件引入、MIME-TYPE 定义、日志自定义、连接超时时间、单链接请求数上限等。
- server 块
这块和虚拟主机有密切关系,虚拟主机从用户角度看,和一台独立的硬件主机是完全一样的,该技术的产生是为了 节省互联网服务器硬件成本。
- 每个 http 块可以包括多个 server 块,而每个 server 块就相当于一个虚拟主机。
- 而每个 server 块也分为全局 server 块,以及可以同时包含多个 locaton 块。
- 全局 server 块
最常见的配置是本虚拟机主机的监听配置和本虚拟主机的名称或IP配置。
- location 块
一个 server 块可以配置多个 location 块。
这块的主要作用是基于 Nginx 服务器接收到的请求字符串(例如 server_name/uri-string),对虚拟主机名称 (也可以是IP 别名)之外的字符串(例如 前面的 /uri-string)进行匹配,对特定的请求进行处理。地址定向、数据缓 存和应答控制等功能,还有许多第三方模块的配置也在这里进行。
三.最简单的上线
以上,我们就知道了nginx整体大致的结构,以及每部分的结构是用于做什么的。接下来我们就修改nginx关键位置来实现我们网站的代理功能。看着nginx配置很繁琐,但是如果你只是需要上线一个网站,那么你只需要去修改两个地方即可:
我们可以使用默认简单的配置,然后指定server_name和root,主要是告诉nginx代理的ip是xxx,然后我放在服务器的文件在bbb文件夹即可。nginx便会在用户访问这个ip时,自动的将bbb文件夹中的index.html返回到浏览器来展示页面。
四.nginx优化:
1.前端history模式404问题:
这段代码的作用是,当用户刷新页面时,Nginx会先检查当前URL是否存在,如果不存在,就会尝试访问index.html,从而可以正常显示页面。
2.反向代理:
相信大家作为前端都了解跨域问题,目前前端的主流解决跨域的方式就是
- 开发生产cors解决
- 开发proxy,生产nginx解决。
如何配置:
理解:
这段代码的意思:大致就是如果遇到以/police请求开头的接口,那么就去访问这个ip地址(http://192.168.1.182:8852/police/)的后台端口。
例如我们通过axios去访问/police/getList这个后台接口时,nginx会将这个请求转发到ip端口为http://192.168.1.182:8852的后台中,后台将结果返回给nginx,nginx再把结果给到浏览器,实现反向代理。
定义多个端口的反向代理:
copy上面的,直接修改代理头和proxy_pass即可。
3.开启gzip:
作用:
开启gzip对于前端来说还是比较重要的,浏览器加载的包大概能节约一半的空间。例如首页需要加载a.js文件,该文件为900kb,在开启gzip之后,浏览器会去加载a.js经过gzip之后的文件a.js.gz,大概只有450kb,能够很好的提升浏览速度。
如何配置:
詳見:终极 Nginx 配置指南(全网最详细)-腾讯云开发者社区-腾讯云