IBM CloudのCodeEngineでDb2 on Cloudを使ったグラフ表示Webサイトの作成

[IBM Cloud Code Engine](https://www.ibm.com/jp-ja/cloud/code-engine)はKubernetesベースのフルマネージド型のサーバーレス・プラットフォームです。

当記事では、IBM CloudのCodeEngineの簡単なサンプルとして、2021年8月現在オープンデータとして公開されている[東京都 新型コロナウイルス陽性患者発表詳細](https://catalog.data.metro.tokyo.lg.jp/dataset/t000010d0000000068)というデータがロードされているDb2 on Cloud上のテーブルにアクセスし、グラフを表示するというWebアプリをCodeEngineで動かしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/44e15e6c-ba5b-eff6-f4a9-364624042117.png)


グラフを表示するフロントエンドはreactで作成し、Db2 on CloudにアクセスするバックエンドとwebサーバーをFlaskで作成しています。ソースコードはgithubで公開していますので、cloneして自分なりに変更してオリジナルを作成することが可能です。

# IBM Cloud Code Engineとは
IBM ソリューション ブログ「[IBM Cloud Code Engineを提供開始](https://www.ibm.com/blogs/solutions/jp-ja/ibm-cloud-code-engine-is-now-generally-available/)」から引用:

> IBM Cloud Code Engine は、フルマネージドのランタイムで、基盤となるインフラストラクチャーのサイジング、デプロイメント、セキュリティ保全、管理、使用停止を行うことなく数秒で本番稼動することができます。

>コンテナ、アプリケーション、バッチ・ジョブをスケールする必要がある場合は、Code Engine がその面倒を見ます。基盤となるクラウドスケールのアーキテクチャは、アプリケーションをスムーズに稼働させるために、お客様の要件に合わせて動的にスケールアップまたはスケールダウンします。**もちろん、費用は実際に使用した分だけ支払えばよく**、Code Engineがアプリケーションをゼロ（０）までスケールダウンさせた場合には、何も支払う必要はありません。

>Code Engineは、既存のコンテナイメージをデプロイするためのプラットフォームというだけではありません。イメージを持っていない場合は、Code EngineがあなたのGitリポジトリからイメージを構築してくれます。**ビルドプロセスは自動化されており**、Dockerfile（ビルドプロセスを記述したもの）を使用するか、Paketo buildpacks（言語とランタイムを自動的に検出してくれる）を使用したクラウドネイティブビルドパックを使用するかを選択できます。

簡単に言うと、コンテイメージ　または コンテナで実行可能なコードがGitリポジトリなどにあれば、自分でコンテナ環境を準備することなく、それらを簡単に稼働させることができるプラットフォームです。



尚、2021年9月24日現在、CodeEngineはクレジットカード情報を登録しているアカウントが使用できます。完全無料で使用しできるLiteプランはありませんが、**無料枠がありますので、ある程度までは課金されません**。当記事のアプリを変更せず動作させ数回確認した程度でその後削除すれば課金されることは2021年9月24日現在ありません。料金の仕組みは今後変更になる可能性がありますので最新情報は確認する様にお願いします。

# アプリケーションの構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d625176f-6b2f-355b-62ae-bba9b7d46356.png)

### 動作フロー(上の図の グレーの線)
① ユーザーはWebブラウザーでCode　EngineにデプロイされたFlask上のReact画面にアクセスし、日付を設定し表示ボタンをクリック。
② Backend　Applicationのendpointにアクセス
③ Backend　Applicationは[Db2のREST API](https://cloud.ibm.com/apidocs/db2-on-cloud/db2-on-cloud-v4)を使って、Db2 on CloudにSQLを渡して、実行結果を得る
④ Backend　Applicationは結果をFrontend（Reactで作成した静的コンテンツ）に渡す
⑤ Frontendは結果をもとにグラフを表示する

### Code Engineへのデプロイ手順 (上の図の緑線)

当記事ではDockerfileからCode Engineにイメージをビルドさせ、デプロイする方法を実施します。

**a:** 開発者はコンテナイメージを作成できるDockerfileとともにGithub上のリポジトリーにCodeを配置します(ここは当記事では既に存在するGithub上のリポジトリーを使用します)。

**b:**　開発者は Code Engine プロジェクトを作成し、アプリをGithubリポジトリ情報、環境変数を指定して作成します

**c,d,e:** Code Engine は指定された情報をもとに、Githubリポジトリにアクセスし、DockerfileをもとにコンテナイメージをIBM Container Registryに作成します。この作成したコンテナイメージをCodeEngineにデプロイします。

尚、ReactのコンテンツはDockerfileでビルド後にFlaskの静的コンテンツフォルダーにCopyしています。

では早速この手順でアプリをCode Enginにデプロイしてみましょう！


# 1. 前準備　Db2 on Cloud
まずはDb2 on Cloud上に2021年8月現在オープンデータとして公開されている[東京都 新型コロナウイルス陽性患者発表詳細](https://catalog.data.metro.tokyo.lg.jp/dataset/t000010d0000000068)というデータがロードされているテーブルを持つDb2 on Cloudのサービスが必要です。

###1.1 Db2 on Cloudのサービス作成
お手持ちのDb2 on Cloudのサービスがない方はまずは無料のDb2 on Cloud　LiteプランでDb2 on Cloudのサービスを作成しましょう。

 - [Db2 on CloudをLiteプラン(無料)で作成](https://qiita.com/nishikyon/items/0219a81673f0b84980da)
 
無料で使用したい方は必ず**Liteプラン**で作成するようにします。それ以外のプランは課金があります。


### 1.2 東京都 新型コロナウイルス陽性患者発表詳細テーブルの作成
次にお手持ちのDb2 on Cloud上に[東京都 新型コロナウイルス陽性患者発表詳細](https://catalog.data.metro.tokyo.lg.jp/dataset/t000010d0000000068)というデータがロードされているテーブルを作りましょう。
 
 - [Db2 on Cloudにテーブル作成](https://qiita.com/nishikyon/items/f13e376b00daaa71adeb)

尚、ここで作成したスキーマ名とテーブル名はCodeEngineにアプリをデプロイする際に使用しますので
**<スキーマ名>.<テーブル名>**の形でどこかにコピペしといてください。

- 例：  `NISHITO.COVID19_TOKYO`

注:　Liteプランのスキーマ名は固定で決まっていますので、不明の場合は[こちら](https://qiita.com/nishikyon/items/f13e376b00daaa71adeb#6-%E7%A2%BA%E8%AA%8D)の6-3のWebコンソール画面でスキーマ名を確認してください。　　　　

### 1.3 東京都 新型コロナウイルス陽性患者発表詳細　最新データのロード
1.2で作成したテーブルに東京都 新型コロナウイルス陽性患者発表詳細の最新データをロードしましょう。

 - [Db2 on Cloud上のテーブルにCSVファイルをロードする](https://qiita.com/nishikyon/items/b3b60eb63c3701b4d7f8)

尚既にロード先のテーブルは1.2で作成済みなので、4-a は実施せず、　4-bの方を実施してください。

### 1.4　Db2 on Cloud接続情報の取得
アプリからDb2 on Cloudに接続するために、Db2 on Cloud接続情報を取得し、どこかにコピペしておきましょう。

####1.4.1 まずは以下の3つを取得してください: 
[Db2 on CloudのDB接続情報取得: IBM Cloudコンソールから資格情報を作成・参照(Liteプランの場合はこれのみ)
](https://qiita.com/nishikyon/items/69fee851849e7ef7e163#ibm-cloud%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%81%8B%E3%82%89%E8%B3%87%E6%A0%BC%E6%83%85%E5%A0%B1%E3%82%92%E4%BD%9C%E6%88%90%E5%8F%82%E7%85%A7lite%E3%83%97%E3%83%A9%E3%83%B3%E3%81%AE%E5%A0%B4%E5%90%88%E3%81%AF%E3%81%93%E3%82%8C%E3%81%AE%E3%81%BF)

 - username
 - password
 - database 

#### 1.4.2 次にREST API host name情報を取得してください: 
[Db2 on CloudのREST APIを使用したデータロード (python & curl): 1.1 REST API host name情報の取得](https://qiita.com/nishikyon/items/cf45ffa83334444674dc#11-rest-api-host-name%E6%83%85%E5%A0%B1%E3%81%AE%E5%8F%96%E5%BE%97)

 
#### 1.4.3 最後にCRN情報を取得してください。
[Db2 on CloudのREST APIを使用したデータロード (python & curl): 1.2. CRN情報の取得](https://qiita.com/nishikyon/items/cf45ffa83334444674dc#12-crn%E6%83%85%E5%A0%B1%E3%81%AE%E5%8F%96%E5%BE%97)

これでDb2 on Cloudの準備は完了しました。

# 2. Code Engine プロジェクトの作成
Code Engine を使うにはまず最初にプロジェクトを作成します。
プロジェクトとは、アプリケーション、ジョブ、ビルドなどの Code Engine エンティティーをグループにまとめるものです。 詳細は[こちら](https://cloud.ibm.com/docs/codeengine?topic=codeengine-manage-project#project-def)を参照ください。

### 2.1 IBM Cloudにログイン
https://cloud.ibm.com/　 よりIBM Cloudにログインにログインしてください。

### 2.2 左上のナビゲーションメニュー≡をクリックし、CodeEngine→プロジェクトをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/abf8a9a1-b740-50a0-5ebd-e72064e5919a.png)

### 2.3 「作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/94eb1d72-b2d3-e1e7-f580-0d3fe8be73eb.png)

### 2.4 「プロジェクトの作成」画面で必要事項を入力後、「作成」をクリック
ロケーションの選択でロケーションを選択、プロジェクトの構成の下の名前を設定します。
ここではロケーションを`東京(jp-tok)`, 名前を`db2web`として進めます(他の値でもOKですが今後の説明はこの入力を前提に進めます)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/8015b538-1f11-db79-2330-1708c9a37880.png)

しばらくするとプロジェクト一覧の画面になり、作成したプロジェクト名が表示されます。

# 3. Code Engine アプリケーションの作成
では作成したプロジェクトにアプリケーションを作成しましょう。

### 3.1 プロジェクト一覧から作成したプロジェクト名をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/1ba82a61-6226-1597-eddd-02953b9dfe7a.png)

### 3.2 「アプリケーションの作成+」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/b0871cbc-d008-f29e-aa7f-4374e9c2b03c.png)

### 3.3 「アプリケーションの作成」画面で必要事項を入力
#### 3.3.1. 名前
デフォルトで名前が入りますが、できればわかりやすい名前に変更しましょう。
ここでは`db2-graph`としています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/8a6121be-c215-4d66-5cff-799bc4fa6999.png)

#### 3.3.2 実行するコードの選択
- `ソースコード`を選択します。
- `ソースコード`を選択すると「ソース・コード URL」を入力するエリアが表示されますので、以下を入力します。
   - `https://github.com/kyokonishito/covid19-graph-db2`
- 「listen ポートのオーバーライド (オプション)」には`5000`を入力します。

上記を入力したら「ビルド詳細の指定」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/8deac85d-3c4b-cafa-fec8-9d941b604050.png)

#### 3.3.3 ビルド詳細の指定
「ソース」の部分はそのまま「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/ab7a2c89-8e74-ddd3-14fd-e68dfad59974.png)

「戦略」の部分もそのまま「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3ac97931-765e-9993-a3c1-a8380cb7e461.png)

「出力」の部分も特に使用したいコンテナレジストリーや名前空間がなければ、そのまま「完了」をクリックします。

- デフォルトではIBM Container Registory上にコンテナイメージが作成されます。
- 変更したい場合は変更して「完了」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/0d0ff28b-277f-0466-b2f6-65eba0538db9.png)

イメージ・ビルドの詳細が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/2ca1bf27-2d73-a2cd-6b9a-656ba569cd9c.png)

尚コンテナイメージはデフォルトではIBM Cloudの[Container Registory](https://cloud.ibm.com/registry/overview)の無料プランで作成されます。無料プランには[制限](https://cloud.ibm.com/docs/Registry?topic=Registry-registry_overview#registry_plans)があります。制限に引っかかった場合など使わないイメージなどは削除可能です(IBM Cloudにログイン後[こちら](https://cloud.ibm.com/registry/images)から可能)。無料プランは2021年9月26日現在制限を超えると使えなくなるだけで、課金されることはありません。

#### 3.3.4 ランタイム設定
必要に応じてランライム設定を変更します。
そのままでも問題ありませんがインスタンス数やインスタンスリソースはリソース使用量すなわち料金にかかわりますので、変更したい方は変更してください。当記事ではそのままにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/77692ffe-68b7-a452-5a07-eebe5f6bd113.png)


#### 3.3.5 環境変数
オプションとなっていますが、当アプリケーションでは必須の設定です。
環境変数にDb接続情報をセットします。
「追加」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/80f1756c-5e54-bd8b-4a55-e9084d1007cf.png)

右側に表示された「環境変数の編集」画面で以下を入力します。

- 定義タイプ：　`リテラル値`を選択

- 環境変数名、値には以下の値を入力し、「完了」をクリック
 
| 環境変数名 | 値 |  
|----------|------|
|DBNAME|[1.4.1](#141-%E3%81%BE%E3%81%9A%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE3%E3%81%A4%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84)で取得した`database`の値|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/c9cf408b-b459-3819-0520-df115301d993.png)

入力した値が表示されます:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/cc6c53e0-9a82-8ed1-73b5-319704136b2f.png)

続けて同じ手順を繰り返し以下の5つの値を設定してください。

| 環境変数名 | 値 |  
|----------|------|
|USERID|[1.4.1](#141-%E3%81%BE%E3%81%9A%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE3%E3%81%A4%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84)で取得した`username`の値|
|PASSWD|[1.4.1](#141-%E3%81%BE%E3%81%9A%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE3%E3%81%A4%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84)で取得した`password`の値|
|URL|**https://**[1.4.2](#142-次にrest-api-host-name情報を取得してください)で取得した`REST API host name`の値<br>例: `https://xxxx.db2.cloud.ibm.com` |
|CRN|[1.4.3](#143-最後にcrn情報を取得してください)で取得した`CRN情報`の値|
|TABLENAME|[1.2](#12-東京都-新型コロナウイルス陽性患者発表詳細テーブルの作成)で取得した`<スキーマ名>.<テーブル名>`の値|

最終的に6つの環境変数をセットしたことを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/2fe4546f-f98d-0848-96b9-6a2d791f0056.png)

#### 3.3.6 全ての設定が完了したら、右下の「作成」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/83ab80b9-d7f8-a92a-e4e8-2df50542c33e.png)

アプリケーションの構成画面が表示されます。
ステータスが「準備完了」になるまで10分程度待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/c58baa82-5db1-7770-385f-db738c752eaa.png)


ステータスが「準備完了」になればデプロイ成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d995a0f4-0bf0-b8fb-ac23-46d5de9f36fd.png)

# 4. 稼働確認
「アプリケーションURLを開く」をクリックしてアプリケーション画面を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/de691a55-82c3-9637-5c13-7a89cff96789.png)

最初の起動は時間がかかります。
画面が表示されたら、「表示」をクリックしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/9fbd0019-e00e-3385-e9d7-5c6f25c3ed4b.png)

グラフが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/c02d793c-e508-3061-6b14-72c53974a338.png)

日付を変えていろいろ試してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3f7d014f-9b26-b188-74f9-5a1b368ae681.png)


# 5. アプリケーションの削除(オプション)
さてお楽しみいただいたアプリですが、従量課金ですので、インスタンスが上がっていなければ、課金されませんが、**不安な方は**お試しが終わったら削除しておいてください。

アプリケーションを削除する場合は、プロジェクトを開いて、アプリケーションの画面の一覧行にマウスカーソルを当てるとゴミ箱アイコンが出てきますので、ゴミ箱アイコンをクリックして削除してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/5273f6b1-fea4-e059-ddf6-80b25e9eda1c.png)


# 6. その後の展望(?): その後いろいろやってみたい皆様へ
### CLIを試してみる
Code EngineにはCLIが準備されていて、現状はCLIの方がいろいろできることが多いです。アプリケーションのStausなど一度CLIを使って見てみてください。

- [CLIのセットアップ](https://cloud.ibm.com/docs/codeengine?topic=codeengine-install-cli )
- [IBM Cloud Code Engine CLI](https://cloud.ibm.com/docs/codeengine?topic=codeengine-cli)


### Codeを変更してみる
https://github.com/kyokonishito/covid19-graph-db2 の `README.md`にLocalでの実行方法を記載しています。自分のPCにgit cloneして、コードを変更して自分のPCでテストしてみましょう
うまくいったら、自分の変更したコードをgithubリポジトリに上げて、自分のgithubリポジトリを指定してCodeEngineで動かしてみまししょう。

### ジョブを作成してみる
[東京都 新型コロナウイルス陽性患者発表詳細](https://catalog.data.metro.tokyo.lg.jp/dataset/t000010d0000000068)というデータは毎日1回更新されていますので、CodeEngineでジョブを作成して、一日一回テーブルを更新できるようするのもよいかと思います。

- [ジョブの実行](https://cloud.ibm.com/docs/codeengine?topic=codeengine-deploy-job-tutorial)
- [Db2 on CloudのREST APIを使用したデータロード (python & curl)](https://qiita.com/nishikyon/items/cf45ffa83334444674dc)


# 6. まとめ
Dockerfileを持つコンテナ化できるgithub上のソースコードを簡単にCodeEngineにデプロイすることを体験できたと思います。
次は[今回のgithub上のソースコード](https://github.com/kyokonishito/covid19-graph-db2)を参考に自分のアプリをデプロイしてみましょう！

参考URL:

- [CodeEngineチュートリアルライブラリ](https://cloud.ibm.com/docs?tab=tutorials&tags=codeengine&page=1&pageSize=20)

- [ソリューション・チュートリアル](https://cloud.ibm.com/docs/solution-tutorials?topic=solution-tutorials-tutorials)

- https://github.com/IBM/CodeEngine