Skip to main content

Nginx 及反向代理的实现

一、Nginx 的定义​

Nginx 是一个轻量级的 Web 服务器，常用于服务端的反向代理和负载均衡。

1、Nginx 的特点​

  • 跨平台、配置简单；
  • 占用内存少、启动速度快、并发能力强；
  • 稳定性高，宕机的概率小；

2、Web 服务器与应用服务器​

  • Web 服务器：负责处理和响应用户请求，一般也称为 HTTP 服务器，如 Apache、IIS、Nginx

  • 应用服务器：存放和运行系统程序的服务器，负责处理程序中的业务逻辑，如 Tomcat、Weblogic、Jboss（现在大多数应用服务器也包含了 Web 服务器的功能）

3、正/反向代理与负载均衡​

3-1、正向代理​

代理是在服务器和客户端之间假设的一层服务器，代理将接收客户端的请求并将它转发给服务器，然后将服务端的响应转发给客户端。

正向代理是一个位于客户端和原始服务器 (origin server) 之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标 (原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。

  • 正向代理为客户端服务，客户端可以根据正向代理访问到它本身无法访问到的服务器资源；
  • 正向代理对客户端透明，对服务端非透明，即服务端不知道自己收到的是来自代理的访问还是来自真实客户端的访问。

3-2、反向代理​

反向代理（Reverse Proxy）指以代理服务器来接受 internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 internet 上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

  • 反向代理为服务端服务，可以帮助服务器接收来自客户端的请求，帮助服务器做请求转发，负载均衡等；
  • 反向代理对服务端透明，对客户端非透明，即客户端并不知道自己访问的是代理服务器，而服务器知道反向代理在为他服务。

3-3、负载均衡​

当请求数过大时，为了避免服务器崩溃，通过会使用负载均衡的方式来分担服务器压力，增加服务器的数量，当用户访问时，先访问到一个转发服务器，再由转发服务器将访问分发到压力更小的服务器上。

二、Nginx 实现反向代理​

1、安装及配置​

安装：

brew install nginx

2、修改配置方式​

配置路径：

访达 shift + cmd + G 复制：

/usr/local/etc/nginx/nginx.conf

M1：

/opt/homebrew/etc/nginx/nginx.conf

3、启动命令​

# 启动
nginx

# 重启
nginx -s reload

# 停止
nginx -s stop

4、反向代理操作​

继前面 Session 做登录验证的代码，点击查看完整前后端代码

运行：

# 任意目录 启动 redis
redis-server

# server 项目下启动 server
yarn dev

# 前端项目下启动静态页面项目
yarn start

静态项目页面运行在 8001 环境：

服务运行在 7676 环境：

前端 8001 环境调用服务端 7676 环境的接口时，会出现跨域的报错：

可以使用 Nginx 进行反向代理，当访问 7878 环境时，不带 /api/ 则代理到静态页面 8001，带 /api/ 则代理到服务端 7676（前端代码中修改为访问 7878 的接口），步骤如下 ▼

首先修改 nginx.conf：

http {
    server {
        listen       80;
        listen       7878;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   html;
            index  index.html index.htm;
        }
        
        # 如果访问地址是 / 开头（静态页面），则代理到 8001
        location / {
            proxy_pass http://localhost:8001;  # 反向代理
        }
        
        # 如果访问地址是 /api/ 开头（Server），则代理到 7676
        location /api/ {
            proxy_pass http://localhost:7676;  # 反向代理
            proxy_set_header Host $host;  # 代理后 host 不一致，因此要把 host 透传过去
        }

        #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;
        }
    }
    include servers/*;
}

运行 nginx -t 检查语法：

运行 nginx 启动 Nginx。

访问 7878 的前端页面：

调用 7878 的接口：

除了使用 Nginx 实现跨域，还可以直接使用 CORS 的方式实现。

点击查看所有跨域实现方式汇总