前端項目部署

Aceyclee 發(fā)布于2019-07-25 14:21 / 2878人閱讀

摘要：前端項目部署之前很少接觸前端項目的部署，這次為了更全面的學習就在本機上裝了一個虛擬機上，在虛擬機上練習了如何把一個寫的項目部署到這個虛擬機的服務器上。

前端項目部署

之前很少接觸前端項目的部署，這次為了更全面的學習就在本機上裝了一個虛擬機上，在虛擬機上練習了如何把一個 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 時內(nèi)容才能夠被訪問
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請求轉發(fā)到8989端口下node.js服務
        location /api {
            proxy_pass  http://127.0.0.1:8989;
        }
        # 3. 在/config下的請求都指向到我放在root下的configPage里的內(nèi)容
         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 下的內(nèi)容能夠被訪問

新增 location /api 設置 proxy_pass 使得 /api下的請求都被轉發(fā)到 proxy_pass 設置的 node.js 服務處,滿足我的前端頁面 api 接口代理的問題

新增 location /config 的配置，使得 /config 下請求都轉發(fā)至我 react 打包文件所在的路徑。這樣我訪問 192.168.1.240/config就能看到我的頁面。這里我當初是復制的location / 的配置，用的也是 root 指向路徑，結果一直不行，查了資料，發(fā)現(xiàn)應該要寫成 alias 才行

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

nginx -s reload

靜態(tài)資源路徑問題

把打包好的文件傳到服務器上的時候，可能出現(xiàn)靜態(tài)資源文件找不到的情況。

資源路徑找不到的原因

可能的原因是當 react 應用打包的時候，生成 index.html 文件中插入 style 和 script 標簽的路徑不對，從而找不到靜態(tài)資源。

靜態(tài)資源找不到的解決方法

需要在 webpack 的配置文件中去修改一下 publicPath 這個屬性，這個屬性會影響你的靜態(tài)資源文件插入到 index.html 中的路徑。像我這個項目設置 publicPath: "./"就可以了，具體可以多修改幾次多打包幾次試試就行了。

前端路由 前端路由分類

前端路由分為兩種實現(xiàn)，一種就是 hashRouter，另一種就是用 H5 新的 History API 實現(xiàn)的 browserRouter。由于 hashRouter 的路徑帶一個 # 不是特別好看，一般還是用 browserRouter 較多。

前端路由的問題

前端路由說白了就是路徑變了，不去請求服務器，而是用 js 去改變頁面的方式。這樣的話，用 browserRouter 的話這里就存在一個問題，我用前端路由跳轉到某一個路徑下 /xxx，這是我刷新頁面，這時候就會去服務器上拿資源，這個前端路由路徑下肯定找不到資源，所以就會出現(xiàn) 404 報錯。

解決方案

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

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

Route路徑匹配問題

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

Route路徑匹配的原因

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

Route路徑匹配修改方法

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

總結

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

云服務器 GPU云服務器前端web項目部署到云服務器前端項目前端項目視頻前端開發(fā)項目

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/40006.html

前端自學筆記 - 第二篇(vuePress自動部署 & 后臺項目自學)

摘要：今天部署好了項目，現(xiàn)在寫好了博客頁面，只要一提交，會自動打包并且部署如果部署失敗，還會發(fā)送郵件提醒。但今天為了自動化部署項目，掛了三四十次了，真是慘不忍睹。。。而這第二個項目，將會是第一個的深入。長期更新前端自學筆記，歡迎關注前端自學筆記 - 第一篇(nginx/flutter/后臺系統(tǒng)/vuepress博客）一、jenkins自動部署vuePress博客項目自動化部署項目de...

zzzmh 2019-08-26 10:43 評論0 收藏0
Jenkins實現(xiàn)前端項目自動化集成打包部署

摘要：原博客地址實現(xiàn)前端項目自動化集成打包部署掘金地址前言以前寫前端項目打包部署，都是手動運行命令，打包完，然后壓縮，再上傳到服務器解壓。驗證提交代碼，成功自動打包部署提交代碼，觀察界面，出現(xiàn)構建任務，構建完成之后收到郵件通知。原博客地址:https://yezihaohao.github.io/2017/09/09/Jenkins實現(xiàn)前端項目自動化集成打包部署/掘金地址:https://...

Guakin_Huang 2019-08-21 16:26 評論0 收藏0
Sentry異常監(jiān)控方案部署-前端攻略

摘要：故而，我們需要在項目出現(xiàn)異常時主動對其進行收集上報，分析原因和影響后制定下一步解決方案。所以，我們需要一款成熟的異常監(jiān)控系統(tǒng)來協(xié)助我們。最近在公司項目中部署了，用于項目中異常監(jiān)控，涵蓋了前端后端。原文首發(fā)于我的個人博客： https://lonhon.top/ 凡事只要有可能出錯,那就一定會出錯對于任何一個項目而言，本地測試肯定做不到100%覆蓋，而且，我們也不能保證用戶能按照我們...

Lorry_Lu 2019-08-22 16:31 評論0 收藏0
阿里云ECS服務器部署node項目和vue項目

摘要：阿里云服務器部署項目和項目遇到的問題第三章申請阿里云服務器阿里云服務器地址第一次啥都不懂選的數(shù)據(jù)中心版位中文版不含。步驟輸入申請阿里云服務器時候創(chuàng)建的登錄名和登錄密碼，點擊鏈接。阿里云ECS服務器部署node項目和vue項目遇到的問題(第三章) 申請阿里云ECS服務器阿里云服務器地址 showImg(https://segmentfault.com/img/bVbgeNh?w=9...

dance 2019-08-23 11:38 評論0 收藏0
【Vue項目總結】項目nginx部署

摘要：項目開發(fā)完成，接下來是上線，關于項目的部署，我司前端是部署在服務器上，關于的相關文檔，請自行查閱本文只記錄部署時碰到的一些問題。其他總結文章常規(guī)打包優(yōu)化方案組件通信處理方案后臺管理項目總結項目開發(fā)完成，接下來是上線，關于vue項目的部署，我司前端是部署在nginx服務器上，關于nginx的相關文檔，請自行查閱；本文只記錄部署時碰到的一些問題。打包 vue項目打包后，是生成一系列的靜...

CntChen 2019-07-25 14:50 評論0 收藏0