Nginx配置后端接口转发(API)、前端（Vue，React）项目部署基础配置

nginx的特点

• 更快：
  • 单次请求会得到更快的响应。
  • 在高并发环境下，Nginx 比其他 WEB 服务器有更快的响应。
• 高扩展性：
  • Nginx 是基于模块化设计，由多个耦合度极低的模块组成，因此具有很高的扩展性。许多高流量的网站都倾向于开发符合自己业务特性的定制模块。
• 高可靠性：
  • Nginx 的可靠性来自于其核心框架代码的优秀设计，模块设计的简单性。另外，官方提供的常用模块都非常稳定，每个 worker 进程相对独立，master 进程在一个 worker 进程出错时可以快速拉起新的 worker 子进程提供服务。
• 低内存消耗：
  • 一般情况下，10000个非活跃的 HTTP Keep-Alive 连接在 Nginx 中仅消耗 2.5MB 的内存，这是 Nginx 支持高并发连接的基础。
  • 单机支持10万以上的并发连接：理论上，Nginx 支持的并发连接上限取决于内存，10万远未封顶。
• 热部署:
  • master 进程与 worker 进程的分离设计，使得 Nginx 能够提供热部署功能，即在 7x24 小时不间断服务的前提下，升级 Nginx 的可执行文件。当然，它也支持不停止服务就更新配置项，更换日志文件等功能。
• 最自由的 BSD 许可协议:
  • 这是 Nginx 可以快速发展的强大动力。BSD 许可协议不只是允许用户免费使用 Nginx ，它还允许 用户在自己的项目中直接使用或修改 Nginx 源码，然后发布。

nginx配置前端静态页面代码

• nginx的html目录中创建一个自己命名的文件夹，我在html文件夹下创建了screen和report文件夹。
• 直接看配置文件内容：
• 输入 http://192.168.18.131/即可直接访问screen内容。

 server {
        listen       80; #监听端口
        server_name  localhost; #本机192.168.18.131，也就是localhost

        #charset koi8-r;

        #access_log  logs/host.access.log  main; #日志

        location / {
            root   html/screen/; #screen是我创建的文件夹，用来放置前端解压后的代码文件
        proxy_connect_timeout 3s;
        proxy_read_timeout 5s;
        proxy_send_timeout 3s;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;#刷新页面的时候需要此配置，不配置刷新页面找不到页面
        }
}

• 问题来了，如果我要配置多个前端项目，比如PC端，H5，钉钉等
• 输入 http://192.168.18.131/report/ 访问report文件下的网页内容
• alias配置如下

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/screen/;
        proxy_connect_timeout 3s;
        proxy_read_timeout 5s;
        proxy_send_timeout 3s;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }

        location /report {
            alias   html/report/;
        proxy_connect_timeout 3s;
        proxy_read_timeout 5s;
        proxy_send_timeout 3s;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
       }
   }

• 使用alias一定要注意的几个点：
  • 目录名后面要加 /，否则找不到文件。
  • alias只能位于location块中。

nginx配置后端接口

• 输入 http://192.168.18.131/ding/ yuqihai访问http://web-dingtalk.wuhu.xip.io/yuqihai接口

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/screen/;
        proxy_connect_timeout 3s;
        proxy_read_timeout 5s;
        proxy_send_timeout 3s;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }

        location /report {
            alias   html/report/;
        proxy_connect_timeout 3s;
        proxy_read_timeout 5s;
        proxy_send_timeout 3s;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
       }
        
       location /ding/ {
        proxy_pass http://web-dingtalk.wuhu.xip.io/;#注意这里/和不加/区别很大哟
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
}

• proxy_pass http://web-dingtalk.wuhu.xip.io 则转发到http://web-dingtalk.wuhu.xip.io/ding/yuqihai