ビジュアルパーツをビルドし、サーバーにデプロイする¶

ビジュアルパーツが完成したら、以下の手順でサーバーにデプロイします。

ライセンスファイルへのパスを設定する
ビルドする
サーバーにデプロイする

このチュートリアルでは、ビジュアルパーツを https://<ご使用のintdashドメイン>/vm2m/data-visualizer/plugins/visual-parts-sample/app.js というURLでホストするものとして説明します。

ライセンスファイルへのパスを設定する¶

新しいビジュアルパーツのベースURLを .env で設定します。

ここで設定したベースURLは、ライセンスファイルへのURLの一部として使用されます。

注釈

既に設定されている場合は、この手順は必要ありません。

サンプル設定ファイル .env.sample をコピーして、 .env を作成します。
```
$ cp .env.sample .env
```
.env ファイル内で、ビジュアルパーツのベースURLを設定します。

ベースURLには、任意のURLパスを設定できます。ベースURLは、この次の手順で設定するNginxのlocation設定と一致している必要があります。

この例では、/vm2m/data-visualizer/plugins/visual-parts-sample/ とします。
```
#
# Please set the BASE_URL to be published on the Web
#
# e.g.
# BASE_URL=/vm2m/data-visualizer/plugin/sample-visual-parts/
#
BASE_URL=/vm2m/data-visualizer/plugins/visual-parts-sample/
```
注釈

.env では、BASE_URLの末尾にはスラッシュ / を入れてください。

ビルドする¶

開発環境でビジュアルパーツをビルドします。

$ npm run build

ビルドの結果は、 ./build ディレクトリに出力されます。例：

app.js
c.1263149501256df91cb3.css
img.03113e5235a4e0c9f4b5aff3b51768c5.svg
img.640e2403b1c7131df59412174ed553ce.svg
img.b0745974cb47667e3eca2e18e294dc48.svg
licenses.txt

注釈

上記のベースURLの設定により、ビルド結果 app.js の冒頭には以下のようなURLが出力されます。

/*! For license information please see /vm2m/data-visualizer/plugins/visual-parts-sample/licenses.txt */

サーバーにデプロイする¶

注釈

ビジュアルパーツをサーバーにデプロイするには、サーバー側で設定変更やサービスの再起動を行う必要があります。

サーバー側の操作は、サーバー運用担当者が行います。アプトポッドにて運用を行っているサーバーの場合は、アプトポッドが行いますのでご依頼ください。

sshを使ってintdashサーバーに接続し、 ./build ディレクトリをintdashサーバーの任意のディレクトリにコピーします。

ここでは、 /home/web/visual-parts-sample 内にコピーするものとします。
intdashサーバーでNginxの設定ファイルを作成し、新しいビジュアルパーツプラグインのパスをlocationとして追加します。

設定ファイルは、 /etc/nginx/intdash.d/{任意のファイル名} としてください。ここでは、設定ファイルは /etc/nginx/intdash.d/visual-parts-sample とします。

設定ファイルの内容は、以下の通りです。
```
location /vm2m/data-visualizer/plugins/visual-parts-sample {
    alias /home/web/visual-parts-sample/build;
    auth_basic  off;
    auth_request  /_api_authn;
    error_page 401 = @redir_oauth2;
}
```
以下のコマンドを実行して、Nginxを再起動します。
```
# systemctl reload nginx
```
intdashサーバー内のData Visualizerの設定ファイル /etc/vm2m-dataviz-backend/vm2m-2nd-config.production.json にも、ビジュアルパーツのパスを登録します。

設定ファイルはJSON形式です。編集する際は末尾カンマの付け忘れや消し忘れに注意してください。
```
{
  "meta": {
    "allowVpartsIDs": []
  },
  "vpartsConf": {},
  "pluginURLs": [
    ...,
    "/vm2m/data-visualizer/plugins/visual-parts-sample/app.js" <---
  ]
}
```
以下のコマンドを実行して、Data Visualizerアプリケーションを再起動します。
```
# systemctl restart vm2m-dataviz-backend
```
これで、Data Visualizerから新しいビジュアルパーツを使用できるようになります。

以上でビジュアルパーツのデプロイは完了です。

注釈

サーバーにデプロイされたビジュアルパーツを使用する場合は、Data Visualizerの plg （Visual Parts Plugin Settings）ボタンは使用しません。

そのため、ビジュアルパーツの開発が完了したら、サーバー側の設定ファイル /etc/vm2m-dataviz-backend/vm2m-2nd-config.production.json は以下の状態にしてください。

{
  ...
  "devTools": {
    "showVisualPartsPluginSettings": false  <--
  },
  ...
}

設定ファイルを変更した場合は、変更を反映するため、サーバー上で以下のコマンドを実行し、Data Visualizerアプリケーションを再起動します。

# systemctl restart vm2m-dataviz-backend