前端需要掌握的Nginx知识点
什么是Nginx?
Nginx是一款免费开源的高性能HTTP服务器以及反向代理服务器（Reverse Proxy）,同时可以提供IMAP/POP3/SMATP代理服务等功能。能够快速的响应静态页面请求和支持第三方功能模块扩展。
Nginx的优点
- 高并发、高性能（官方给出的并发数据5万，实际中可以达到2-4万）
- 轻量级、内存消耗少
- 稳定性高，宕机概率低
- 支持热部署
- 模块化设计，扩展性较好
- cpu亲和
Nginx常用的场景
- 静态资源服务器
- 动态匹配
- 反向代理
- Gzip压缩
- 负载均衡
Nginx的安装配置
详细的安装教程可以参考这篇文章
https://www.zhuxiaodong.net/2016/configure-nginx-server-support-https-http2-on-centos7/
Nginx常用的命令
- 查看版本号
nginx -v
- 查看nginx 编译的参数
nginx -V
- 优雅重启，并重新载入配置文件nginx.conf
/usr/local/nginx/sbin/nginx -s reload
- 优雅停止nginx，有连接时会等连接请求完成再杀死worker进程
/usr/local/nginx/sbin/nginx -s quit
具体常用的命令参考如下：
nginx -s stop 快速关闭Nginx，可能不保存相关信息，并迅速终止web服务。
nginx -s quit 平稳关闭Nginx，保存相关信息，有安排的结束web服务。
nginx -s reload 因改变了Nginx相关配置，需要重新加载配置而重载。
nginx -s reopen 重新打开日志文件。
nginx -c filename 为 Nginx 指定一个配置文件，来代替缺省的。
nginx -t 不运行，仅测试配置文件。nginx 将检查配置文件的语法的正确性，并尝试打开配置文件中所引用到的文件。
nginx -v 显示 nginx 的版本。
nginx -V 显示 nginx 的版本，编译器版本和配置参数。
同时要注意在nginx中没有nginx -s start 这个命令
有些时候当你运行
/usr/local/nginx/sbin/nginx -s stop
会报错：
上面的报错为在logs目录发现确实没有nginx.pid文件，那么此时想到的便是检查以下配置文件，生成nginx.pid文件。此时的解决方法为：
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
便可以解决此问题。
Nginx的默认配置
Nginx 安装目录下的nginx.conf就是Nginx全局的配置文件，我们主要修改这里的内容。nginx.conf.default作为配置文件的备份。
其中nginx.conf中的配置信息如下：
#user nobody;
#设置工作进程的数量
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
# 处理连接
events {
# 设置连接数
worker_connections 1024;
}
http {
# 文件拓展名查找集合
include mime.types;
# 当查找不到对应类型的时候默认值
default_type application/octet-stream;
# 日志格式，定义别名为 main
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
# 调用 sendfile 系统传输文件
sendfile on;
#tcp_nopush on;
# 客户端与服务器连接超时时间，超时自动断开
#keepalive_timeout 0;
keepalive_timeout 65;
# 开启gizip 压缩
#gzip on;
# 虚拟主机
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 路由
location / {
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
server {
listen 9090;
server_name 127.0.0.1;
location / {
root build;
index index.html index.htm;
}
}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
搭建静态站点
# 虚拟主机server块
server {
# 端口
listen 8080;
# 匹配请求中的host值
server_name localhost;
# 监听请求路径
location / {
# 查找目录
root /source;
# 默认查找
index index.html index.htm;
}
}
这里说明一下相关字段:
- server 配置虚拟主机的相关参数，可以有多个
- server_name 通过请求中的host值 找到对应的虚拟主机的配置
- location 配置请求路由，处理相关页面情况
- root 查找资源的路径
配置完成后执行 nginx -t 看是否有错误，如果看到的是下面这种就是成功了
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
然后执行nginx -s reload 更新Nginx配置文件,这时候打开浏览器 输入 localhost:8080 应该就能看到你的页面了。
动态匹配（请求过滤）
通常在开发环境或者测试环境的时候呢我们修改了代码，因为浏览器缓存，可能不会生效，需要手动清除缓存，才能看到修改后的效果，这里我们做一个配置让浏览器不缓存相关的资源。
location ~* \.(js|css|png|jpg|gif)$ {
add_header Cache-Control no-store;
}
~* .(js|css|png|jpg|gif)$ 是匹配以相关文件类型然后单独处理。 add_header 是给请求的响应加上一个头信息Cache-Control no-store，告知浏览器禁用缓存，每次都从服务器获取 效果如下：
匹配规则，通常的形式如下：
location = / {
[ configuration A ]
}
location / {
[ configuration B ]
}
location /documents/ {
[ configuration C ]
}
location ^~ /images/ {
[ configuration D ]
}
location ~* \.(gif|jpg|jpeg)$ {
[ configuration E ]
}
location =|～|～*|^~| /uri/
- = 表示精确匹配。只有请求的url路径与后面的字符串完全相等时，才会命中（优先级最高）。
- ^~ 表示如果该符号后面的字符是最佳匹配，采用该规则，不再进行后续的查找。
- ~ 表示该规则是使用正则定义的，区分大小写。
- ~* 表示该规则是使用正则定义的，不区分大小写。
- / 通用匹配，任何请求都会匹配到
最后总结:
- 先判断精准命中，如果命中，立即返回结果并结束解析过程
- 判断普通命中，如果有多个命中，记录下来最长的命中结果
- 如果是^~开头的命中，则不会继续搜索正则命中，但是会继续搜索一般命中
- 继续判断正则表达式的解析结果，按配置里的正则表达式顺序为准，由上到下开始匹配，一旦匹配成功立刻返回结果，并结束解析过程。
- 普通命中：顺序无所谓，是因为按命中长短来确定的
- 正则命中：顺序有所谓，因为是从前往后命中的
当然我们还可以通过状态码来过滤请求就像这样:
# 通过状态码，返回指定的错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /source/error_page;
}
反向代理解决跨域
提起跨域问题，就会引出同源策略的概念，同源策略是浏览器的一种机制，同时由于JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。什么是同源？简单的说：
域名、端口号、协议三者都相同的情况才被称为同源，当三者有一者不相同，便不符合同源策略，此时便产生了跨域。
在前后端分离的开发中，跨域问题是一个非常常见的问题，现在解决跨域问题比较常用的两种方式为：
- 跨域资源请求（CORS）
- Nginx反响代理
先来看上面的图 ，当用户请求xx.720ui.com/server1的时候，Nginx会将请求转发给Server1这个服务器上的具体应用，从而达到跨域的目的
同时nginx解决跨域时常用的参数配置。
location /api {
# 请求host传给后端
proxy_set_header Host $http_host;
# 请求ip 传给后端
proxy_set_header X-Real-IP $remote_addr;
# 请求协议传给后端
proxy_set_header X-Scheme $scheme;
# 路径重写
rewrite /api/(.*) /$1 break;
# 代理服务器
proxy_pass http://localhost:9000;
}
- 拦截路径/api, 可以通过正则匹配
- proxy_set_header 允许重新定义或添加字段传递给代理服务器的请求头
- $ http_host、 $ remote_addr、$ scheme 为Nginx内置变量
- rewrite 根据rewrite后的请求URI，将路径重写，如：接口路径为 /user, 我们可以请求 /api/user。（为什么需要重写uri？因为在使用Nginx做反向代理的时候，需要匹配到跨域的接口再做转发，为了方便匹配，会人为的在原接口中添加一段路径（或标示， 如例子中的api），因此需要在匹配之后、转发之前把添加的那段去掉，因此需要rewrite）
- break 继续本次请求后面的处理 ,停止匹配下面的location。需要注意的是与之类似的last执行过程则是停止当前这个请求，并根据rewrite匹配的规则重新发起一个请求，从上到下依次匹配location后面的规则
- proxy_pass 代理服务器
原理：Nginx拦截到相关匹配规则, Nginx再将请求转发到http://localhost:9000，Nginx得到请求后再响应到前端，可以直接请求/api/user完成请求。
nginx跨域请求一个简单的dome:
server
{
listen 80;
server_name www.1212.com;
location ^~ /blog/ {
proxy_pass http://blog.12121.com/;
}
}
配置Gzip
开发过程中难免用到一些成熟的框架，或者插件，这些外部的依赖，有时候体积比较大，导致页面响应缓慢，我们可以用打包工具(webpack, rollup)，将代码进行压缩，以缩小代码体积。 开启Nginx Gzip压缩功能。需要注意的是 Gzip 压缩功能需要浏览器跟服务器都支持，即服务器压缩，浏览器解析。
- 查看浏览器支持情况，确定 请求头 中的Accept-Encoding字段
- 确定浏览器支持，我们就可以在Nginx中配置
server {
# 开启gzip 压缩
gzip on;
# 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）
gzip_http_version 1.1;
# 设置压缩级别，压缩级别越高压缩时间越长 （1-9）
gzip_comp_level 4;
# 设置压缩的最小字节数， 页面Content-Length获取
gzip_min_length 1000;
# 设置压缩文件的类型 （text/html)
gzip_types text/plain application/javascript text/css;
}
- 查看配置是否生效，查看 响应头 中的Content-Encoding字段，值为 gzip
负载均衡
负载均衡是Nginx 比较常用的一个功能，可优化资源利用率，最大化吞吐量，减少延迟，确保容错配置，将流量分配到多个后端服务器
几种常见的策略:
- 轮询（默认），请求过来后，Nginx 随机分配流量到任一服务器
upstream backend {
server 127.0.0.1:3000;
server 127.0.0.1:3001;
}
- weight=number 设置服务器的权重，默认为1，权重大的会被优先分配
upstream backend {
server 127.0.0.1:3000 weight=2;
server 127.0.0.1:3001 weight=1;
}
- backup 标记为备份服务器。当主服务器不可用时，将传递与备份服务器的连接
upstream backend {
server 127.0.0.1:3000 backup;
server 127.0.0.1:3001;
}
- ip_hash 保持会话，保证同一客户端始终访问一台服务器
upstream backend {
ip_hash;
server 127.0.0.1:3000 backup;
server 127.0.0.1:3001;
}
- least_conn 优先分配最少连接数的服务器，避免服务器超载请求过多
upstream backend {
least_conn;
server 127.0.0.1:3000;
server 127.0.0.1:3001;
}
当我们需要代理一个集群时候可以通过下面这种方式实现
http {
upstream backend {
server 127.0.0.1:3000;
server 127.0.0.1:3001;
}
...
server {
listen 9000;
server_name localhost;
location / {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass backend;
}
}
}