lagosta

ラゴスタ

Lagosta は、Krill のユーザー インターフェイスです。

このプロジェクトでは、JavaScript フレームワークとして Vue.js を使用し、UI フレームワークとして Element を使用します。

要件

• Node.js
• 糸またはnpm

npm はnode.js に含まれているのに対し、yarn には追加の依存関係をインストールする必要があることに注意してください。 OTOH npm を使用する場合は、 package-lock.jsonリポジトリにコミットする必要があります。

プロジェクトのセットアップ

必要なすべての JS ライブラリを取得するには、次を実行します。

yarn install

または

npm install

開発サーバーの実行

Vue は webpack と webpack-dev-server を使用して自動コンパイル、ホットリロード可能な開発サーバーを実行します。Krill も例外ではありません。

次のコマンドを発行して開発サーバーを起動できます。

npm run serve

開発サーバーの設定のほとんどは、ファイル/vue.config.jsで指定されます。

Krill 開発サーバーを実行する IP アドレスとポートを選択できます。

    port: "3003",
    https: true

webpkack-dev-server のproxy設定を使用して、HTTP リクエストをローカルの Krill インスタンスに再ルーティングできます。 proxyオプションを指定して/vue.config.jsファイルを編集します。

これにより、その特定のエンドポイントに対するリクエストがローカルの Krill インスタンスに転送されます。 /api 、 /auth 、 /statsエンドポイントを Krill に再ルーティングすることに注意してください。

例えば：

...
  devServer : {
    // Krill proxy instance (for API calls).
    // see: https://webpack.js.org/configuration/dev-server/#devserverproxy
    proxy : {
      "/api" : { target : "https://localhost:3000" } ,
      "/auth" : { target : "https://localhost:3000" } ,
      "/stats" : { target : "https://localhost:3000" }
    } ,
...

この例では、ローカルの Krill インスタンスがhttps://localhost:3000 (krill 構成のデフォルト) で実行されています。

webpack-dev-server について詳しくは、こちらをご覧ください。

デプロイメント用のビルドの作成

/distフォルダー内ですべてをコンパイルおよび縮小するには、次のコマンドを実行します。

 yarn run build

または

 npm run build

これにより、すべての JS と CSS がコンパイルされ、縮小されます。繰り返しますが、Vue は webpack を使用するため、ビルド プロセスの多くの設定を変更できます。

https://webpack.js.org/concepts/を参照してください。

本番環境での API リクエストのルーティング

実稼働環境でアプリを実行するには 2 つの方法があります。

• /api 、 /stats 、 /authのすべての呼び出しを Krill デーモンにプロキシするように Web サーバーを構成します。
• 提供されている「server.js」を使用して、API 呼び出しをプロキシする単純な HTTP サーバーを起動します (推奨されません)。

後者を使用するには、まず環境に合ったパラメータを含む .env ファイルを作成します。

 PROXY_BASE_URL=https://your-host
SERVE_FOLDER=dist

そして走ります

 node server.js

Dockerコンテナ内での構築

1 回限り、Docker イメージをローカルでビルドします。

 docker build -t lagosta-builder .

それを取得したら、次のことができます。

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn install
root@06a45bcc9a3e:/tmp/src# exit

Docker イメージとローカルの Lagosta ビルド ディレクトリの準備ができたので、今後は次のようにyarn buildを実行するだけです。

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn build
...
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
Done in 19.66s.

出力はホストの${PWD}/distフォルダーにあります。