14.7.3. OptaWeb 配送経路のフロントエンドモジュールの操作

フロントエンドのプロジェクトは、Create React App でブートストラップされました。Create React App には、開発や、実稼働環境でアプリケーションをビルドしやすくするためのスクリプトや依存関係が多数含まれています。

前提条件

手順

  1. Fedora で、次のコマンドを入力して開発環境を設定します。

    sudo dnf install npm

    npm のインストールの詳細については、Downloading and installing Node.js and npm を参照してください。

  2. rhdm-7.11.0-decision-services-quickstarts/optaweb-8.5.0.Final-redhat-00004/optaweb-vehicle-routing/optaweb-vehicle-routing-frontend ディレクトリーに移動します。
  3. npm の依存関係をインストールします。

    npm install

    Maven とは違い、npm パッケージマネージャーは、npm install を実行した場合にのみ、プロジェクトディレクトリーの node_modules に依存関係をインストールします。package.json にリストされている依存関係が変更されると、master ブランチに変更をプルした時点で、npm install を実行してから開発サーバーを実行する必要があります。

  4. 以下のコマンドを入力して、開発サーバーを実行します。

    npm start
  5. 自動的に表示されない場合には、Web ブラウザーで http://localhost:3000/ を開きます。

    デフォルトでは npm start コマンドは、デフォルトのブラウザーでこの URL を開こうとします。

    注記

    npm start コマンドで、実行するたびに新規ブラウザーのタブを開かないようにするには、BROWSER=none 環境変数をエクスポートします。.env.local ファイルを使用して、この設定を永続化します。これには、以下のコマンドを実行します。

    echo BROWSER=none >> .env.local

    ブラウザーは、フロントエンドのソースコードを変更するたびにページを更新します。端末で実行する開発サーバーのプロセスは、これらの変更を取得し、コンパイルエラーと lint エラーをコンソールに出力します。

  6. 以下のコマンドを入力して、テストを実行します。

    npm test
  7. REACT_APP_BACKEND_URL 環境変数の値を変更して、npm startnpm run build などの実行時に、npm が使用するバックエンドプロジェクトの場所を指定します。

    REACT_APP_BACKEND_URL=http://10.0.0.123:8081
    注記

    環境変数は、npm のビルドプロセス中は JavaScript バンドル内でハードコード化されるため、バックエンドの場所を指定してから、フロントエンドをビルドしてデプロイする必要があります。

    React 環境変数の詳細は、Adding Custom Environment Variables を参照してください。

  8. フロントエンドをビルドするには、以下のコマンドのいずれか 1 つを実行します。

    ./mvnw install
    mvn install