如何在NGINX中部署多個前端專案

2021-09-24 22:12:41 字數 2478 閱讀 4653

nginx中單設定乙個web前端很容易,改變埠,改變root指向基本就搞定了,那麼,假設我們有多個前端專案部署在同乙個網域名稱下,該怎麼設定呢?

1. 先假設我們有乙個應用,http://domain就可以訪問了, 現在改版了希望可以訪問舊的應用http://domain,同時也可以通過http://domain/new訪問新應用,那麼首先第一步就是需要對新的前端專案進行一些配置。

a. 在vue.config.js中設定 publicpath: '/new/',

b. 在路由index.js中設定   base:'/new/',

c. 在index.html中加入

2. 修改nginx設定,基本就是使location /指向原來的web前端,  location /new指向新的web前端

a. 先在nginx目錄下/usr/share/nginx/html 建立新的資料夾new,把新專案的static,index.html放置於new目錄,注意不是dist放到new目錄

new 目錄結構

b.  vim /etc/nginx/nginx.conf,修改server 部份

}c.  /usr/sbin/nginx -t 驗證conf檔案是否配置正確

網上有其他很多寫的nginx反向**部署多個前端,其前提應該是這個應用都已經可以正常訪問,只不過是在某個域和埠進行**,使使用者訪問方便。

在些過程中遇到的一些問題:

1. 一開始只對nginx進行了設定,在new資料夾下放了乙個index.html,這樣只能訪問到index,而不能訪問到新的專案,因為一些編譯好的檔案路徑不對,導致沒法載入

2. 404錯誤,一般來說就是配置和真實的路徑不符合

3. 設定多個前端的時候需要把原來預設的全域性root 路徑注釋掉

4. 注意每行設定最後的分號,反正我自己好幾次忘了

5. 重啟nginx可能發生的錯誤: 

a. nginx[13499]: nginx: [emerg] bind() to 0.0.0.0:80 failed (98: address already in use),使用 netstat -ntpl或者ps -ef | grep nginx找到相應程序,然後kill 程序id

b. nginx start failed,pid找不到,   ./nginx -c -/etc/nginx/nginx.conf

nginx中部署vue前端專案

首先當然是阿里雲伺服器購買以及vue專案的編寫了,伺服器購買就不說了,vue專案打包npm run dev的時候要注意一下,主要是config index.js裡assetspublicpath要配置成 原來是 不然在上線後會什麼也沒有,還有就是如果使用了axios跨域 跨埠 的話,並且是使用pro...

如何在nginx中配置多個前端專案

首先安裝好ngnix,找到目錄下的html資料夾,將自己打包好的前端專案放在html資料夾下,如下圖 找到conf nginx.conf檔案,以我框選出來的為例,配置好想設定的埠號,對應的資料夾名稱。重啟nginx,訪問http localhost 2456即可 新的專案複製貼上 更改埠號和對應的資...

如何在eclipse中部署solr的web工程?

b color green size large 在eclipse中除錯solr,便於我們更加的清晰的了解solr的執行原理,今天散仙,就詳細的寫一下如何eclipse部署solr 4.10.0版本 的web工程。首先在eclipse 散仙這裡是4.2 裡,新建乙個動態的web工程,size col...