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 发布