Rainbond對前端項目Vue及React的持續(xù)部署

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

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

前言：

以往我們在部署 Vue、React 前端項目有幾種方法：

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

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

在Rainbond中部署 Vue React 項目有以下三點規(guī)范：

1.Rainbond 會根據(jù)源代碼根目錄是否有 nodestatic.json 和 **package.json **文件，文件來識別為Vue React前端類項目。

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

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

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

3.源代碼根目錄下需存在 web.conf 文件，這是nginx的配置文件。沒有此文件時，Rainbond 會采用缺省配置。

部署前檢查

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

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

接下來用此Vue項目來演示，F(xiàn)ork開源項目若依

1.1 添加 nodestatic.json 文件

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

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

{
	"path": "dist"
}

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

{
	"path": "project/dist"
}

1.2 添加 web.conf 文件

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

默認(rèn)會把打包出來的 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項目了

1.3 源碼部署Vue項目

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

本項目源碼地址 Fork開源項目若依

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

填寫源碼倉庫地址，填寫前端子目錄 ruoyi-ui，構(gòu)建Vue項目

確認(rèn)創(chuàng)建組件，平臺會自動識別語言為 Nodestatic.

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

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

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

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

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

常見問題

部署完成后訪問頁面403，有以下幾種原因：

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

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

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

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

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

1. Rainbond 官網(wǎng)

2. Rainbond 安裝使用

3. Rainbond 參考手冊全集

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

您可能感興趣的文章: