準備部署 Oracle JET 虛擬 DOM App

簡介

本教學課程示範如何準備要建置的 Oracle JavaScript Extension Toolkit (Oracle JET) 虛擬 DOM 應用程式。

您可以將包含 HTML 集合、使用 JSX 語法 (TSX) 的 TypeScript 檔案，以及「階層式樣式表 (CSS)」檔案集合的 Oracle JET 虛擬 DOM 應用程式建置到任何類型的 Web 或應用程式伺服器。部署方法取決於應用程式執行的伺服器環境類型。

若要部署 Oracle JET 虛擬 DOM 應用程式，您可以使用與您用來在特定環境中部署任何其他從屬端介面的相同方法。

• 如果您通常將應用程式部署為 ZIP 檔案，則可以壓縮虛擬 DOM 應用程式的 /web 目錄，然後依照您的標準部署程序進行。
• 如果您通常將應用程式部署為 WAR 檔案，則您可能還需要修改虛擬 DOM 應用程式，才能產生 /web 目錄的封存檔案。例如，若要建立 .war 檔案，您必須包含一個包含 web.xml 配置檔案的 /WEB-INF 目錄。

您使用 Oracle JET 命令行介面套裝程式 (npx @oracle/ojet-cli create JET-Virtual-DOM-app --template=basic --vdom) 命令建立的虛擬 DOM 應用程式包含一個掛載命令檔樣板檔案的目錄，您可以用來定義建置處理作業的新步驟。例如，您可以建立鉤點程序檔，將虛擬 DOM 應用程式 /web 目錄封存為 ZIP 檔案或 WAR 檔案。此 after_build 指令碼會在建置程序完成後執行。

本教學課程未說明依賴特定環境和平台的部署步驟。

目標

在本教學課程中，您將瞭解如何將虛擬 DOM 應用程式的 /web 目錄封存為 ZIP 檔案或 WAR 檔案。您也將瞭解如何修改虛擬 DOM 應用程式，在 Oracle JET 應用程式建置程序中將存檔自動化。

必備條件

• 用來建立 Oracle JET 虛擬 DOM 應用程式 (包括安裝 Node.js) 的開發環境
• 完成此學習路徑的上一個教學課程，新增單位測試至 Oracle JET 虛擬 DOM 應用程式
• 熟悉環境的部署實務

工作 1：建立 after_build Hook 命令檔

您可以使用提供的鉤點指令碼範本檔案來建立 after_build 鉤點指令碼。

1. 瀏覽至 JET-Virtual-DOM-app/scripts/hooks 目錄，然後在編輯器中開啟 after_build.js 鉤點命令檔範本檔案。

2. 複製 after-build-js.txt 程式碼片段，並以複製的程式碼片段取代範本檔案的內容。

工作 2：修改 after_build Hook 命令檔

修改鉤點程序檔，以指定您要為虛擬 DOM 應用程式產生的封存檔案類型。鉤點程序檔使用相同的壓縮方法來建立 ZIP 檔和 WAR 檔。您可以修改 after_build 鉤點指令碼來指定輸出檔案的副檔名，預設為 .war。

1. 在 after_build.js 檔案中，編輯傳送給 fs.createWriteStream() 的檔案名稱，以使用適當的副檔名：.zip 或 .war。
   • 若要產生 WAR 檔案，請將檔案命名為 my-archive.war。

     const output = fs.createWriteStream('my-archive.war');
     

   • 若要產生 ZIP 檔案，請將檔案命名為 my-archive.zip。

     const output = fs.createWriteStream('my-archive.zip');
     

2. 儲存 after_build.js 檔案而不變更檔案名稱。/scripts/hooks 目錄中鉤點命令檔的檔案名稱對應至各種 Oracle JET 組建鉤點。

任務 3：以發行模式建置應用程式

當您在發行版本模式下建置虛擬 DOM 應用程式時，build --release 命令會以最小化的版本取代 /web/ 目錄中之程式庫和命令檔的開發版本。建置程序完成時，建置會接著執行 after_build 鉤點命令檔，並將 /web 目錄的內容存檔。

1. 開啟終端機視窗，變更為 JET-Virtual-DOM-app 目錄，然後安裝 archiver npm 套裝軟體。

   npm install archiver
   

   這會在 JET-Virtual-DOM-app 專案中安裝 archiver npm 套裝軟體。after_build.js 鉤點會使用此套件來封存您的虛擬 DOM 應用程式。

2. 開啟終端機視窗，變更為 JET-Virtual-DOM-app 目錄，然後以發行模式建置虛擬 DOM 應用程式。

   npx ojet build web --release
   

   建置程序會觸發位於 /scripts/hooks 目錄中的掛載命令檔，並需要幾分鐘的時間才能完成。

3. 等待確認。

   . . .
   Running after_build hook.
   Success: Build finished.
   Files were successfully archived.
   

4. 瀏覽至 JET-Virtual-DOM-app 目錄，並尋找 hook 程序檔產生的歸檔檔案。例如，如果您修改 after_build 鉤點指令碼以產生名為 my-archive.war 的 WAR 檔案，應用程式根目錄中就會顯示該名稱的 WAR 檔案。

   

下一步

本教學課程總結了您的第一個 Oracle JET Virtual DOM App 模組，內容涵蓋建置虛擬 DOM Web 應用程式的這個學習路徑。

• 使用入門樣板建立 Oracle JET 虛擬 DOM App
• 新增元件至 Oracle JET Virtual DOM 應用程式
• Oracle JET Virtual DOM 應用程式中的元件資料連結
• 對 Oracle JET 虛擬 DOM App 進行除錯
• 新增單位測試至 Oracle JET 虛擬 DOM App
• 準備部署 Oracle JET 虛擬 DOM App

您可以繼續前往組成元件模組中建立父項容器 1 和活動容器元件學習路徑的下一個教學課程。

您也可以返回虛擬 DOM 學習路徑的主頁面，存取建置虛擬 DOM 應用程式的所有模組。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。

---

標題與著作權資訊

Prepare to deploy an Oracle JET virtual DOM app

F69911-02

Copyright ©2024,2025,

Oracle 和 (或) 其關係企業。