之前很少接觸前端專案的部署，這次為了更全面的學習就在本機上裝了乙個虛擬機器上，在虛擬機器上練習了如何把乙個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
docker的概念在這裡就不在累述，大家google一下都能得到很詳細的描述。藉著這次專案需要自己利用docker部署各環境，記錄一下docker學習和部署的相關過程。linux容器與虛擬機器的對比 方案資源占用 冗餘步驟 啟動體積 虛擬機器多 獨佔一部分記憶體和硬碟空間 多 完整作業系統，系統級別...
三 Linux專案部署之基礎專案部署
2.專案執行依賴於jdk的版本，tomcat可指定jdk版本。linux 指定tomcat專案啟動的jdk版本 教程位址 3.專案打包好後，將專案名修改為自己需要訪問的專案名，使用檔案上傳工具 xftp filezilla rz.上傳所打包好的war檔案。1.啟動tomcat容器，cd 到tomca...
vue前端專案部署之nginx配置
1 確認nginx配置完畢 2 通過命令npm run build進行打包 3 複製dist資料夾，上傳至 usr local nginx目錄下 4 修改 usr local nginx conf目錄下的nginx.conf 開啟檔案 vi nginx conf 修改說明 監聽埠 80 修改 roo...