LoginSignup
6
0

More than 1 year has passed since last update.

@nishikyon(Kyoko Nishito)inIBM

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

Last updated at Posted at 2021-09-26

IBM Cloud Code EngineはKubernetesベースのフルマネージド型のサーバーレス・プラットフォームです。

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

image.png

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

IBM Cloud Code Engineとは

IBM ソリューション ブログ「IBM Cloud Code Engineを提供開始」から引用:

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

動作フロー(上の図の グレーの線)

① ユーザーはWebブラウザーでCode　EngineにデプロイされたFlask上のReact画面にアクセスし、日付を設定し表示ボタンをクリック。
② Backend　Applicationのendpointにアクセス
③ Backend　ApplicationはDb2のREST APIを使って、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月現在オープンデータとして公開されている東京都 新型コロナウイルス陽性患者発表詳細というデータがロードされているテーブルを持つDb2 on Cloudのサービスが必要です。

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

無料で使用したい方は必ずLiteプランで作成するようにします。それ以外のプランは課金があります。

1.2 東京都 新型コロナウイルス陽性患者発表詳細テーブルの作成

次にお手持ちのDb2 on Cloud上に東京都 新型コロナウイルス陽性患者発表詳細というデータがロードされているテーブルを作りましょう。

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

  • 例： NISHITO.COVID19_TOKYO

注:　Liteプランのスキーマ名は固定で決まっていますので、不明の場合はこちらの6-3のWebコンソール画面でスキーマ名を確認してください。　　　　

1.3 東京都 新型コロナウイルス陽性患者発表詳細　最新データのロード

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

尚既にロード先のテーブルは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プランの場合はこれのみ)

  • username
  • password
  • database

1.4.2 次にREST API host name情報を取得してください:

Db2 on CloudのREST APIを使用したデータロード (python & curl): 1.1 REST API host name情報の取得

1.4.3 最後にCRN情報を取得してください。

Db2 on CloudのREST APIを使用したデータロード (python & curl): 1.2. CRN情報の取得

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

2. Code Engine プロジェクトの作成

Code Engine を使うにはまず最初にプロジェクトを作成します。
プロジェクトとは、アプリケーション、ジョブ、ビルドなどの Code Engine エンティティーをグループにまとめるものです。 詳細はこちらを参照ください。

2.1 IBM Cloudにログイン

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

2.2 左上のナビゲーションメニュー≡をクリックし、CodeEngine→プロジェクトをクリック

image.png

2.3 「作成」をクリック

image.png

2.4 「プロジェクトの作成」画面で必要事項を入力後、「作成」をクリック

ロケーションの選択でロケーションを選択、プロジェクトの構成の下の名前を設定します。
ここではロケーションを東京(jp-tok), 名前をdb2webとして進めます(他の値でもOKですが今後の説明はこの入力を前提に進めます)。
image.png

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

3. Code Engine アプリケーションの作成

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

3.1 プロジェクト一覧から作成したプロジェクト名をクリック

image.png

3.2 「アプリケーションの作成+」をクリック

image.png

3.3 「アプリケーションの作成」画面で必要事項を入力

3.3.1. 名前

デフォルトで名前が入りますが、できればわかりやすい名前に変更しましょう。
ここではdb2-graphとしています。
image.png

3.3.2 実行するコードの選択

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

上記を入力したら「ビルド詳細の指定」をクリックします。
image.png

3.3.3 ビルド詳細の指定

「ソース」の部分はそのまま「次へ」をクリックします。
image.png

「戦略」の部分もそのまま「次へ」をクリックします。
image.png

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

  • デフォルトではIBM Container Registory上にコンテナイメージが作成されます。
  • 変更したい場合は変更して「完了」をクリックします。
    image.png

イメージ・ビルドの詳細が表示されます。
image.png

尚コンテナイメージはデフォルトではIBM CloudのContainer Registoryの無料プランで作成されます。無料プランには制限があります。制限に引っかかった場合など使わないイメージなどは削除可能です(IBM Cloudにログイン後こちらから可能)。無料プランは2021年9月26日現在制限を超えると使えなくなるだけで、課金されることはありません。

3.3.4 ランタイム設定

必要に応じてランライム設定を変更します。
そのままでも問題ありませんがインスタンス数やインスタンスリソースはリソース使用量すなわち料金にかかわりますので、変更したい方は変更してください。当記事ではそのままにします。
image.png

3.3.5 環境変数

オプションとなっていますが、当アプリケーションでは必須の設定です。
環境変数にDb接続情報をセットします。
「追加」をクリックします。
image.png

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

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

  • 環境変数名、値には以下の値を入力し、「完了」をクリック

環境変数名 値
DBNAME 1.4.1で取得したdatabaseの値

image.png

入力した値が表示されます:
image.png

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

環境変数名 値
USERID 1.4.1で取得したusernameの値
PASSWD 1.4.1で取得したpasswordの値
URL https://1.4.2で取得したREST API host nameの値
例: https://xxxx.db2.cloud.ibm.com
CRN 1.4.3で取得したCRN情報の値
TABLENAME 1.2で取得した<スキーマ名>.<テーブル名>の値

最終的に6つの環境変数をセットしたことを確認します。
image.png

3.3.6 全ての設定が完了したら、右下の「作成」ボタンをクリックします

image.png

アプリケーションの構成画面が表示されます。
ステータスが「準備完了」になるまで10分程度待ちます。
image.png

ステータスが「準備完了」になればデプロイ成功です。
image.png

4. 稼働確認

「アプリケーションURLを開く」をクリックしてアプリケーション画面を表示します。
image.png

最初の起動は時間がかかります。
画面が表示されたら、「表示」をクリックしてみましょう。
image.png

グラフが表示されました。
image.png

日付を変えていろいろ試してみてください。
image.png

5. アプリケーションの削除(オプション)

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

アプリケーションを削除する場合は、プロジェクトを開いて、アプリケーションの画面の一覧行にマウスカーソルを当てるとゴミ箱アイコンが出てきますので、ゴミ箱アイコンをクリックして削除してください。
image.png

6. その後の展望(?): その後いろいろやってみたい皆様へ

CLIを試してみる

Code EngineにはCLIが準備されていて、現状はCLIの方がいろいろできることが多いです。アプリケーションのStausなど一度CLIを使って見てみてください。

Codeを変更してみる

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

ジョブを作成してみる

東京都 新型コロナウイルス陽性患者発表詳細というデータは毎日1回更新されていますので、CodeEngineでジョブを作成して、一日一回テーブルを更新できるようするのもよいかと思います。

6. まとめ

Dockerfileを持つコンテナ化できるgithub上のソースコードを簡単にCodeEngineにデプロイすることを体験できたと思います。
次は今回のgithub上のソースコードを参考に自分のアプリをデプロイしてみましょう！

参考URL:

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
0