前端專案部署

之前很少接觸前端專案的部署，這次為了更全面的學習就在本機上裝了乙個虛擬機器上，在虛擬機器上練習了如何把乙個react寫的spa專案部署到這個虛擬機器的伺服器上。由於linux也是剛接觸不久，所以整個過程還是遇到了很多坑，這裡記錄下。

我有乙個用react寫的單頁面應用，然後希望部署到伺服器上，通過ip如192.168.1.240/config這種路徑下訪問到我的應用。這個react專案依賴乙個node.js的乙個api服務，我需要在nginx上配置**使得我的react應用能夠訪問到我的api服務。

首先要準備的就是打包好的的react應用，然後在伺服器上裝乙個nginx和乙個node.js。

針對我這個專案, 我把react打包好的專案全部放到了/root/html/pageconfig這個路徑下。

修改nginx安裝目錄下的./conf/nginx.conf檔案：

#user nodody;
# 1. 由於我的 react 專案打包出來放在 root 目錄下，需要設定user 為 root 時內容才能夠被訪問
# 2. 對我的/api請求**到8989埠下node.js服務
location /api 
# 3. 在/config下的請求都指向到我放在root下的configpage裡的內容
location /config 
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#error_page 500 502 503 504 /50x.html;

這裡就是只修改了預設配置檔案的三個地方，來滿足我的要求：

修改user為root，使得root下的內容能夠被訪問

新增location /api設定proxy_pass使得/api下的請求都被**到proxy_pass設定的node.js服務處,滿足我的前端頁面api介面**的問題

新增location /config的配置，使得/config下請求都**至我react打包檔案所在的路徑。這樣我訪問192.168.1.240/config就能看到我的頁面。這裡我當初是複製的location /的配置，用的也是root指向路徑，結果一直不行，查了資料，發現應該要寫成alias才行

這裡的配置檔案可能需要更改多次，才能成功，需要注意的是，每次修改完nginx配置，需要重啟下nginx:

nginx -s reload

把打包好的檔案傳到伺服器上的時候，可能出現靜態資源檔案找不到的情況。

可能的原因是當react應用打包的時候，生成index.html檔案中插入style和script標籤的路徑不對，從而找不到靜態資源。

需要在webpack的配置檔案中去修改一下publicpath這個屬性，這個屬性會影響你的靜態資源檔案插入到index.html中的路徑。像我這個專案設定publicpath: './'就可以了，具體可以多修改幾次多打包幾次試試就行了。

前端路由分為兩種實現，一種就是hashrouter，另一種就是用h5新的history api實現的browserrouter。由於hashrouter的路徑帶乙個#不是特別好看，一般還是用browserrouter較多。

前端路由說白了就是路徑變了，不去請求伺服器，而是用js去改變頁面的方式。這樣的話，用browserrouter的話這裡就存在乙個問題，我用前端路由跳轉到某乙個路徑下/***，這是我重新整理頁面，這時候就會去伺服器上拿資源，這個前端路由路徑下肯定找不到資源，所以就會出現404報錯。

針對我的這個nginx配置而言，只需要加入try_files $uri $uri/ /config/index.html;,就能把前端路由路徑傳送給伺服器時全部返回index.html，這樣就解決了404問題。

配置好上述的nginx以及把打包好的檔案放到對應的目錄，再把我的api服務啟動，再訪問192.168.1.240/config時，已經能夠正常的顯示頁面，並且介面也能正常**請求到了。但是涉及到路由的頁面卻沒有被渲染出來。

回想一下，在react-router-dom的route標籤裡傳遞乙個path=的屬性時，前端路由會根據這個path來渲染對應的route上傳遞過去的component元件。那麼在我的nginx的設定中，我設定的是location /config，也就是說我實際訪問路徑都是加上了字首/config，所以每個route標籤中傳過去的路徑都因為缺少了/config字首導致所以的匹配都不成立，所以route的頁面都沒有辦法渲染。

方法很簡單，在browserrouter上加乙個basename的屬性，給這屬性傳遞config(具體是什麼值，依據你給nginx設定location時的字首，我的例子中是config)，這樣route在匹配路徑的時候會加上basename，這樣就能和對應路徑匹配上，然後渲染對應頁面。

前端專案部署

前端專案部署 docker

三 Linux專案部署之基礎專案部署

vue前端專案部署之nginx配置

前端專案部署

前端專案部署 docker

三 Linux專案部署之基礎專案部署

vue前端專案部署之nginx配置

相關推薦