导航

[深入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
[源码] axios
[源码] vuex
[源码-vue01] data响应式 和 初始化渲染
[源码-vue02] computed 响应式 - 初始化，访问，更新过程
[源码-vue03] watch 侦听属性 - 初始化和更新
[源码-vue04] Vue.set 和 vm.$set
[源码-vue05] Vue.extend

[源码-vue06] Vue.nextTick 和 vm.$nextTick

前置知识

一些单词

Legacy：遗产，历史
( Legacy versions 历史版本 )

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

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

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

正向代理的作用

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

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

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

反向代理的作用

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

image
image image

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;
    #    }
    #}

}

image

nginx配置静态资源

• 只需要在 ( <font color=red>http -> servers -> location -> root </font> ) 中配置即可
• ( <font color=red>root</font> ) 的设置可以是 ( <font color=red>绝对路径也可以是相对路径</font> )
• ( 相对路径 ) 如果要表示层级使用 ( <font color=red>./</font> ) 而不是 ( <font color=red>../</font> )

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

反向代理

• 通过设置 ( <font color=red>http -> server -> location -> proxy_pass</font> ) 实现反向代理
• 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中的 ( <font color=red>http -> server -> location 后面加上 ~ 表示正则匹配</font> )
• ~ 在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 后面的 ~ 表示后面是正则表达式

负载均衡

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

负载均衡的几种策略

1. <font color=red>轮询</font> （默认），请求过来后，Nginx 随机分配流量到任一服务器
2. ( <font color=red>weight=number</font> ) 设置服务器的 ( <font color=red>权重</font> )，默认为1，权重大的会被优先分配
3. <font color=red>ip_hash</font> 保持会话，保证同一客户端始终访问一台服务器。

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;
        }
    }
}

image

资料

https://blog.csdn.net/wnvalentin/article/details/88171847
nginx.config文件详解 https://juejin.im/post/6844903741678698510
参考 https://lufficc.com/blog/nginx-for-beginners
参考2 https://juejin.im/post/6844903816521842702#heading-7