Rainbond對(duì)前端項(xiàng)目Vue及React的持續(xù)部署

更新時(shí)間：2022年04月20日 17:17:24 作者：張齊

這篇文章主要為大家介紹了Rainbond對(duì)前端項(xiàng)目Vue及React的持續(xù)部署，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言：

以往我們?cè)诓渴?Vue、React 前端項(xiàng)目有幾種方法：

項(xiàng)目打包好之后生成dist目錄，將其放入nginx中，并進(jìn)行相應(yīng)的訪問(wèn)配置。
將項(xiàng)目打包好放入tomcat中。
將項(xiàng)目打包好的dist目錄中的static和index.html文件放入springboot項(xiàng)目的resources目錄下
直接運(yùn)行一個(gè)前端server，類似本地開(kāi)發(fā)那種。

在Rainbond中部署Vue React 項(xiàng)目同樣使用了第一種方法，根據(jù)源碼自動(dòng)build，打包完成后自動(dòng)把靜態(tài)文件放入nginx中。

在Rainbond中部署 Vue React 項(xiàng)目有以下三點(diǎn)規(guī)范：

1.Rainbond 會(huì)根據(jù)源代碼根目錄是否有 nodestatic.json 和 **package.json **文件，文件來(lái)識(shí)別為Vue React前端類項(xiàng)目。

2.源代碼根目錄下必須存在以下兩個(gè)文件之一（不可以同時(shí)存在）：

package-lock.json 存在該文件時(shí)，Rainbond 默認(rèn)使用 npm 包管理器構(gòu)建。

yarn.lock 存在該文件時(shí)，Rainbond 使用 yarn 包管理器構(gòu)建。

3.源代碼根目錄下需存在 web.conf 文件，這是nginx的配置文件。沒(méi)有此文件時(shí)，Rainbond 會(huì)采用缺省配置。

部署前檢查

在Rainbond部署自己的Vue、React項(xiàng)目之前需要檢查項(xiàng)目是否可用：

清理本地node_modules所有依賴，是否可以使用npm run build或其他命令打包成功。

接下來(lái)用此Vue項(xiàng)目來(lái)演示，F(xiàn)ork開(kāi)源項(xiàng)目若依

1.1 添加 nodestatic.json 文件

在源代碼根目錄創(chuàng)建文件 nodestatic.json ,填寫以下內(nèi)容。

該文件指定靜態(tài)文件編譯后的輸出目錄，一般Vue項(xiàng)目默認(rèn)都是打包后輸出到項(xiàng)目根目錄dist。

{
	"path": "dist"
}

如果你的項(xiàng)目打包后目錄輸出不是項(xiàng)目根目錄，而是根目錄下的某一個(gè)文件夾例如：project/dist，則需要修改nodestatic.json文件

{
	"path": "project/dist"
}

1.2 添加 web.conf 文件

項(xiàng)目編譯完成后，Rainbond 會(huì)默認(rèn)使用 Nginx（1.14.2）將前端項(xiàng)目運(yùn)行起來(lái)。用戶可以在源代碼根目錄下加入 web.conf 文件來(lái)指定 Nginx 的配置，該文件的作用是定義運(yùn)行時(shí)參數(shù)。沒(méi)有此文件時(shí)，Rainbond 會(huì)采用缺省配置。參考配置用例如下：

默認(rèn)會(huì)把打包出來(lái)的 dist目錄下的所有文件放到容器的/app/www

server {
    listen       5000;
    location / {
        root   /app/www;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
}

有了以上文件可以在Rainbond中構(gòu)建Vue、React項(xiàng)目了

1.3 源碼部署Vue項(xiàng)目

本次使用Vue項(xiàng)目進(jìn)行演示，React項(xiàng)目亦是如此。

本項(xiàng)目源碼地址 Fork開(kāi)源項(xiàng)目若依

1.3.1 基于源碼創(chuàng)建組件參考基于源碼構(gòu)建官方文檔

填寫源碼倉(cāng)庫(kù)地址，填寫前端子目錄 ruoyi-ui，構(gòu)建Vue項(xiàng)目

確認(rèn)創(chuàng)建組件，平臺(tái)會(huì)自動(dòng)識(shí)別語(yǔ)言為 Nodestatic.

創(chuàng)建，等待構(gòu)建組件完成即可。

默認(rèn)使用國(guó)內(nèi)npm淘寶源，可在組件構(gòu)建源中查看

此開(kāi)源項(xiàng)目比較特殊，默認(rèn)打包命令不是npm run build，而是npm run build:prod，需要在組件 > 構(gòu)建源修改構(gòu)建命令為此命令。

Rainbond中默認(rèn)打包命令是 npm run build 、yarn run build

修改后重新構(gòu)建，直至完成，訪問(wèn)頁(yè)面即可。

常見(jiàn)問(wèn)題

部署完成后訪問(wèn)頁(yè)面403，有以下幾種原因：

1.打包沒(méi)有成功，導(dǎo)致產(chǎn)物不完全。

仔細(xì)查看構(gòu)建日志，確認(rèn)錯(cuò)誤原因?；蛟诒镜貏h除所有依賴包，重新驗(yàn)證項(xiàng)目是否可以正常構(gòu)建。

2.打包路徑定義錯(cuò)誤，導(dǎo)致Rainbond構(gòu)建過(guò)程無(wú)法獲取到構(gòu)建后的靜態(tài)文件。

參考上文1.1環(huán)節(jié)，正確配置項(xiàng)目打包路徑。

Rainbond 云原生應(yīng)用管理平臺(tái)，實(shí)現(xiàn)微服務(wù)架構(gòu)不用改代碼，管理 Kubernetes 不用學(xué)容器，幫企業(yè)實(shí)現(xiàn)應(yīng)用上云，一站式將任何企業(yè)應(yīng)用持續(xù)交付到 Kubernetes 集群、混合云、多云等基礎(chǔ)設(shè)施。是 Rainstore 云原生應(yīng)用商店的支撐平臺(tái)。

1. Rainbond 官網(wǎng)

2. Rainbond 安裝使用

3. Rainbond 參考手冊(cè)全集

以上就是Rainbond對(duì)前端項(xiàng)目Vue及React的持續(xù)部署的詳細(xì)內(nèi)容，更多關(guān)于Rainbond部署Vue React前端項(xiàng)目的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: