Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Watson API を呼び出すアプリをIBM Kubernetes上で動かそう with Python Flask / iks-watson-vr-flask

Watson API を呼び出すアプリをIBM Kubernetes上で動かそう with Python Flask / iks-watson-vr-flask

2019年7月10日「Watson API を呼び出すアプリをIBM Kubernetes上で動かそう」の資料です。

github: https://github.com/kyokonishito/watson-vr-flask

Kyoko Nishito

July 10, 2019
Tweet

More Decks by Kyoko Nishito

Other Decks in Technology

Transcript

  1. DEVELOPER ADVOCATE in TOKYO Tokyo Team is a part of

    Worldwide Developer Advocate Teams! Developer Advocate City Leader AKIRA ONISHI WW Developer Advocate KYOKO NISHITO WW Developer Advocate TAIJI HAGINO WW Developer Advocate AYA TOKURA Program Manager TOSHIO YAMASHITA WW Developer Advocate NORIKO KATO Client Developer Advocate YASUSHI OSONOI Digital Developer Advocate JUNKI SAGAWA
  2. 最初に: 事前準備の確認 10 既にのIBM Cloud 有償アカウント (Subscriptionを含む) をお持ちのかたは3のみ 実施ください。 1.IBMCloudアカウントの作成

    https://ibm.biz/BdzME9 2. IBM Cloud 従量課⾦アカウントへのアップグレード クレジットカードのご登録が必要です。 2分弱のビデオ(https://youtu.be/uFCSvAKapr0) によるアカウントのアップグレード ⽅法もご参照ください。 3. CLIのインストール、IKSクラスタの作成 https://ibm.box.com/v/iks-workshop ibm.
  3. 使⽤している主なテクノロジー 14 • Flask • Python⽤のマイクロWeb開発フレームワーク • Watson Visual Reconginition

    • IBM Watsonの画像認識サービス。ディープ・ラーニングを使⽤ して、画像に写った物体・情景・顔など様々なものを分析・認識 します。 • IBM Cloud Kubernetes Service • IBM CloudのKubernetesのマネージドサービス • Vue.js:UIを構築するためのプログレッシブフレームワーク • bootswatch: Bootstrapのテーマ • vue-qriously: Vue.jsでQRCodeを表⽰するライブラリ
  4. 15 Visual Recognition • 画像認識「⼀般種別」(General Tagging): • 画像の特徴を検知し、タグとして抽出しクラス・キーワー ド(⽝、⼭などの⼀般名詞)を⽣成します •

    顔検出(Facial Detection): • イメージ内の⼈物の顔を検出し、顔の⼀般的な年齢層と性 別も⽰します。 • 画像認識「カスタム」: • 識別を⾏いたいクラスのイメージを事前学習させ、 その分類器(Classifier)の出⼒を返します。 事前学習 不要 事前学習 必要 https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html
  5. WEB UI VISUAL RECOGNITION PYTHON FLASK 3 アーキテクチャー図 19 ---

    Worker Node --- Kubernetes クラスター: mycluster IBM Cloud Kubernetes Service
  6. IBM Cloud Kubernetes Service 20 Worker Node コンテナ (Pod) Kubernetes

    クラスター: mycluster 本⽇のハンズオンでは、 • 1つのKubernetes クラスター • 1つのWorker Node • 1つのコンテナ(Pod) をIBM Cloud Kubernetes Service 上に作成します
  7. 22 既にのIBM Cloud 有償アカウント (Subscriptionを含む) をお持ちのかたは3のみ 実施ください。 1.IBMCloudアカウントの作成 https://ibm.biz/BdzME9 2.

    IBM Cloud 従量課⾦アカウントへのアップグレード クレジットカードのご登録が必要です。 2分弱のビデオ(https://youtu.be/uFCSvAKapr0) によるアカウントのアップグレード ⽅法もご参照ください。 3. CLIのインストール、IKSクラスタの作成 https://ibm.box.com/v/iks-workshop ibm 1. (再度)事前準備の確認
  8. 2. レポジトリのClone 23 1. 以下のコマンドでレポジトリをCloneしてください $ git clone https://github.com/kyokonishito/watson-vr-flask.git $

    cd watson-vr-flask command.txtというファイルがありますので、 エディターで開いておきます。 今後使⽤するコマンドは全てここからコピペできます。
  9. 3. IBM Cloudへのログインと設定(1) 24 1. 以下のコマンドでIBM Cloudにログインします $ ibmcloud login

    エンドポイント⼊⼒があった場合は5.us-southを選択 E-mail(IBM Cloudのアカウント)と Passwordを聞かれるので⼊⼒します
  10. 25 出⼒例: API エンドポイント: https://api.ng.bluemix.net Email> [email protected] Password> 認証中です... OK

    ターゲットのアカウント Roadshow002 Roadshow002's Account (dd71031f1fed477da71fa11ba804a485) ターゲットのリソース・グループ Default API エンドポイント: https://api.ng.bluemix.net 地域: us-south ユーザー: [email protected] アカウント: Roadshow002 Roadshow002's Account (dd71031f1fed477da71fa11ba804a485) リソース・グループ: Default CF API エンドポイント: 組織: スペース: ヒント: Cloud Foundry アプリケーションおよびサービスを管理している場合 - 'ibmcloud target --cf' を使⽤して Cloud Foundry 組織/スペースを対話式にターゲットにするか、'ibmcloud target --cf-api ENDPOINT -o ORG -s SPACE' を使⽤して組織/スペースをターゲットにします。 - 現⾏の IBM Cloud CLI コンテキストを使⽤して Cloud Foundry CLI を実⾏する場合は、'ibmcloud cf' を使⽤します。
  11. 4. IBM Cloud コンテナレジストリ のセットアップ (1-1) 27 IBM コンテナー・レジストリーとは、Kubernetes 内の

    Docker で使⽤するイメージを、セキュア に保管できる場所です。 本ハンスオンではここにDockerイメージを作成して、IBM Cloud Kubernetes Serviceから利⽤し ます。 $ ibmcloud cr namespace-add <namespace> 1. 以下のコマンドで名前空間を設定してください 既にご⾃⾝の名前空間を設定済みの場合はこの⼿順はSKIPしてください。 <namespace> を、⾃分の名前等、他⼈と重ならない任意の名前空間に置き換えてください。 <namespace >はレジストリー「 us.icr.io」でユニークである必要があります。 例: ibmcloud cr namespace-add nishito_dojo_ws
  12. OK ID パブリック IP プライベート IP マシン・タイプ 状態 状況 ゾーン

    バージョン kube-hou02-pad88ab606a5db4da68c05a2a0637df148-w1 173.193.82.46 10.76.215.183 free normal Ready hou02 1.13.7_1527 5. ワーカー・ノードのデプロイメント が完了したことを確認 29 1.以下のコマンドを実⾏してください $ ibmcloud cs workers mycluster ワーカー・ノードのプロビジョニングが終了すると、状況 が Ready に変わり、IBM Cloud サー ビスのバインドを開始できます。
  13. 6. クラスター環境のセットアップ(1) 30 1. 以下のコマンドを実⾏してください $ ibmcloud cs cluster-config mycluster

    構成ファイルのダウンロードが完了すると、そのローカルの Kubernetes 構成ファイルのパスを 環境変数として設定するために使⽤できるコマンドが表⽰されます。 環境変数を設定して Kubernetes 構成ファイルをダウンロードするためのコマンドを取得します。 export KUBECONFIG=/Users/<username>/.bluemix/plugins/container- service/clusters/mycluster/kube-config-hou02-mycluster.yml OS X の場合の例: SET KUBECONFIG="C:¥Users¥<username>¥.bluemix¥plugins¥container- service¥clusters¥mycluster¥kube-config-hou02-mycluster.yml" Windows の場合の例:
  14. 6. クラスター環境のセットアップ(2) 31 2. KUBECONFIG 環境変数を設定するためのコマンドと してターミナルに表⽰されたものを、コピーして貼り付 け、実⾏(Enter⼊⼒)します。 $ export

    KUBECONFIG=/Users/<username>/.bluemix/plugins/container- service/clusters/mycluster/kube-config-hou02-mycluster.yml OS X の場合の例: 環境によって異なりますので、ご⾃⾝のものをご使⽤ください > SET KUBECONFIG="C:¥Users¥IBM InnovationCenter¥.bluemix¥plugins¥container- service¥clusters¥mycluster¥kube-config-hou02-mycluster.yml" Windows の場合の例:
  15. 6. クラスター環境のセットアップ(2) 32 $ kubectl version --short Client Version: v1.14.1

    Server Version: v1.13.7+IKS 出⼒例: 3. Kubernetes CLI サーバーのバージョンを調べて、ご 使⽤のクラスターで kubectl コマンドが正常に実⾏する ことを確認します。
  16. 7. クラスターにサービスをバインド(1) 33 1. Visual Recognition サービスを ご⾃⾝のIBM Cloudアカウントに作成します。 $

    ibmcloud service create watson_vision_combined lite <visual_recognition_service_name> クラスターにIBM Cloud サービスをバインドします。バインドされているすべての IBM Cloud サービスは、そのクラスターにデプロイされたアプリで使⽤できます。 <visual_recognition_service_name>にはサービスインスタンス名を⼊れます。 ご⾃⾝でわかりやすいものを設定します(英数字とハイフン(-)ドット(.)のみ使⽤可能,、最初の1⽂ 字は英数字)。 例: VisualRecognition01
  17. 7. クラスターにサービスをバインド (2­1) 2. 作成したVisual Recognitionのサービスインスタン スをクラスターの default の Kubernetes

    名前空間に バインドします。 $ ibmcloud cs cluster-service-bind --cluster mycluster --namespace default --service <visual_recognition_service_name> <visual_recognition_service_name>には1で設定したサービスインスタンス名を⼊れます。 34
  18. 7. クラスターにサービスをバインド (2­2) 名前空間にサービス・インスタンスをバインド中... OK 名前空間: default 秘密名: binding-visualrecognition01 出⼒例:

    35 出⼒された機密名(Secret Name)は後で使⽤するので、 command.txtの以下の<ここにコピペ>にコピーして ください (出⼒されたSecret Nameを以下にコピペしてください) visual_recognition_service Secret Name: <ここにコピペ> 35
  19. 7. クラスターにサービスをバインド(4) 36 3. クラスターの名前空間内に Kubernetes シークレッ トが作成されたことを確認します。 下記のコマンドを実⾏してください。 $

    kubectl get secrets --namespace=default NAME TYPE DATA AGE binding-visualrecognition01 Opaque 1 23h default-au-icr-io kubernetes.io/dockerconfigjson 1 4d2h default-de-icr-io kubernetes.io/dockerconfigjson 1 4d2h default-icr-io kubernetes.io/dockerconfigjson 1 4d2h default-jp-icr-io kubernetes.io/dockerconfigjson 1 4d2h default-token-84gtn kubernetes.io/service-account-token 3 4d2h default-uk-icr-io kubernetes.io/dockerconfigjson 1 4d2h default-us-icr-io kubernetes.io/dockerconfigjson 1 4d2h 出⼒例: すべての IBM Cloud サービスは、ユーザー名、パスワード、コンテナーがアクセスするために使⽤する URL など、機密情報を含む JSON ファイルによって定義されます。この情報を安全に保管するために、Kubernetes シークレットが使⽤されます。 この例では、アカウントに プロビジョンされる、Visual Recognition にアクセスするための資格情報がシークレットに格納されます。
  20. 8. Dockerイメージをビルド(1) 38 $ cd server (windowsの場合)$ copy ibm-credentials.env.sample ibm-credentials.env

    (macの場合)$ cp ibm-credentials.env.sample ibm-credentials.env $ ibmcloud cr build -t us.icr.io/<namespace>/watson-vr-flask:v1 . 今回はIBM Cloud内で直接イメージをビルドします。 Dockerを導⼊している場合はPC上でイメージをビルドしてプッシュする⽅法もあります。 1. watson-vr-flask/serverにcd後、IBM Cloud コンテナレジストリにイメージをビルドします。 下記のコマンドを実⾏します。 <namespace>は4で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます ibm-credentials.envはIBM Cloudサービスをバインドしていれば設定不要ですが、ファイルが必要なためコピー だけします。
  21. 8. Dockerイメージをビルド(2) 40 Dockerfile Dockerイメージは同じフォルダにあるDockerfileに基 づいて作成されます。 Dockerfile FROM python:3 ARG

    project_dir=/app/ RUN apt-get update RUN pip install --upgrade pip WORKDIR $project_dir COPY requirements.txt . RUN pip install -r requirements.txt (次ページへ続く)
  22. 8. Dockerイメージをビルド(3) 41 Docerfile(前ページからの続き) COPY config ./config COPY ibm-credentials.env ./

    COPY static ./static COPY app.py ./ ENV IBM_CREDENTIALS_FILE /app/ibm-credentials.env CMD ["python", "app.py"]
  23. 9. Kubernates マニフェストファイル server/ watson-vr-flask.ymlの編集(1) 42 Kubernetesの各種リソースを定義するファイルをマニフェストファイルと呼びます。 マニフェストファイル watson-vr-flask.ymlをご⾃⾝の環境に合わせて編集します。 1.

    29⾏⽬ image: us.icr.io/<namespace>/watson-vr-flask:v1 <namdspace>: 4で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます。 例 image: us.icr.io/ibmwork/watson-vr-flask:v1
  24. 9. Kubernates マニフェストファイル watson-vr-flask.ymlの編集(2) 43 2. 40⾏⽬ secretName: <secretName-binding-visual_recognition> <secretName-binding-visual_recognition>

    7でバインドしたサービスのSecret Nameです。 7でcommand.txtにコピペしていますので、確認してください。 またはkubectl get secrets --namespace=defaultコマンドで表⽰でき ます。 例 secretName: binding-visualrecognition01
  25. 11.アプリケーションの動作確認(1) 47 1. 下記のコマンドでIPアドレスを確認します。 $ ibmcloud cs workers mycluster OK

    ID Public IP Private IP Machine Type State Status Zone Version kube-hou02-padd51cc67e0354ea7b08e5df8c5fc2006-w1 50.23.39.97 10.76.141.206 free normal Ready hou02 1.10.8_1531* * update-message 出⼒例: 出⼒のPublic IPがIPアドレスです 2. http://<IPアドレス>:30000 にPCのブラウザーでアクセスします。
  26. 12. UIデザインの変更(2) 2. index_v2.html 16⾏⽬を<!-- -->で囲んでコメント アウトする <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.mi n.css"

    rel="stylesheet" integrity="sha384- C++cugH8+Uf86JbNOnQoBweHHAe/wVKN/mb0lTybu/NZ9sEYbd+BbbYtNpWYAsNP" crossorigin="anonymous"> 変更前: <!-- <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.mi n.css" rel="stylesheet" integrity="sha384- C++cugH8+Uf86JbNOnQoBweHHAe/wVKN/mb0lTybu/NZ9sEYbd+BbbYtNpWYAsNP" crossorigin="anonymous"> --> 変更後: <!-- -->で囲む
  27. 12. UIデザインの変更(3) 3. index_v2.html 20⾏⽬の<!-- -->を削除してコメン トアウトを無効にする。その後保存して閉じる。 <!-- <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.

    css" rel="stylesheet" integrity="sha384- w+8Gqjk9Cuo6XH9HKHG5t5I1VR4YBNdPt/29vwgfZR485eoEJZ8rJRbm3TR32P6k" crossorigin="anonymous"> --> 変更前: <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min. css" rel="stylesheet" integrity="sha384- w+8Gqjk9Cuo6XH9HKHG5t5I1VR4YBNdPt/29vwgfZR485eoEJZ8rJRbm3TR32P6k" crossorigin="anonymous"> 変更後: <!-- -->を削除
  28. 12. UIデザインの変更(5) 57 $ cd .. $ ibmcloud cr build

    -t us.icr.io/<namespace>/watson-vr-flask:v2 . 5. IBM Cloudコンテナレジストリにv2イメージをビルド します。 下記のコマンドを実⾏します。 <namespace>は4で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます 実⾏ディレクトリはserverです。
  29. 12. UIデザインの変更(7) 7. server/watson-vr-flask_v2.yml 29⾏⽬の イメージタグ v1を v2 に変更して保存します。 変更前

    image: us.icr.io/<namespace>/watson-vr-flask:v1 変更後 image: us.icr.io/<namespace>/watson-vr-flask:v2 注<namdspace>: 4で設定したコンテナレジストリの名前空間になっています。 例(変更後) image: us.icr.io/ibmwork/watson-vr-flask:v2
  30. 12. UIデザインの変更(8) 60 クラスターへアプリケーションv2をデプロイします。 デプロイの設定は先ほど作成したマニフェストファイル に設定してあります。下記のコマンドを実⾏してくださ い。 $ kubectl apply

    -f watson-vr-flask_v2.yml 完了後、 アプリケーションを表⽰していたWebブラウ ザーをリロードします。 (またはhttp://<IPアドレス>:30000 にアクセス) UIのデザインが変わっていれば変更完了です。
  31. 13.アプリケーションの削除 62 デプロイしたアプリケーションを削除します。 1. Deploymentを削除します。 $ kubectl delete deployment deploy-watson-vr-deployment

    2. Serviceを削除します。 $ kubectl delete service deploy-watson-vr-service もう⼀度デプロイする場合は、10で実施したコマンドを実施します。 尚、今回使⽤しているフリー・クラスターは 30 ⽇後に⾃動的に削除されます。
  32. 14.イメージの削除 63 ビルドしたイメージを削除します。 $ ibmcloud cr image-rm us.icr.io/<namespace>/watson-vr-flask:v1 UIを変更したイメージv2を作成した場合は、以下も実施。 <namespace>は4で設定したコンテナレジストリの名前空間です。

    4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます もう⼀度ビルドする場合は、8および12­5で実施したコマンドを実施します。 $ ibmcloud cr image-rm us.icr.io/<namespace>/watson-vr-flask:v2
  33. 15.サービスのアンバインド 64 クラスターにバインドしたサービスを解除(アンバイン ド)します。 $ ibmcloud cs cluster-service-unbind --cluster mycluster

    -- namespace default --service <visual_recognition_service_name> (尚、エラーが出ることがありますが、実際はアンバインドされているので、 ibmcloud cs cluster-service-ls --cluster mycluster で削除されたことを確認してください) もう⼀度バインドする場合は、7-2で実施したバインドのコマンドを実施します。 <visual_recognition_service_name>には7-1で設定したサービスインスタンス名を ⼊れます。 ibmcloud cs cluster-service-ls --cluster mycluster
  34. 16.コンテナレジストリの名前空間の削除 65 作成した名前空間を削除します(削除したい場合のみ)。 $ ibmcloud cr namespace-rm <namespace> 名前空間「nishito_dojo」を削除してよろしいですか? 名前空間を削除すると、その名前空間内の

    すべてのイメージおよび信⽤情報も削除されます。 [y/N]> と聞かれるので、yを⼊⼒してEnterを押します。 もう⼀度ビルドする場合は、4-1で実施したコマンドを実施します。 <namespace>は4-1で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます。 削除するとその名前空間内のイメージは全て削除されますので、当ハンズオン外で作成したイメージがあり保存 して置きたい場合は実⾏しないでください。
  35. 17. Visual Recognitionサービスの削除 66 作成したVisual Recognitionサービスを削除します(削 除したい場合のみ)。 $ ibmcloud service

    delete <visual_recognition_service_name> サービス VisualRecognition01 を削除しますか?> と聞かれるので、yを⼊⼒してEnterを押します。 もう⼀度作成する場合は、7-1で実施したコマンドを実施します。 <visual_recognition_service_name>には7­1で設定したサービスインスタンス名を⼊れます。 忘れた場合は ibmcloud service list コマンドで表⽰できます。 当ハンズオン外でVisual Recognitionサービスを利⽤している場合は実⾏しないでください。
  36. まとめ • IBM Cloud Kubernetes サービス上でWatsonサービ スをを使⽤する場合は、バインド+シークレットの設 定でAPI KEYのセットが不要(アプリ側で要読み込み処理)。 •

    IBM Cloudコンテナ・レジストリ上でコンテナイ メージのビルドができる。 • Kubernates マニフェストファイルを作成して、 設 定とともにKubernetes サービス上にアプリケーショ ンのデプロイができる。
  37. 71 CALL FOR CODE® チャレンジ 2019 • テーマに沿ったソリューションを構築するインターネットを 通じて参加可能な開発コンテスト •

    今回のテーマは「⾃然災害への対策や回復」または「⼈の健康」 「地域コミュニティが良好な状態になる⽀援すること」 • 18歳以上の開発者、1-5名のチームでIBM Cloudまたは IBM Systems を活⽤したアプリを開発 • 2019/7/29(⽉)11:59PMまでに提出 *⽶国⻄海岸標準時 賞⾦ 最優秀賞: $200,000 (2200万円*相当) 2位、3位: $25,000 (275万円*相当) 4位、5位: $10,000 (110万円*相当) *為替レートによって変動します https://callforcode.org/ https://ibm.biz/c4cjapan
  38. 73