介绍

知识网络结构图

图-1 （图片来源于网络）
Nginx是一个高性能的HTTP和反向代理服务器，特点是占用内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好。
nginx专为性能优化而开发，性能是其最重要的要求，十分注重效率，有报告nginx能支持高达50000 个并发连接数。

代理
正向代理

局域网中的电脑用户想要直接访问网络是不可行的，只能通过代理服务器来访问，这种代理服务就被称为正向代理。

图-2 （图片来源于网络）
反向代理

客户端无法感知代理，因为客户端访问网络不需要配置，只要把请求发送到反向代理服务器，由反向代理服务器去选择目标服务器获取数据，然后再返回到客户端，此时反向代理服务器和目标服务器对外就是一个服务器，暴露的是代理服务器地址，隐藏了真实服务器IP地址
图-3 （图片来源于网络）

动静分离

为了加快网站的解析速度，可以把动态页面和静态页面交给不同的服务器来解析，加快解析的速度，降低由单个服务器的压力

  1. 动静分离之前的状态

图-4（图片来源于网络）
2. 动静分离之后
图-5（图片来源于网络）

安装

nginx下载地址 下载完成后直接解压放在指定的目录即可

  1. # 在 nginx 根目录下执行
  2. ./nginx -v # 检查是否正常输出版本号

启动

  1. # 启动有三种方式
  2. ./nginx # 直接回车
  3. start nginx # 或者双击 nginx.exe 文件

停止

  1. ./nginx -s stop 
  2. ./nginx -s quit

重启

  1. ./nginx -s reload

全局使用 nginx

image.png

配置

配置文件

  2. #user  nobody;
  3. worker_processes  1; 
  5. #error_log  logs/error.log;
  6. #error_log  logs/error.log  notice;
  7. #error_log  logs/error.log  info;
  9. #pid        logs/nginx.pid;
  12. events {
  13.   worker_connections  1024;
  14. }
  17. http {
  18.   include       mime.types;
  19.   default_type  application/octet-stream;
  21.   #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  22.   #                  '$status $body_bytes_sent "$http_referer" '
  23.   #                  '"$http_user_agent" "$http_x_forwarded_for"';
  25.   #access_log  logs/access.log  main;
  27.   sendfile        on;
  28.   #tcp_nopush     on;
  30.   #keepalive_timeout  0;
  31.   keepalive_timeout  65;
  33.   #gzip  on;
  35.   server {
  36.     listen       8081;
  37.     server_name  localhost;
  38.   }
  41.   # another virtual host using mix of IP-, name-, and port-based configuration
  43.   # 县域项目
  44.   server {
  45.     listen       8080;
  46.     server_name  localhost;
  47.     location / {
  48.       #    root   D:/work/authine/xianyu_project_frontEnd/newVersion/6.5.4/entries/portal/dist;
  49.       root   D:/work/authine/shaoxing/newversion/6.3.32/entries/portal/dist;
  50.       index  index.html index.htm;
  51.       #    index  graph-label-overlap.html graph-label-overlap.htm;
  52.     }
  54.     location /api/ {
  55.       proxy_pass https://jcjd.sx.gov.cn/;
  56.     }   
  57.   }
  59.   # HTTPS server
  60.   #
  61.   #server {
  62.   #    listen       443 ssl;
  63.   #    server_name  localhost;
  65.   #    ssl_certificate      cert.pem;
  66.   #    ssl_certificate_key  cert.key;
  68.   #    ssl_session_cache    shared:SSL:1m;
  69.   #    ssl_session_timeout  5m;
  71.   #    ssl_ciphers  HIGH:!aNULL:!MD5;
  72.   #    ssl_prefer_server_ciphers  on;
  74.   #    location / {
  75.   #        root   html;
  76.   #        index  index.html index.htm;
  77.   #    }
  78.   #}
  80. }

说明

从上面的配置文件可以大致分为http、events等模块配置项，接下来主要看http模块中的sever模块。

  1. server {
  2.   listen       8082;
  3.   server_name  localhost;
  4.   location / {
  5.     #    root   D:/work/authine/xianyu_project_frontEnd/newVersion/6.5.4/entries/portal/dist;
  6.     root   D:/work/authine/shaoxing/newversion/6.3.32/entries/portal/dist;
  7.     index  index.html index.htm;
  8.     #    index  graph-label-overlap.html graph-label-overlap.htm;
  9.   }
  11.   location /api/ {
  12.     proxy_pass https://jcjd.sx.gov.cn/;
  13.   }   
  14. }

listen

监听的端口号，当访问到 listen 监听的端口号时会触发相关的指令，如：listen 8080;

