前端须要掌握的Nginx知识点

时间  2019-11-17
标签 前端 须要 掌握 nginx 知识 栏目 Nginx 繁體版
原文   原文链接

一直想整理Nginx的知识点而且从新学习一下，正好看见《前端想要了解的Nginx》 juejin.im/post/5cae9d… 这篇文章，所以参考这篇文章，作一个学习笔记，供之后学习。

什么是Nginx?

Nginx是一款免费开源的高性能HTTP服务器以及反向代理服务器（Reverse Proxy）,同时能够提供IMAP/POP3/SMATP代理服务等功能。可以快速的响应静态页面请求和支持第三方功能模块扩展。javascript

Nginx的优势

  • 高并发、高性能（官方给出的并发数据5万，实际中能够达到2-4万）
  • 轻量级、内存消耗少
  • 稳定性高，宕机几率低
  • 支持热部署
  • 模块化设计，扩展性较好
  • cpu亲和

Nginx经常使用的场景

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

Nginx的安装配置

详细的安装教程能够参考这篇文章 www.zhuxiaodong.net/2016/config…php

Nginx经常使用的命令

  • 查看版本号
nginx  -v 
复制代码
  • 查看nginx 编译的参数
nginx -V
复制代码
  • 优雅重启，并从新载入配置文件nginx.conf
/usr/local/nginx/sbin/nginx  -s  reload
复制代码
  • 优雅中止nginx，有链接时会等链接请求完成再杀死worker进程
/usr/local/nginx/sbin/nginx  -s  quit
复制代码

具体经常使用的命令参考以下：css

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 这个命令html

有些时候当你运行前端

/usr/local/nginx/sbin/nginx -s  stop
复制代码

会报错： java

在这里插入图片描述
上面的报错为在logs目录发现确实没有nginx.pid文件，那么此时想到的即是检查如下配置文件，生成nginx.pid文件。此时的解决方法为： 

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
复制代码

即可以解决此问题。webpack

Nginx的默认配置

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

其中nginx.conf中的配置信息以下：web

 #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路径与后面的字符串彻底相等时，才会命中（优先级最高）。
  • ^~ 表示若是该符号后面的字符是最佳匹配，采用该规则，再也不进行后续的查找。
  • ~ 表示该规则是使用正则定义的，区分大小写。
  • ~* 表示该规则是使用正则定义的，不区分大小写。
  • / 通用匹配，任何请求都会匹配到

最后总结:

  1. 先判断精准命中，若是命中，当即返回结果并结束解析过程
  2. 判断普通命中，若是有多个命中，记录下来最长的命中结果
  3. 若是是^~开头的命中，则不会继续搜索正则命中，可是会继续搜索通常命中
  4. 继续判断正则表达式的解析结果，按配置里的正则表达式顺序为准，由上到下开始匹配，一旦匹配成功马上返回结果，并结束解析过程。
  5. 普通命中：顺序无所谓，是由于按命中长短来肯定的
  6. 正则命中：顺序有所谓，由于是从前日后命中的

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

# 经过状态码，返回指定的错误页面
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; 
        }
    }
}
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程