Red Hat Summit20.3. OptaWeb 配送経路のフロントエンドモジュールの操作
フロントエンドのプロジェクトは、Create React App でブートストラップされました。Create React App には、開発や、実稼働環境でアプリケーションをビルドしやすくするためのスクリプトや依存関係が多数含まれています。
前提条件
- OptaWeb 配送経路のスターターアプリケーションをダウンロードして展開している。詳細は、15章OptaWeb 配送経路デプロイメントファイルのダウンロードおよびビルド を参照してください。
手順
Fedora で、次のコマンドを入力して開発環境を設定します。
sudo dnf install npm
npm のインストールの詳細については、Downloading and installing Node.js and npm を参照してください。
-
rhbop-8.29.0-kogito-and-optaplanner-quickstarts/optaweb-8.29.0.Final-redhat-00009/optaweb-vehicle-routing/optaweb-vehicle-routing-frontendディレクトリーに移動します。 npmの依存関係をインストールします。npm install
Maven とは違い、
npmパッケージマネージャーは、npm installを実行した場合にのみ、プロジェクトディレクトリーのnode_modulesに依存関係をインストールします。package.jsonにリストされている依存関係が変更されると、master ブランチに変更をプルした時点で、npm installを実行してから開発サーバーを実行する必要があります。以下のコマンドを入力して、開発サーバーを実行します。
npm start
自動的に表示されない場合には、Web ブラウザーで
http://localhost:3000/を開きます。デフォルトでは
npm startコマンドは、デフォルトのブラウザーでこの URL を開こうとします。注記npm startコマンドで、実行するたびに新規ブラウザーのタブを開かないようにするには、BROWSER=none環境変数をエクスポートします。.env.localファイルを使用して、この設定を永続化します。これには、以下のコマンドを実行します。echo BROWSER=none >> .env.local
ブラウザーは、フロントエンドのソースコードを変更するたびにページを更新します。端末で実行する開発サーバーのプロセスは、これらの変更を取得し、コンパイルエラーと lint エラーをコンソールに出力します。
以下のコマンドを入力して、テストを実行します。
npm test
REACT_APP_BACKEND_URL環境変数の値を変更して、npm start、npm run buildなどの実行時に、npmが使用するバックエンドプロジェクトの場所を指定します。REACT_APP_BACKEND_URL=http://10.0.0.123:8081
注記環境変数は、
npmのビルドプロセス中は JavaScript バンドル内でハードコード化されるため、バックエンドの場所を指定してから、フロントエンドをビルドしてデプロイする必要があります。React 環境変数の詳細は、Adding Custom Environment Variables を参照してください。
フロントエンドをビルドするには、以下のコマンドのいずれか 1 つを実行します。
./mvnw install
mvn install
