[部署01] Nginx

1,303 阅读7分钟

导航

[深入01] 执行上下文
[深入02] 原型链
[深入03] 继承
[深入04] 事件循环
[深入05] 柯里化 偏函数 函数记忆
[深入06] 隐式转换 和 运算符
[深入07] 浏览器缓存机制(http缓存机制)
[深入08] 前端安全
[深入09] 深浅拷贝
[深入10] Debounce Throttle
[深入11] 前端路由
[深入12] 前端模块化
[深入13] 观察者模式 发布订阅模式 双向数据绑定
[深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[深入19] 手写Promise
[深入20] 手写函数

[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程
[源码] Redux React-Redux01

前置知识

一些单词

Legacy:遗产,历史
( Legacy versions 历史版本 )

Stable:稳定的
( Stable versions 稳定版本 )

正向代理 ----------- 代理客户端

  • ( 正向代理 ) 是位于 ( 客户端 ) 和 ( 源服务器 ) 之间的 ( 服务器 )
  • 客服端请求 -> 代理服务器 -> 源服务器
  • 隐藏客户端:由代理服务器代替客户端去访问目标服务器,用户需要设置代理服务器的IP和端口

正向代理的作用

  1. 翻墙:绕过无法访问的结点,从另外一条路由路径进行目标服务器的访问;
    • a无法访问到国外的b,通过国外的c,a访问c,c转发访问b
  2. 缓存:将数据缓存在代理服务器上,如果客户端请求的内容在缓存中则不去访问目标主机
  3. 权限控制:防火墙授权代理服务器访问权限,客户端通过正向代理可以通过防火墙
  4. 隐藏客户端:通过正向代理配置,目标服务器无法获取真实客户端信息,只能获取到代理服务器的信息

反向代理 ----------- 代理服务端

  • 隐藏服务端身份:也是中间服务器,隐藏服务端身份,对于客服端会认为反响代理服务器就是访问的目标服务器

反向代理的作用

  • 隐藏服务端:出于安全的考虑,我们不想把 Server 直接暴露出来,而是放在内网中。这时 Client 在外网无法就无法 Server 了。因此,我们就可以添加一台中间服务器,连接内外网,这样就可以允许外网用户访问,同时可作为防火墙对外部请求进行限制,提高内部服务器的安全性。
  • 负载均衡:根据目标服务器的工作负荷情况,将请求分发到合适的服务器。

Nginx

下载安装

nginx下载地址

  • stable version 是稳定版本
  • lagacy version 是历史版本
  • 下载完成,解压,点击nginx.exe则安装成功

nginx命令行

start nginx 开机

nginx -s signal ------------------- 调用可执行文件来执行
nginx -s stop:快速关闭,可能不保存相关信息,并关闭web服务
nginx -s quit:正常关闭,保存相关信息,并关闭web服务
nginx -s reload:重新加载配置文件,例如改变了配置
nginx -s reopen:重新打开日志文件

nginx -c filename:为nginx指定一个配置文件,来代替却省的
nginx -t:不运行,而是仅仅测试配置文件,检查配置文件语法的正确性,并尝试打开配置文件中引用的文件
nginx -v:显示nginx的版本
nginx -V:显示nginx的版本,编译器版本,配置参数
注意事项

(1)
taskkill /fi "imagename eq nginx.EXE" /f -------------------- 可以在windows下关闭所有nginx进程

(2)
.\nginx.ext -s stop ----------------------------------------- 在windows下使用命令需要加 .\

nginx.config 文件

  • main:ngnix的全局配置,对全局生效
    • events:配置影响nginx服务器或与用户的网络连接
    • http:可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。
      • upstream:配置后端服务器具体地址,负载均衡配置不可或缺的部分。
      • server:配置虚拟主机的相关参数,一个http中可以有多个server。
        • listen:端口号
        • server_name:主机名
        • location:配置请求的路由,以及各种页面的处理情况。
          • root
          • index
          • proxy_pass

#user  nobody;
#user  name name; ------------------------------------------------- 定义Nginx运行的用户和用户组

worker_processes  1;
#worker_process: 1; ----------------------------------------------- nginx进程数,通常设置成和cpu的数量相等


#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#-------------------------------------- 全局错误日志定义类型,[debug | info | notice | warn | error | crit]

#pid        logs/nginx.pid;
#-------------------------------------- 进程pid文件

events {
    worker_connections  1024;
    #单个进程最大连接数( 最大连接数 = 连接数 * 进程数 )
    #单个进程最大连接数( 最大连接数 = worker_connections * worker_processes )
    #根据硬件调整,和前面工作进程配合起来用,尽量大,但是别把cup跑到100%就行。
    
    keepalive_timeout 60;
    #connection: keepalive ------------ 超时时间;http1.1中引入了建立长连接
}

#设定http服务器,利用它的反向代理功能提供负载均衡支持
http {
    #文件扩展名与文件类型映射表
    include       mime.types;
    
    #默认文件类型
    default_type  application/octet-stream;

    #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        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        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       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        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;
    #    }
    #}

}

nginx配置静态资源

  • 只需要在 ( http -> servers -> location -> root ) 中配置即可
  • ( root ) 的设置可以是 ( 绝对路径也可以是相对路径 )
  • ( 相对路径 ) 如果要表示层级使用 ( ./ ) 而不是 ( ../ )
http {
    server {
        #listen 8080;表示端口
        listen       8080;
        
        #server_name  localhost;表示主机名
        server_name  localhost;

        location / {
            root  ./static;
            # root  D:/nginx/nginx-1.14.2/static;
            # 注意:相对路径层级是 ( ./  ) 而不是 ( ../ )
        }
    }
}

通过以上配置后:
访问:http://localhost:8080/image/a.png 即可访问到static/image/a.png

反向代理

  • 通过设置 ( http -> server -> location -> proxy_pass ) 实现反向代理
  • proxy_pass
    server {
        listen 8080;
        server_name  localhost;

        location / {
            #root  D:/nginx/nginx-1.14.2/static;
            
            # proxy_pass 将http://localhost:8080反向代理到http://localhost:3000
            proxy_pass  http://localhost:3000;
        }
    }

动静分离

  • 在nginx中的 ( http -> server -> location 后面加上 ~ 表示正则匹配 )
  • ~ 在nginx中表示正则匹配,后面可以跟上正则表达式
http {
    server {
        listen       8080;
        server_name  localhost;

        location / {
            proxy_pass  http://localhost:3000;
        }
    }

    server {
        listen          9090;
        server_name     localhost;
        location ~ \.(jpg|png|jpeg|gif)$ {
            root    ./static/image;
        }
    }
}
说明:
(1) 动态资源和静态资源的分离,nginx服务器主要用来赋值静态资源
(2) 动态资源 - 反向代理 - 当访问localhost:8080时会被反向代理到http://localhost:3000;
(3) 静态资源 - 当访问localhost:9090/a.png时会被映射到 static/image/a.png
(4) location 后面的 ~ 表示后面是正则表达式

负载均衡

  • 负载均衡:根据目标服务器的工作负荷情况,将请求分发到合适的服务器。
  • 主要设置 ( ( http -> upstream ) 和 ( http -> server -> location -> proxy_pass ) )

负载均衡的几种策略

  1. 轮询 (默认),请求过来后,Nginx 随机分配流量到任一服务器
  2. ( weight=number ) 设置服务器的 ( 权重 ),默认为1,权重大的会被优先分配
  3. ip_hash 保持会话,保证同一客户端始终访问一台服务器。
http: {
    # upstream 用于设置负载均衡
    # backend是一个名字,在 server -> loaction -> proxy_pass 中也要设置
    # weight=4表示权重,默认值是1,数字越大表示被访问到的概率越大
    # 这里的 localhost 和 127.0.0.1 是一样的
    upstream backend {
        server localhost:7000;
        server 127.0.0.1:8000 weight=4;
        server localhost:9000;
    }
    
    server {
        listen 80;
        server_name localhost;
        
        location / {
            # 注意:这里http://backend;中的http://别忘记写了
            # backend就是在upstream中的设置的名字 backend
            proxy_pass http://backend;
        }
    }
}

资料

blog.csdn.net/wnvalentin/…
nginx.config文件详解 juejin.cn/post/684490…
参考 lufficc.com/blog/nginx-…
参考2 juejin.cn/post/684490…