前端項目部署

之前很少接觸前端項目的部署，這次為了更全面的學習就在本機上裝了一個虛擬機上，在虛擬機上練習了如何把一個 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配置

修改 nginx 安裝目錄下的 ./conf/nginx.conf 文件：

#user nodody; # 1. 由于我的 react 項目打包出來放在 root 目錄下，需要設置user 為 root 時內容才能夠被訪問 user root;worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream;#log_format main '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '# '"$http_user_agent" "$http_x_forwarded_for"';#access_log logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;server {listen 80;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {root html;index index.html index.htm;}# 2. 對我的/api請求轉發到8989端口下node.js服務location /api {proxy_pass http://127.0.0.1:8989;}# 3. 在/config下的請求都指向到我放在root下的configPage里的內容location /config {alias /root/html/configPage;index index.html index.htm;#rewrite /config /root/html/configPage/index.html;try_files $uri $uri/ /config/index.html;}#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 的話這里就存在一個問題，我用前端路由跳轉到某一個路徑下 /xxx，這是我刷新頁面，這時候就會去服務器上拿資源，這個前端路由路徑下肯定找不到資源，所以就會出現 404 報錯。

解決方案

解決頁面刷新 404 這個問題，只需要把所有的請求全部返回 index.html，可以搜索 history fallback 這個關鍵詞查看相關資料。

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

Route路徑匹配問題

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

Route路徑匹配的原因

回想一下，在 react-router-dom 的 Route 標簽里傳遞一個 path={'/xx'} 的屬性時，前端路由會根據這個 path 來渲染對應的 Route 上傳遞過去的 Component 組件。那么在我的 nginx 的設置中，我設置的是 location /config，也就是說我實際訪問路徑都是加上了前綴 /config，所以每個 Route 標簽中傳過去的路徑都因為缺少了 /config 前綴導致所以的匹配都不成立，所以 Route 的頁面都沒有辦法渲染。

Route路徑匹配修改方法

方法很簡單，在 BrowserRouter 上加一個 basename 的屬性，給這屬性傳遞 config (具體是什么值，依據你給 nginx設置 location 時的前綴，我的例子中是 config)，這樣 Route 在匹配路徑的時候會加上 basename，這樣就能和對應路徑匹配上，然后渲染對應頁面。

總結

對 linux 不熟悉，nginx 也不熟悉，依靠著百度，摸爬滾打嘗試修改了好多次 nginx 配置，終于能夠 react 打包好的文件部署上去了， vue 項目的部署也是沒什么區別的。

總結

以上是生活随笔為你收集整理的前端项目部署的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。