server_name

域名(主机名)：如: 本地 server_name localhost; 百度 server_name www.baidu.com

location

定位资源，如：’/ ‘， location 命中 ‘/‘ 则触发 ‘/‘ 配置的行为；如：location 命中 ‘/api/‘ 则触发 ‘/api/‘ 配置的行为；location url 修饰符如下表：

修饰符 说明
= 用于不含正则表达式的 url 前，要求字符串与 url 严格匹配，匹配成功就停止向下搜索并处理请求
~ 用于表示 url 包含正则表达式，并且区分大小写
~* 用于表示 url 包含正则表达式，并且不区分大小写
^~ 用于不含正则表达式的 url 前，要求 nginx 服务器找到表示 url 和字符串匹配度最高的location 后，立即使用此 location 处理请求，而不再匹配
如果有 url 包含正则表达式，不需要有~开头标识

location 配置

配置项 配置说明
root 资源的根目录
index 指定根文件，可以是多个
proxy_pass 代理地址

配置注意项：

  1. location /api/ {
  2.   proxy_pass https://jcjd.sx.gov.cn/;
  3. }
  1. location /api/ {
  2.   proxy_pass https://jcjd.sx.gov.cn;
  3. }

上面两段代码的区别是，proxy_pass代理后面的配置有无 ‘/‘，如果访问地址为 localhost: 8080/api/，转发地址末尾不带 ‘/‘ 则实际转发到 https://jcjd.sx.gov.cn/api/ 如果带斜杠实际转发到 https://jcjd.sx.gov.cn/，注意区别。

其他相关配置查看官网文档即可。

实际应用

一、打包后项目测试

如下配置：

  1. server {
  2.   listen       8080;
  3.   server_name  localhost;
  4.   location / {
  5.     #    root   D:/work/authine/xianyu_project_frontEnd/newVersion/6.5.4/entries/portal/dist;
  6.     root   D:/work/authine/shaoxing/newversion/6.3.32/entries/portal/dist;
  7.     index  index.html index.htm;
  8.     #    index  graph-label-overlap.html graph-label-overlap.htm;
  9.   }
  11.   location /api/ {
  12.     proxy_pass https://jcjd.sx.gov.cn;
  13.   }   
  14. }

配置说明：

  1. root 指定了资源目录，index指定了入口文件，root和index主要用来指定资源。
  2. 当主机 （域名 或 ip）访问根目录时，则会返回静态资源（即 root 和 index 指定的资源）
  3. 当访问路径中出现 ‘/api/‘ 则会将命中的路径 拉到proxy_pass后面。如：

路径中出现 /api/authine/getMomey/001，proxy_pass 如果无 ‘/‘，
则转发地址 https://jcjd.sx.gov.cn/api/authine/getMomey/001
如果有 ‘/‘ 则转发地址 https://jcjd.sx.gov.cn/authine/getMomey/001

二、开发环境代理

在云枢系统中使用了devServer.proxy 配置项处理反向代理。 当项目跑起来后发现，代理出了问题，需要在 .env.debug文件中修改配置重启项目，云枢项目重启很慢。建议使用 nginx代理。
首先注释掉 devServer.proxy的配置。nginx配置如下：

  1. server {
  2.   listen       8083;
  3.   server_name  localhost;
  4.   location / {
  5.     proxy_pass http://localhost:9100;
  6.   }
  8.   location ^~ /api/ {
  9.     proxy_pass https://jcjd3.sjw.qz.gov.cn/api/api/;
  10.   }   
  12.   location /externalLink/ {
  13.     proxy_pass https://jcjd3.sjw.qz.gov.cn/api;
  14.   }   
  16.   location /ext/ {
  17.     proxy_pass https://jcjd3.sjw.qz.gov.cn/api;
  18.   }  
  20.   location /apis/ {
  21.     proxy_pass https://jcjd3.sjw.qz.gov.cn/;
  22.   }  
  24.   location /v1/ {
  25.     proxy_pass https://jcjd3.sjw.qz.gov.cn/;
  26.   }   
  27. }

针对像县域项目服务多的情况，配置不同的端口号即可。访问指定的端口号即可，如下图所示：
image.png
当我们访问端口为 8083 根目录时，直接转发给了 http://localhost:9100 测试服务。

问题排查

问题一： 如下图所示出现如下报错，反向代理出现问题，请查看相关接口地址
image.png
可以通过postman修改路径确认路径哪里出现了问题，找到原因后修改nginx文件并重启。postman测试如下图所示：
image.png

相关资料

nginx 中文文档
nginx 菜鸟教程
location 配置