关于javascript:Nginx从入门到实践-记一篇nginx-同一端口下部署多个vue项目

前言

Nginx 是什么

Nginx (engine x) 是一个应用 c 语言开发的轻量级、高性能的 http 及反向代理服务器。由俄罗斯的程序设计师 Igor Sysoev 所开发，官网测试 nginx 可能支撑持 5 万并发链接，并且 cpu、内存等资源耗费却非常低，运行十分稳固。nginx 网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

Nginx 能做什么

• HTTP 服务器（动静拆散）

 Nginx 能够作为动态页面的 web 服务器，同时还反对 CGI 协定的动静语言，比方 perl、php 等。示例（mac 本地配置）：server {  
       listen          8080;  
       server_name     127.0.0.1;  
       # 拜访 http://127.0.0.1:8080/assets
       # 相当于拜访
       # http://127.0.0.1:8080/data/huodong/src/assets
       location /assets {  
          root /data/huodong/src/
          autoindex on;     # 列出目录文件列表
      }
      # 拜访 127.0.0.1:8080，则加载 huodong 我的项目
     location / {  
        index index.html;  
        root /data/huodong/dist/;
     } 
  }  

• 反向代理

 反向代理，其实客户端对代理是无感知的，因为客户端不须要任何配置就能够拜访，咱们只须要将申请发送到反向代理服务器，由反向代理服务器去抉择指标服务器获取数据后，在返回给客户端，此时反向代理服务器和指标服务器对外就是一个服务器，裸露的是代理服务器地址，暗藏了实在服务器 IP 地址。示例（mac 本地配置）：应用 nginx 反向代理，拜访 www.huodong.com 间接跳转到 127.0.0.1:8080 
   1. 本机需配置 hosts：sudo vi /etc/hosts
     192.168.1.106 www.huodong.com
   2. nginx 配置  
   server {
        listen       80;
        server_name  www.huodong.com; 
        location / {
            # 192.168.1.106 为本机 ip，拜访 www.huodong.com 的时候，通过 proxy_pass 代理到了本机 ip 的 80 端口上
            proxy_pass  http://192.168.1.106;
            index  index.html index.htm;
        }
  }

• 负载平衡

 负载平衡也是 Nginx 罕用的一个性能，当一台服务器的单位工夫内的访问量越大时，服务器压力就越大，大到超过本身承受能力时，服务器就会解体。为了防止服务器解体，让用户有更好的体验，咱们通过负载平衡的形式来分担服务器压力。保障服务器集群中的每个服务器压力趋于均衡，分担了服务器压力，防止了服务器解体的状况。负载平衡配置个别都须要同时配置反向代理，通过反向代理跳转到负载平衡。示例（mac 本地配置）：应用 nginx 配置负载平衡，次要用到了 upstream、proxy_pass，负载平衡调配策略次要有以下几种：1. 轮询
        upstream upstream_huodong {
          server 192.168.1.106:8001;
          server 192.168.1.106:8002;
        }
     2. 权重
       upstream upstream_huodong {
          server 192.168.1.106:8001 weight=1;
          server 192.168.1.106:8002 weight=2;
        }
     3.iphash
       upstream upstream_huodong {
          iphash;
          server 192.168.1.106:8001 weight=1;
          server 192.168.1.106:8002 weight=2;
        }
     4. 起码连贯 (least_conn)
        upstream upstream_huodong {
          least_conn;
          server 192.168.1.106:8001 weight=1;
          server 192.168.1.106:8002 weight=2;
        }
     5. 响应工夫 (fair)
       upstream upstream_huodong {
          server 192.168.1.106:8001 weight=1;
          server 192.168.1.106:8002 weight=2;
          fair;
        }
   拜访 www.huodong.com，nginx 会把咱们的申请摊派到多个服务上
   1. 本机需配置 hosts：sudo vi /etc/hosts
     192.168.1.106 www.huodong.com
   2. 在本地新建测试目录文件
      mkdir huodong1 
      touch index.html (I im huodong1)
       
      mkdir huodong2 
      touch index.html (I im huodong2)
         
       
   3. nginx 配置  
   server {
        listen       80;
        server_name  www.huodong.com; 
        localtion / {
           # http://upstream_huodong 为下面的调配策略
           proxy_pass http://upstream_huodong;
        }
    }
    server {
          listen       8001;
          server_name  localhost; 
          localtion / {
              index index.html;  
              root /data/huodong1/;
          }
    }
    server {
          listen       8002;
          server_name  localhost; 
          localtion / {
              index index.html;  
              root /data/huodong2/;
          }
    }
   这样拜访 www.huodong.com，nginx 就会依据咱们的调配策略把申请别离打到 2 个服务下面。

• 正向代理

 正向代理服务器位于客户端和服务器之间，为了向服务器获取数据，客户端要向代理服务器发送一个申请，并指定指标服务器，代理服务器将指标服务器返回的数据转交给客户端。

注释

应用 Nginx 在同一端口下部署多个 vue 我的项目

比方咱们一个域名端口下有多个我的项目，都是流动相干的，不必每个我的项目都独自起一个端口。示例：

http://localhost:80/huodong1  拜访 huodong1 我的项目
http://localhost:80/huodong2  拜访 huodong2 我的项目 

##### 1. 我的项目配置

• huodong1

vue2.0 router.js 配置

    new Router({routes, mode: 'history', base: '/huodng1'});

vue.config.js 配置

    const cdnDomain = '/huodong1'
    module.exports = {publicPath:  process.env.ENV === 'production' ? cdnDomain : '/'}

• huodong2

vue3.0 router.js 配置

    createRouter({history: createWebHistory('/huodong2'),
      routes
    })

vue.config.js 配置

    const cdnDomain = '/huodong1'
    module.exports = {publicPath:  process.env.ENV === 'production' ? cdnDomain : '/'}

打包实现后，查看 dist 文件下，对应资源目录是否正确增加 huodong1/huodong2。

2. Nginx 配置

nginx 的目录地位 
cd /usr/local/nginx/conf
vim nginx.conf

server {
        listen       80; # 监听的端口号
        server_name  localhost; # ip 域名

        location / {
            root   html;
            index  index.html index.htm;
        }
        
      
        location  /huodong1/ {
            add_header Cache-Control no-cache;
            add_header Cache-Control private;
            # huodong1 服务器文件目录
            # 应用 alias 时，开端必须加 '/'，否则找不到文件
            alias  /code/huodong1/dist/; 
            # 这里是须要留神的，vue 官网给的是
            # try_files $uri $uri/ /index.html;
            # 这样写刷新的时候加载不到咱们的动态资源
            try_files $uri $uri/ /huodong1/index.html;
        }

        location /huodong2/ {
            add_header Cache-Control no-cache;
            add_header Cache-Control private;
            alias  /code/huodong2/dist/; #huodong2 服务器文件目录
            try_files $uri $uri/ /huodong2/index.html;
        }
        
}

nginx -s reload    
重启 nginx
这样就功败垂成了！

总结

上述只是通过一个日常开发的小例子，心愿可能引起宽广前端童靴对 Niginx 的趣味。事实上，Nginx 不仅仅局限于这些渺小的工作，在理论生产中作用其实更加微小。对于有志于“大前端”的童靴，理解和相熟 Nginx 相对是必修技能之一。

本文由博客群发一文多发等经营工具平台 OpenWrite 公布