@johtaniの日記 2nd

@johtani ‘s blog 2nd edition

Analyze UIとKibanaのプラグインの作成方法(第2回)

第1回では、Analyze UIというプラグインの紹介をしました、ごく簡単にですが。

第2回では、Kibanaのプラグインの作成方法を順を追って見ていこうと思います。今回は、プラグインのプロジェクトの作り方を説明します。 どんなファイルがあるのかなどについては第3回で説明します(2018/02月現在の方法になります。残念ながら、Kibanaのプラグイン作成自体はまだExperimentalな話になっていますので、変更がある可能性があります)。

実はそれほど難しいというわけではありません。Kibanaのプラグインを作成するためのテンプレートが用意されています。template-kiban-pluginです。 テンプレートのリポジトリのREADMEに作業手順の記載があります。

  1. KibanaのリポジトリをClone、Checkout
  2. Node.jsの環境を用意する
  3. Kibanaを起動できるようにする
  4. SAOのインストール
  5. テンプレートによるプロジェクトファイルの生成

順を追って説明します。 PLUGIN_DEV_DIRというディレクトリ配下で作業をしている想定になります。

1. KibanaのリポジトリをClone、Checkout

開発環境として、Kibanaが必要です。Kibanaのプラグインを作るので。 手順などはKibanaのCONTRIBUTING.mdに記載があります。 ということで、まずはKibanaのリポジトリをCloneします。

1
2
cd PLUGIN_DEV_DIR
git clone [email protected]:elastic/kibana.git

このままだと、masterブランチなので、開発したい対象のKibanaのバージョンのブランチもしくはタグをcloneします。今回は6.2.1向けということで、次のようになります。

1
git checkout v6.2.1

これで、ソースが6.2.1向けになりました。

2. Node.jsの環境を用意する

Node.jsをインストールします。 Kibanaのリポジトリに.node-versionというファイルがあります。 こちらにNode.jsのバージョンが記載されています。 Kibanaが使用しているNode.jsを利用できるようにします。ローカルではnvm利用してインストールしました。後から、切り替えが可能だからです。 nvm自体のインストールについてはnvmのサイトをご覧ください。 nvmがインストールできたら、次のコマンドで、Kibanaが使用しているバージョンをインストールします。

1
2
cd kibana
nvm install "$(cat .node-version)"

すでにnvmを利用している場合などは、Kibana起動時にKibanaのバージョンに合わせたNode.jsに切り替えるようにしてください。

3. Kibanaを起動できるようにする

Kibanaではyarnというjavascript向けのパッケージマネージャーを利用して起動やビルドなどを行います。まずはyarnをインストールします。最近npmからyarnに切り替えたようです。 私はMacだったので、brewでインストールしました。 インストールできたら、次のコマンドを実行します。

1
yarn

これにより、package.jsonから必要なライブラリなどをダウンロードして来てくれます。 問題なければ「✨ Done in 439.30s.」というような表示がされます(結構時間かかりますね)。 では、Kibanaを起動できるか確認してみましょう。 さらに、Elasticsearchも起動してみます。 Kibanaのpackage.jsonの中にはElasticsearchを起動するためのスクリプトも用意されています。実際にはgruntを利用してタスクを実行しているようです。Elasticsearchの起動にはJavaが必要になります。 今回は6.2.1なので、JDK 8以降がインストールされている必要があります。 こちらはインストールされているものとします。

1
yarn elasticsearch

で起動できます。

1
>> Started 1 Elasticsearch nodes.

という表示が出てればOKです。 次にKibanaです。別のTerminalを起動して、以下のコマンドで起動できます。

1
yarn start

これだけです。

1
server    log   [06:58:56.930] [info][listening] Server running at http://localhost:5603

この辺りが出てればKibanaのServerは起動済みです。また、Elasticsearchに接続できていれば、次のログが出ているはずです。

1
server    log   [07:02:18.010] [info][status][plugin:[email protected]] Status changed from red to green - Ready

