前端想要了解的Nginx

时间 2019-11-06

标签前端想要了解 nginx 栏目 Nginx 繁體版

原文原文链接

Nginx 是一个高性能的HTTP和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。javascript

常见场景：css

静态资源服务器
动态匹配
反向代理
Gzip 压缩
负载均衡

先来看下默认的Nginx配置，我将以此为基础依次介绍Nginx的用法

Nginx 安装目录下的nginx.conf就是Nginx全局的配置文件，咱们主要修改这里的内容。nginx.conf.default做为配置文件的备份。html

# 设置工做进程的数量
worker_processes  1;
# 处理链接
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       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

        # 路由
        location / {
                root   html;
                index  index.html index.htm;
            }
    }

    # 引入其余的配置文件
    include servers/*;
}
复制代码

搭建静态站点

# 虚拟主机server块
server {
    # 端口
    listen   8080;
    # 匹配请求中的host值
    server_name  localhost;
    
    # 监听请求路径
    location / {
        # 查找目录
        root /source;
        # 默认查找
        index index.html index.htm;
    }
}
复制代码

这里说明一下相关字段前端

server 配置虚拟主机的相关参数，能够有多个
server_name 经过请求中的host值找到对应的虚拟主机的配置
location 配置请求路由，处理相关页面状况
root 查找资源的路径

配置完成后执行 nginx -t 看是否有错误，若是看到的是下面这种就是成功了java

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配置文件webpack

这时候打开浏览器输入 localhost:8080 应该就能看到你的页面了nginx

nginx -t 检查配置文件是否有语法错误
nginx -s reload 向主进程发送信号，从新加载配置文件
nginx -s stop 快速关闭
nginx -s quit 等待工做进程处理完成后关闭web

动态匹配（请求过滤）

一般在开发环境或者测试环境的时候呢咱们修改了代码，由于浏览器缓存，可能不会生效，须要手动清除缓存，才能看到修改后的效果，这里咱们作一个配置让浏览器不缓存相关的资源。后端

location ~* \.(js|css|png|jpg|gif)$ {
    add_header Cache-Control no-store;
}
复制代码

~* \.(js|css|png|jpg|gif)$ 是匹配以相关文件类型而后单独处理。 add_header 是给请求的响应加上一个头信息Cache-Control no-store，告知浏览器禁用缓存，每次都从服务器获取效果以下：api

匹配规则

一般的形式以下

location = / {
    [ configuration A ]
}

location / {
    [ configuration B ]
}

location /documents/ {
    [ configuration C ]
}

location ^~ /images/ {
    [ configuration D ]
}

location ~* \.(gif|jpg|jpeg)$ {
    [ configuration E ]
}
复制代码

= 表示精确匹配。只有请求的url路径与后面的字符串彻底相等时，才会命中（优先级最高）。
^~ 表示若是该符号后面的字符是最佳匹配，采用该规则，再也不进行后续的查找。
~ 表示该规则是使用正则定义的，区分大小写。
~* 表示该规则是使用正则定义的，不区分大小写。

固然咱们还能够经过状态码来过滤请求就像这样

# 经过状态码，返回指定的错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /source/error_page;
}
复制代码

反向代理解决跨域

由于浏览器的同源策略，当前端域名与后端域名不一致的时候致使请求失败。咱们能够经过配置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完成请求。

配置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 比较经常使用的一个功能，可优化资源利用率，最大化吞吐量，减小延迟，确保容错配置，将流量分配到多个后端服务器。

Syntax:	upstream name { ... }
Default: —
Context: stream
复制代码

这里举出经常使用的几种策略

轮询（默认），请求过来后，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; 
        }
    }
}
复制代码

最后

Nginx 的功能还有不少，这里只介绍了几个比较基础、经常使用的，供你们学习和参考，快速入门，搭建出一套可用的环境。

参考连接

参考Nginx官方文档