OKITを利用してOCI上のアーキテクチャを可視化してみた

- OCI Designer Toolkit (OKIT) の使い方メモ〜その1
- OKITをインストールする
- Oracle Cloud Infrastructure (OCI) で動作中のシステム構成を可視化する

# はじめに
OCI Designer Toolkit (OKIT)は、ブラウザベースのシステム・アーキテクチャ設計ツール (オープンソース) で、Oracle Cloud Infrastructure上のアーキテクチャ設計・プロトタイピングをグラフィカルなインターフェースで直感的に行うことができます。本記事ではOKITのインストールと初期設定、Oracle Cloudアカウントとの連携でOCI上で稼働するシステム構成を可視化することを行います。Oracle Cloud Infstracture Resource Managerと連携し、OKITでデザインされたものを構築する手順については次回の記事で扱います。

[OKITでデザインしたシステム構成をResource Managerと連携してOCI上に構築してみた](https://qiita.com/orakurara/items/951dfd35324bdbb0b172)


# OKITのセットアップ
## 検証環境 （クライアント）
- macOS 10.15.7 Catalina
- Docker Engine 19.03.13
- Oracle Cloud Infrastructure Designer and Visualisation Toolkit 0.13.0

## Oracle Cloud Infrastructure側の準備
OKITとOracle Cloudのアカウントを連携するためにAPI Keyの
登録、configファイルで利用する各OCIDを確認します。（注: OCI CLIを利用するための初期設定と同じです。既にOCI CLIをインストール済みの場合は、[次項](##-OKITのインストール)に進んでください）
### OKIT configファイルの準備
クライアント環境に設定ファイルの格納ディレクトリ`~/.oci`の作成とAPI Keysに登録するSSHキーペアを作成します。

```shell-session:
$ mkdir ~/.oci/
$ cd ~/.oci/
$ openssl genrsa -out ~/.oci/oci_api_key.pem 2048
$ openssl rsa -pubout -in ~/.oci/oci_api_key.pem -out ~/.oci/oci_api_key_public.pem
```

OCIコンソールへアップロードするために公開鍵を作業用ディレクトリに移動しておきます。

```shell-session:~/.oci/で実行
$ mv oci_api_key_public.pem ~/app/oci_api_key_public.pem
```

OCIのアカウント情報を記述するconfigファイルを作成します。

```shell-session:~/.oci/で実行
$ touch config
```

configファイルの記述例は下記、`key_file`にはAPI Keyに登録する公開鍵に対応する秘密鍵のPATHを、`region`にはアクセスするOCIリージョンのリージョン識別子を、`tenancy`および`user`にはそれぞれテナントとユーザーに対応するOCIDを、`fingerprint`には登録したAPI Keyのフィンガープリントをそれぞれ記述する必要があります。

``` ~/.oci/config
[DEFAULT]
key_file=~/.oci/oci_api_key.pem
region=ap-tokyo-1
tenancy=ocid1.tenancy.oc1..[省略]
user=ocid1.user.oc1..[省略]
fingerprint=xx:xx:xx:xx:xx:xx
```

### OCI API Keyの登録とconfigファイルに記載するOCID等の確認
API Keysへの秘密鍵の登録作業とあわせてOCIダッシュボードからconfigファイルに記述する情報を確認していきます。

OCIダッシュボード左上のハンバーガーメニュー (三本水平線アイコン) から。**ガバナンスと管理**メニューより、**アイデンティティ** > **ユーザー**にアクセスし、OKITに登録するIAMユーザー（oracleidentitycloudservice/hogehoge@xxx.comでは**ない**ユーザー）を選択し、ユーザー詳細画面に遷移します。
ユーザー詳細画面左下の**リソース**メニューから、**APIキー**を選択し、画面中央の**公開キーの追加**ボタンより事前に作成したSSHキーペアの公開鍵を登録します。秘密鍵の登録が終わるとフィンガープリントが表示されるのでその値をconfigファイルの`fingerprint`の値に転記します。また、画面中央の**ユーザー情報**からユーザーの**OCID**をコピーして`user`の値に転記してください。
![20-11-08-18-02-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831381/74bf0907-2438-f42a-0441-14565948e39d.png)

次にOCIダッシュボードメニューから、**ガバナンスと管理**、**管理** > **テナンシ詳細**にアクセスし、**テナンシ情報**からテナンシの**OCID**をコピーして`tenancy`の値に転記してください。最後に**ガバナンスと管理**、**管理** > **リージョン管理**にアクセスし、OKITでアクセスするリージョンの**リージョン識別子**をコピーして`region`の値に記載してください。（東京リージョンであれば`ap-tokyo-1`、大阪リージョンであれば`ap-osaka-1`となります）

![20-11-08-18-19-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831381/be21c202-509e-948b-afc6-efa799705dd6.png)
![20-11-08-18-19-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831381/3bf085be-e21d-da90-9d78-31fb3bb9ccb2.png)


最後に完成したconfigファイルのパーミションを変更します。


```shell-session:~/.oci/で実行
$ chmod 600 ~/.oci/config
```

これでOKITをインストールする前に必要な準備作業は完了です。

## OKITのインストール
OKITをインストールする任意のディレクトリに移動してGitHubリポジトリをクローンします。

```shell-session:
$ git clone --depth 1 https://github.com/oracle/oci-designer-toolkit.git
```
OKITはDockerの他、Docker Compose、Vagrantに対応していますが、本記事ではDockerを利用して環境を構築します。その他のインストール方法は、[OCI Designer Toolkit Installation Guide](https://github.com/oracle/oci-designer-toolkit/blob/master/documentation/Installation.md#oci-designer-toolkit-installation-guide)を参照ください。下記コマンドでDockerイメージをビルド、作成したテンプレートを保存するディレクトリ、configファイルが配置されたディレクトリを共有してコンテナを起動します。

```shell-session:
$ cd oci-designer-toolkit
$ docker build --tag okit --file ./containers/docker/Dockerfile --force-rm .
$ docker run -d --rm -p 80:80 --volume ~/okit/user/templates:/okit/templates --volume ~/.oci:/root/.oci --name okit okit
```

コンテナが起動してきたらブラウザから下記URLでOKITにアクセスします。
[`http://localhost/okit/designer`](http://localhost/okit/designer)


# OKITのインターフェース
ここまでの作業が終われば下記のOKITの画面にアクセスできていると思います。
![20-11-08-19-45-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831381/5f39e23d-e33d-4d96-18ae-d90bc3ea7526.png)
ここで各インターフェースの要素の説明を行います。

### パレット (Palette)
画面の左側のアイコンが一覧で表示されている部分をパレットと呼び、OKITが対応しているOCIのサービスとリソースがアイコン形式 (アーティファクト) で表示されています。アイコンを選択すると、それをキャンバスにドラッグすることができます。

### キャンバス (Canvas)
画面の中心にあるのは、アーキテクチャ図を作成作業を行うキャンバスです。初期状態、または新規キャンバスを選択したときには、トップレベルのコンパートメントだけが表示されます。

### プロパティ (Properties)
キャンバス上に展開された各アーティファクトは、OCI内でそれらを構築・実行するために必要なプロパティのセットを持っています。これらの値はTerraform / Ansibleスクリプトを生成する際に利用します。キャンパス上のアーティファクトをクリックすると、画面の右側に表示されるプロパティパネルから値を編集することができます。

### メインメニュー (画面左上の三本水平線のアイコン)
メインメニューは下記。ここから新規キャンバスの作成やデザインしたアーキテクチャの保存、保存したアーキテクチャの展開、リファレンス・アーキテクチャの参照、作成済アーキテクチャのエクスポート（イメージ形式、Terraform、Ansible、Resource Manager）、Terraform Jsonからのインポートが可能になっています。
![20-11-08-20-17-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831381/eb0ad77c-17d1-2389-9b2e-14379c2c6ef9.png)

# OKITを利用してOCIで稼働中のシステム構成を可視化してみる
OKITを利用することで、コンパートメント内に構築済・稼働中のサーバリソースを可視化することが可能です。OKITのメインメニューより**Query**を選択、configファイルの設定プロファイル、リージョン、構成を可視化するコンパートメントを選択して`Query`を実行してください。
![20-11-08-20-19-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831381/b312a312-bcae-74b5-2db6-93168f4a6ab4.png)


少々待つとキャンバスにVCN等のネットワークリソースと共に稼働中のComputeインスタンスのアーティファクトが表示されます。また、各アーティファクトをクリックすることで設定されているプロパティを確認することができます。
![20-11-08-20-34-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831381/9b479222-b31c-6a5e-af8f-eca47dc8b9a9.png)


# 関連情報
[oci-designer-toolkit](https://github.com/oracle/oci-designer-toolkit)
[OCI Designer Toolkit Documentation](https://github.com/oracle/oci-designer-toolkit/blob/master/documentation/README.md)
[[ORACLE A-Team Chronicles] Introduction to OKIT the OCI Designer Toolkit](https://www.ateam-oracle.com/introduction-to-okit-the-oci-designer-toolkit)
[[ORACLE A-Team Chronicles] The OCI Designer Toolkit Templates Feature](https://www.ateam-oracle.com/the-oci-designer-toolkit-templates-feature)
[[ORACLE A-Team Chronicles] OCI Designer Toolkit Resource Manager Integration](https://www.ateam-oracle.com/oci-designer-toolkit-resource-manager-integration)
[[SmartStyle社 技術ブログ] OCI Designer Toolkit(OKIT)を触ってみた](https://www.s-style.co.jp/blog/2020/05/6068/) 
[[Qiita] 【OKIT OCI Designer Toolkit】OCI 構成図作成ツールを使って、3分で環境構築をする](https://qiita.com/MUCHIUCHI_OJISAN/items/8ffe7567b50528efae3c)