成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

nginx + 一個(gè)端口 部署多個(gè)單頁應(yīng)用（history模式）

Ilikewhite / 3214人閱讀

摘要：介紹種相同端口部署多個(gè)單頁應(yīng)用前端路由的方法。使用子域名區(qū)分，此種方法最是簡單。子域名訪問時(shí)路徑，盤下面文件為的服務(wù)器目錄。采用與作為區(qū)分，分別表示不同的項(xiàng)目。

目前web開發(fā) 使用一般前后端分離技術(shù)，并且前端負(fù)責(zé)路由。為了美觀，會(huì)采用前端會(huì)采用h5 history 模式的路由。但刷新頁面時(shí)，前端真的會(huì)按照假路由去后端尋找文件。此時(shí)，后端必須返回index（index.html）文件才不至于返回404。

nginx 部署一個(gè)單頁應(yīng)用很簡單： 
   location / {
      root   html;
      try_files $uri /index.html index.html;
   }

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

但如果幾個(gè)單頁應(yīng)用同時(shí)需要部署在同一臺(tái)電腦上，并且都需要占用80或者443端口，就不太容易了。

介紹2種相同ip端口部署多個(gè)單頁應(yīng)用（前端路由）的方法。

使用子域名區(qū)分，此種方法最是簡單。但是限制也大，必須要買域名，或者修改訪問者電腦的hosts文件。

server {
    listen       80;
    server_name  aa.gs.com;  #子域名aa訪問時(shí)
    localtion / {
       root E:/ee; #windows 路徑，E盤下面ee文件為aa.gs.com的服務(wù)器目錄。
       try_files $uri /index.html index.html;
    }
}
server {
   listen       80;
   server_name bb.gs.com; #訪問子域名bb時(shí)。
   location / {
       root   /root/bb; # linux /root/bb文件夾作為服務(wù)器目錄。
       try_files $uri /index.html index.html;
   }

}

采用路徑的第一個(gè)文件夾名字作為區(qū)分。例如：https://aa.com/a/xx 與 https://aa.com/b/xx。采用a與b作為區(qū)分，分別表示不同的項(xiàng)目。
需要設(shè)置點(diǎn)：

前端打包后的文件引用地址，需要加上"/a/" "/b/"為前綴 。比如 (webpack 為設(shè)置publicPath: "/a")

前端的路由路徑必須加上/a/前綴：比如真正地址test.com/ss,需改成test.com/a/ss 

   server {
       listen       80;
       root /root/test; #web服務(wù)器目錄；
       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
       }
      
  }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40201.html

相關(guān)文章

  • nginx + 一個(gè)端口 部署多個(gè)單頁應(yīng)用（history模式）

    摘要：介紹種相同端口部署多個(gè)單頁應(yīng)用前端路由的方法。使用子域名區(qū)分，此種方法最是簡單。子域名訪問時(shí)路徑，盤下面文件為的服務(wù)器目錄。采用與作為區(qū)分，分別表示不同的項(xiàng)目。 目前web開發(fā) 使用一般前后端分離技術(shù)，并且前端負(fù)責(zé)路由。為了美觀，會(huì)采用前端會(huì)采用h5 history 模式的路由。但刷新頁面時(shí)，前端真的會(huì)按照假路由去后端尋找文件。此時(shí)，后端必須返回index（index.html）文件才...

    wemall 評(píng)論0 收藏0

  • nginx + 一個(gè)端口 部署多個(gè)單頁應(yīng)用（history模式）

    摘要：介紹種相同端口部署多個(gè)單頁應(yīng)用前端路由的方法。使用子域名區(qū)分，此種方法最是簡單。子域名訪問時(shí)路徑，盤下面文件為的服務(wù)器目錄。采用與作為區(qū)分，分別表示不同的項(xiàng)目。 目前web開發(fā) 使用一般前后端分離技術(shù)，并且前端負(fù)責(zé)路由。為了美觀，會(huì)采用前端會(huì)采用h5 history 模式的路由。但刷新頁面時(shí)，前端真的會(huì)按照假路由去后端尋找文件。此時(shí)，后端必須返回index（index.html）文件才...

    luoyibu 評(píng)論0 收藏0

  • nginx + 一個(gè)端口 部署多個(gè)單頁應(yīng)用（history模式）

    摘要：介紹種相同端口部署多個(gè)單頁應(yīng)用前端路由的方法。使用子域名區(qū)分，此種方法最是簡單。子域名訪問時(shí)路徑，盤下面文件為的服務(wù)器目錄。采用與作為區(qū)分，分別表示不同的項(xiàng)目。 目前web開發(fā) 使用一般前后端分離技術(shù)，并且前端負(fù)責(zé)路由。為了美觀，會(huì)采用前端會(huì)采用h5 history 模式的路由。但刷新頁面時(shí)，前端真的會(huì)按照假路由去后端尋找文件。此時(shí)，后端必須返回index（index.html）文件才...

    stefan 評(píng)論0 收藏0

  • 前后端分離的一點(diǎn)實(shí)踐

    摘要：怎么做前后端的分離我目前的做法是將作為一種服務(wù)存在，僅需要提供接口即可，前端目前采用，調(diào)用后端，解析數(shù)據(jù)，靜態(tài)頁面。采用，充當(dāng)層，前后端實(shí)現(xiàn)了真正的分離，但還是有點(diǎn)問題的。 什么是前后端分離 對(duì)于這個(gè)問題，其實(shí)可以看看我的學(xué)習(xí)歷程，我覺得很好的體現(xiàn)了Web開發(fā)模式的演化。 石器時(shí)代：那正是本人剛學(xué)JSP的時(shí)候，寫了一個(gè)簡單的商城DEMO，所有的業(yè)務(wù)邏輯，數(shù)據(jù)庫的交互以及Javascri...

    enda 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<