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 發佈