Rainbond對前端專案Vue及React的持續部署

2022-04-20 19:01:05

前言：

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

專案打包好之後生成dist目錄，將其放入nginx中，並進行相應的存取設定。
將專案打包好放入tomcat中。
將專案打包好的dist目錄中的static和index.html檔案放入springboot專案的resources目錄下
直接執行一個前端server，類似本地開發那種。

在Rainbond中部署Vue React 專案同樣使用了第一種方法，根據原始碼自動build，打包完成後自動把靜態檔案放入nginx中。

在Rainbond中部署 Vue React 專案有以下三點規範：

1.Rainbond 會根據原始碼根目錄是否有 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專案來演示，Fork開源專案若依

1.1 新增 nodestatic.json 檔案

在原始碼根目錄建立檔案 nodestatic.json ,填寫以下內容。

該檔案指定靜態檔案編譯後的輸出目錄，一般Vue專案預設都是打包後輸出到專案根目錄dist。

{
	"path": "dist"
}

如果你的專案打包後目錄輸出不是專案根目錄，而是根目錄下的某一個資料夾例如：project/dist，則需要修改nodestatic.json檔案

{
	"path": "project/dist"
}

1.2 新增 web.conf 檔案

專案編譯完成後，Rainbond 會預設使用 Nginx（1.14.2）將前端專案執行起來。使用者可以在原始碼根目錄下加入 web.conf 檔案來指定 Nginx 的設定，該檔案的作用是定義執行時引數。沒有此檔案時，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 基於原始碼建立元件參考基於原始碼構建官方檔案

填寫原始碼倉庫地址，填寫前端子目錄 ruoyi-ui，構建Vue專案

確認建立元件，平臺會自動識別語言為 Nodestatic.

建立，等待構建元件完成即可。

預設使用國內npm淘寶源，可在元件構建源中檢視

此開源專案比較特殊，預設打包命令不是npm run build，而是npm run build:prod，需要在元件 > 構建源修改構建命令為此命令。

Rainbond中預設打包命令是 npm run build 、yarn run build

修改後重新構建，直至完成，存取頁面即可。

常見問題

部署完成後存取頁面403，有以下幾種原因：

1.打包沒有成功，導致產物不完全。

仔細檢視構建紀錄檔，確認錯誤原因。或在本地刪除所有依賴包，重新驗證專案是否可以正常構建。

2.打包路徑定義錯誤，導致Rainbond構建過程無法獲取到構建後的靜態檔案。

參考上文1.1環節，正確設定專案打包路徑。

Rainbond 雲原生應用管理平臺，實現微服務架構不用改程式碼，管理 Kubernetes 不用學容器，幫企業實現應用上雲，一站式將任何企業應用持續交付到 Kubernetes 叢集、混合雲、多雲等基礎設施。是 Rainstore 雲原生應用商店的支撐平臺。

1. Rainbond 官網

2. Rainbond 安裝使用

3. Rainbond 參考手冊全集

以上就是Rainbond對前端專案Vue及React的持續部署的詳細內容，更多關於Rainbond部署Vue React前端專案的資料請關注it145.com其它相關文章！