前言：

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

• 項目打包好之后生成dist目錄，將其放入nginx中，并進行相應的訪問配置。
• 將項目打包好放入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 默認使用 npm 包管理器構建。

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

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項目默認都是打包后輸出到項目根目錄dist。

{
	"path": "dist"
}

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

{
	"path": "project/dist"
}

1.2 添加 web.conf 文件

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

默認會把打包出來的 dist目錄下的所有文件放到容器的/app/www

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

有了以上文件可以在Rainbond中構建Vue、React項目了

1.3 源碼部署Vue項目

本次使用Vue項目進行演示，React項目亦是如此。

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

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

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

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

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

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

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

Rainbond中默認打包命令是 npm run build 、yarn run build

修改后重新構建，直至完成，訪問頁面即可。

常見問題

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

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

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

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

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

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

1. Rainbond 官網(wǎng)

2. Rainbond 安裝使用

3. Rainbond 參考手冊全集

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

最新評論