nginx + 一個埠 部署多個單頁應用（history模式）

目前web開發 使用一般前後端分離技術，並且前端負責路由。為了美觀，會採用前端會採用h5 history 模式的路由。但重新整理頁面時，前端真的會按照假路由去後端尋找檔案。此時，後端必須返回index（index.html）檔案才不至於返回404。

nginx 部署一個單頁應用很簡單：

   location / {
      root   html;
      try_files $uri /index.html index.html;
   }

root是web伺服器目錄，try_files 為檔案匹配，先找真實的地址($uri)，如果找不到，再找index.html檔案。
#此處注意，history模式不可以使用相對位置引入方式（./）

但如果幾個單頁應用同時需要部署在同一臺電腦上，並且都需要佔用80或者443埠，就不太容易了。

介紹2種相同ip埠部署多個單頁應用（前端路由）的方法。

1. 使用子域名區分，此種方法最是簡單。但是限制也大，必須要買域名，或者修改訪問者電腦的hosts檔案。

   server {
       listen       80;
       server_name  aa.gs.com;  #子域名aa訪問時
       localtion / {
          root E:/ee; #windows 路徑，E盤下面ee檔案為aa.gs.com的伺服器目錄。
          try_files $uri /index.html index.html;
       }
   }
   server {
      listen       80;
      server_name bb.gs.com; #訪問子域名bb時。
      location / {
          root   /root/bb; # linux /root/bb資料夾作為伺服器目錄。
          try_files $uri /index.html index.html;
      }
   
   }
   

2. 採用路徑的第一個資料夾名字作為區分。例如：https://aa.com/a/xx 與 https://aa.com/b/xx。採用a與b作為區分，分別表示不同的專案。
   需要設定點：

   1. 前端打包後的檔案引用地址，需要加上`/a/` `/b/`為字首 。比如 <script scr="/a/test.js"></script>(webpack 為設定publicPath: `/a`)
   2. 前端的路由路徑必須加上/a/字首：比如真正地址test.com/ss,需改成test.com/a/ss

      server {
          listen       80;
          root /root/test; #web伺服器目錄；
          location ^~ /a/{
            try_files $uri /a/index.html;  #如果找不到檔案，就返回 /root/test/a/index.html
          }
          location ^~ /b/{
           try_files $uri /b/index.html; #如果找不到檔案，就返回 /root/test/b/index.html
          }
         
     }