Oracle JET仮想DOMアプリケーションのデプロイの準備

はじめに

このチュートリアルでは、Oracle JavaScript Extension Toolkit (Oracle JET)仮想DOMアプリケーションをデプロイメント用に準備する方法について説明します。

HTMLのコレクションを含むOracle JET仮想DOMアプリケーション、JSX構文(TSX)を使用したTypeScriptファイル、およびCascading Style Sheets (CSS)ファイルを任意のタイプのWebサーバーまたはアプリケーション・サーバーにデプロイできます。デプロイメント方法は、アプリケーションが実行されるサーバー環境のタイプによって異なります。

Oracle JET仮想DOMアプリケーションをデプロイするには、他のクライアント・インタフェースを特定の環境にデプロイするのに使用するのと同じ方法を使用できます。

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アプリケーションのビルド・プロセスの一部としてアーカイブを自動化する方法についても学習します。

前提条件

タスク1: after_buildフック・スクリプトの作成

after_buildフック・スクリプトは、指定したフック・スクリプト・テンプレート・ファイルを使用して作成します。

  1. JET-Virtual-DOM-app/scripts/hooksディレクトリに移動し、after_build.jsフック・スクリプト・テンプレート・ファイルをエディタで開きます。

  2. after-build-js.txtコード・スニペットをコピーし、テンプレート・ファイルの内容をコピーしたコード・スニペットに置き換えます。

タスク2: after_buildフック・スクリプトの変更

フック・スクリプトを変更して、仮想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ディレクトリに移動し、フック・スクリプトによって生成されたアーカイブ・ファイルを見つけます。たとえば、after_buildフック・スクリプトを変更してmy-archive.warという名前のWARファイルを生成した場合、その名前のWARファイルがアプリケーション・ルート・ディレクトリに表示されます。

    Oracle JET仮想DOMアプリケーションのルート・ディレクトリにあるWARファイル

次のステップ

このチュートリアルでは、仮想DOM Webアプリケーションの構築に関するこの学習パスの最初のOracle JET仮想DOMアプリケーションのモジュールを終了します。

「コンポーネントの構成」モジュールの学習パス「親コンテナ1およびアクティビティ・コンテナ・コンポーネントの作成」の次のチュートリアルに進むことができます。

仮想DOM学習パスのメイン・ページに戻ると、仮想DOMアプリケーションの構築に関するすべてのモジュールにアクセスすることもできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。