Elasticsearch接続用のKibanaのプラグインの状態になります。 これで、Kibanaの環境が整ったことが確認できました。 もちろん、Elasticsearchに関しては、yarnで起動せずに、tar.gzなどでダウンロードして来たElasticsearchを起動しておき、アクセスするといったことも可能です。プラグインなどをElasticsearchにもいれてテストしたい場合などはそちらの方が便利かもしれません。

4. SAOのインストール

では、一度、ElasticsearchとKibanaを停止しましょう。フォワグラウンドで起動しているので、それぞれのTerminalでCtrl+Cで停止できます。 Kibanaのプラグイン作成むけに、テンプレートが作られています。sao.jsというGitHubのリポジトリやnpmのパッケージをテンプレートとして使うことができるツールを利用してプラグインのプロジェクト(リポジトリ)を作成します。 実際にテンプレートとなるリポジトリはtemplate-kibana-pluginになります。 まずはSaoのインストールです。

1
npm install -g sao

プラグインのテンプレートのページには上記のようにnpmを利用したインストール方法になっていますが、次のようにyarnでも可能です。

1
yarn global add sao

これで、saoがインストールできました。

5. テンプレートによるプロジェクトファイルの生成

あとは、テンプレートを元にプロジェクトを作成します。 PLUGIN_DEV_DIRディレクトリ配下に、kibanaと同じ階層で作成するプラグイン用のディレクトリを作成します。

1
mkdir simple-sample-kibana-plugin

以下のような構成になります。

1
kibana                      simple-sample-kibana-plugin

次にテンプレートを適用していきます。

1
2
cd simple-sample-kibana-plugin
sao [email protected]

2行目がsaoを利用してプロジェクトを作成しているコマンドになります。 すると、次のような質問が出て来ます。 これらに答えるとプロジェクトに必要なファイル(package.jsonやREADME.mdなど)に入力した情報を適用したものを作ってくれます。

1
2
3
4
5
6
7
? Name of your plugin?
? Provide a short description
? What Kibana version are you targeting?
? Should an app component be generated?
? Should translation files be generated?
? Should an hack component be generated?
? Should a server API be generated?

実際に答えた内容はこちら。

1
2
3
4
5
6
7
? Name of your plugin? simple-sample-kibana-plugin
? Provide a short description Sample plugin for explaining how to make kibana app
? What Kibana version are you targeting? 6.2.1
? Should an app component be generated? Yes
? Should translation files be generated? Yes
? Should an hack component be generated? Yes
? Should a server API be generated? Yes

プラグインの名前などは、ディレクトリ名と同じものを入力補完してくれているので、そのままEnterでもOKです。 Descriptionについてはわかりやすいものを入力しましょう。 バージョンは、先ほどのKibanaのリポジトリに合わせて、6.2.1にしてあります。 あとは、作るプラグインの種類に応じて、必要なコンポーネントを作るかどうかの質問にYes/Noで答えます。 今回はサンプルの説明ということもあるので、全てYesで答えました。 ちなみに、私が実際に作成したanalyze-api-ui-pluginでは、apptranslationserverの3つを作成しました。 ただし、translationについては現在はテンプレートで作成したままのファイルが入っており、実際には利用してないです。

完了したら、プラグインのサンプル入りのプロジェクトが完成です。 もう一度、Elasticsearchを立ち上げて、プラグインのプロジェクトからKibanaを起動してアクセスしてみます。まずは、PLUGIN_DEV_DIR/kibanaディレクトリの下で、Elasticsearchを起動します。

1
yarn elasticsearch

次に、PLUGIN_DEV_DIR/simple-sample-kibana-pluginディレクトリの下で、以下のコマンドを実行し、プラグインが入った状態のKibanaを起動します。

1
yarn start

問題なく起動すれば、ブラウザでアクセスすると次のような画面が表示されるはずです。

左側にメニューが1つ増えています。 クリックすると、上記画像のような画面が表示されるはずです。

これで、カスタムプラグインの開発ができる環境ができました! 次回は、プロジェクトのディレクトリ構成や、どんなツールが内部で使用されてデータのやり取りが行われているかについて説明します。お楽しみに。

Comments