前端項(xiàng)目部署

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

摘要：前端項(xiàng)目部署之前很少接觸前端項(xiàng)目的部署，這次為了更全面的學(xué)習(xí)就在本機(jī)上裝了一個(gè)虛擬機(jī)上，在虛擬機(jī)上練習(xí)了如何把一個(gè)寫(xiě)的項(xiàng)目部署到這個(gè)虛擬機(jī)的服務(wù)器上。

前端項(xiàng)目部署

之前很少接觸前端項(xiàng)目的部署，這次為了更全面的學(xué)習(xí)就在本機(jī)上裝了一個(gè)虛擬機(jī)上，在虛擬機(jī)上練習(xí)了如何把一個(gè) react 寫(xiě)的 spa 項(xiàng)目部署到這個(gè)虛擬機(jī)的服務(wù)器上。由于 linux 也是剛接觸不久，所以整個(gè)過(guò)程還是遇到了很多坑，這里記錄下。

目標(biāo)

我有一個(gè)用 react 寫(xiě)的單頁(yè)面應(yīng)用，然后希望部署到服務(wù)器上，通過(guò) ip 如 192.168.1.240/config 這種路徑下訪問(wèn)到我的應(yīng)用。這個(gè) react 項(xiàng)目依賴(lài)一個(gè) node.js 的一個(gè) api 服務(wù)，我需要在 nginx 上配置代理使得我的 react 應(yīng)用能夠訪問(wèn)到我的 api 服務(wù)。

準(zhǔn)備

首先要準(zhǔn)備的就是打包好的的 react 應(yīng)用，然后在服務(wù)器上裝一個(gè) nginx 和一個(gè) node.js。

針對(duì)我這個(gè)項(xiàng)目, 我把 react 打包好的項(xiàng)目全部放到了 /root/html/pageConfig 這個(gè)路徑下。

nginx配置

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

#user nodody;
# 1. 由于我的 react 項(xiàng)目打包出來(lái)放在 root 目錄下，需要設(shè)置user 為 root 時(shí)內(nèi)容才能夠被訪問(wèn)
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. 對(duì)我的/api請(qǐng)求轉(zhuǎn)發(fā)到8989端口下node.js服務(wù)
        location /api {
            proxy_pass  http://127.0.0.1:8989;
        }
        # 3. 在/config下的請(qǐng)求都指向到我放在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;

這里就是只修改了默認(rèn)配置文件的三個(gè)地方，來(lái)滿足我的要求：

修改 user 為 root，使得 root 下的內(nèi)容能夠被訪問(wèn)

新增 location /api 設(shè)置 proxy_pass 使得 /api下的請(qǐng)求都被轉(zhuǎn)發(fā)到 proxy_pass 設(shè)置的 node.js 服務(wù)處,滿足我的前端頁(yè)面 api 接口代理的問(wèn)題

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

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

nginx -s reload

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

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

資源路徑找不到的原因

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

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

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

前端路由 前端路由分類(lèi)

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

前端路由的問(wèn)題

前端路由說(shuō)白了就是路徑變了，不去請(qǐng)求服務(wù)器，而是用 js 去改變頁(yè)面的方式。這樣的話，用 browserRouter 的話這里就存在一個(gè)問(wèn)題，我用前端路由跳轉(zhuǎn)到某一個(gè)路徑下 /xxx，這是我刷新頁(yè)面，這時(shí)候就會(huì)去服務(wù)器上拿資源，這個(gè)前端路由路徑下肯定找不到資源，所以就會(huì)出現(xiàn) 404 報(bào)錯(cuò)。

解決方案

解決頁(yè)面刷新 404 這個(gè)問(wèn)題，只需要把所有的請(qǐng)求全部返回 index.html，可以搜索 history fallback 這個(gè)關(guān)鍵詞查看相關(guān)資料。

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

Route路徑匹配問(wèn)題

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

Route路徑匹配的原因

回想一下，在 react-router-dom 的 Route 標(biāo)簽里傳遞一個(gè) path={"/xx"} 的屬性時(shí)，前端路由會(huì)根據(jù)這個(gè) path 來(lái)渲染對(duì)應(yīng)的 Route 上傳遞過(guò)去的 Component 組件。那么在我的 nginx 的設(shè)置中，我設(shè)置的是 location /config，也就是說(shuō)我實(shí)際訪問(wèn)路徑都是加上了前綴 /config，所以每個(gè) Route 標(biāo)簽中傳過(guò)去的路徑都因?yàn)槿鄙倭?/config 前綴導(dǎo)致所以的匹配都不成立，所以 Route 的頁(yè)面都沒(méi)有辦法渲染。

Route路徑匹配修改方法

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

總結(jié)

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

云服務(wù)器 GPU云服務(wù)器前端web項(xiàng)目部署到云服務(wù)器前端項(xiàng)目前端項(xiàng)目視頻前端開(kāi)發(fā)項(xiàng)目

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40006.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Aceyclee

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Selenium常用方法（Python）

閱讀 924·2021-09-09 09:32
狗盾云：亞太雙向CN2+美國(guó)GIA CN2節(jié)點(diǎn)CDN,免費(fèi)CDN使用1個(gè)月,號(hào)稱(chēng)打不死

閱讀 2897·2021-09-02 10:20
阿里云國(guó)際站200M云服務(wù)器開(kāi)通教程，附簡(jiǎn)單注冊(cè)教程

閱讀 2711·2021-07-23 11:24
FE.ES-異步編程進(jìn)化史

閱讀 838·2019-08-30 15:54
react+mobx 構(gòu)建H5制作工具項(xiàng)目經(jīng)驗(yàn)總結(jié)

閱讀 3639·2019-08-30 15:54
10個(gè)有趣的javascript和css庫(kù)（2019年5月最新）

閱讀 1353·2019-08-30 11:02
js原型鏈

閱讀 2855·2019-08-26 17:40
jQuery源碼解析之a(chǎn)ddClass(),removeClass(),toggleClass()和

閱讀 1136·2019-08-26 13:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端項(xiàng)目部署

相關(guān)文章

**前端自學(xué)筆記 - 第二篇(vuePress自動(dòng)部署 & 后臺(tái)項(xiàng)目自學(xué))**

**Jenkins實(shí)現(xiàn)前端項(xiàng)目自動(dòng)化集成打包部署**

Sentry異常監(jiān)控方案部署-前端攻略

阿里云ECS服務(wù)器部署node項(xiàng)目和vue項(xiàng)目

**【Vue項(xiàng)目總結(jié)】項(xiàng)目nginx部署**

發(fā)表評(píng)論

0條評(píng)論

Aceyclee

男|高級(jí)講師

TA的文章

Selenium常用方法（Python）

狗盾云：亞太雙向CN2+美國(guó)GIA CN2節(jié)點(diǎn)CDN,免費(fèi)CDN使用1個(gè)月,號(hào)稱(chēng)打不死

阿里云國(guó)際站200M云服務(wù)器開(kāi)通教程，附簡(jiǎn)單注冊(cè)教程

FE.ES-異步編程進(jìn)化史

react+mobx 構(gòu)建H5制作工具項(xiàng)目經(jīng)驗(yàn)總結(jié)

10個(gè)有趣的javascript和css庫(kù)（2019年5月最新）

js原型鏈

jQuery源碼解析之a(chǎn)ddClass(),removeClass(),toggleClass()和

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端項(xiàng)目部署

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！