Watson API を呼び出すアプリを IBM Kubernetes上で動かそう / WatsonAPI and IKS

2019/10/09に開催の「Watson API を呼び出すアプリを IBM Kubernetes上で動かそう」の資料です。

Transcript

1. Watson API を呼び出すアプリを IBM Kubernetes上で動かそう Kyoko Nishito Developer Advocate Tokyo City Team
2. Speaker ⻄⼾ 京⼦ Kyoko Nishito IBM Developer Advocate KyokoNishito
3. タイムテーブル 14:00-14:05 (5min) オープニング 資料ダウンロード,出席登録など ⽇本アイ・ビー・エム株式会社 デベロッパーアドボケイト ⻄⼾ 京⼦ 14:05-15:00 (55min) Watson API を呼び出すアプリケーショ ンをIBM Kubernetes上で動かそう 作成アプリケーション解説 ⽇本アイ・ビー・エム株式会社 デベロッパーアドボケイト ⻄⼾ 京⼦ 15:00-16:30 (90min) Watson API を呼び出すアプリケーショ ンをIBM Kubernetes上で動かそう コードチャレンジ(実習、休憩を含む) ⽇本アイ・ビー・エム株式会社 デベロッパーアドボケイト ⻄⼾ 京⼦ 〜17:00 クローズ
4. 本⽇の資料 本⽇の資料はこちらからダウンロードお願いします。 URLをクリックしたり、コマンドをコピペしたりできますので、 サイトでみるのではなく、ダウンロードをお勧めします。 http://ibm.biz/dojo20191009doc
5. 出席登録 こちらのURLにアクセスして、IBM Cloudにログイン お願いします。 アカウント未登録の⽅もこちらから登録お願いします。 https://ibm.biz/BdzJad
6. 事前準備 https://ibm.box.com/v/dojo-iks-watson 未実施の⽅はクラスターの作成に時間がかかりますので、 5. IBM Cloud上にてIKSクラスタを作成する を必ず今実施お願いします。
7. 学習の⽬的とゴール ⽬的 Watson APIを呼び出すアプリケーションをKubernetes上で 動かす⽅法を体験する ゴール アプリケーションをKubernetes上で動かせるようになる
8. 蛇 作成アプリケーション解説
9. どんなアプリケーション? 9 スマートフォンのカメラやファイ ルから取得した画像を送ると、 Watson Visual Recognitionで 画像認識し、 結果を表⽰するPython Flaskアプ リケーションを IBM Kubernetes Service上にデプ ロイします。
10. 使⽤している主なテクノロジー 10 • 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を表⽰するライブラリ
11. 11 Visual Recognition • 画像認識「⼀般種別」(General Tagging): • 画像の特徴を検知し、タグとして抽出しクラス・キー ワード(⽝、⼭などの⼀般名詞)を⽣成します • 顔検出(Facial Detection): (2019/09/12に廃⽌) • イメージ内の⼈物の顔を検出し、顔の⼀般的な年齢層と 性別も⽰します。 • 画像認識「カスタム」: • 識別を⾏いたいクラスのイメージを事前学習させ、 その分類器(Classifier)の出⼒を返します。 事前学習 不要 事前学習 必要 https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html
12. 12 画像認識「⼀般種別」 (General Tagging) 事前学習済みのモデルの出⼒を返します。 具体的な分類クラスの⼀覧は、クラスが⽇々更新されているため⾮公開ですが、 2016年12⽉時点で数千個の分類クラスがあります。 General Taggingには、「default」の分類クラス以外に「food」「explicit」とい う2つの特別な⽬的の分類クラスがあります。 foodは⾷べ物に特化した分類クラスです。explicitはネット上で不適切な画像をチェ ックするクラスとなっています。 今回は、画像認識「default」「food」を使います。
13. アーキテクチャー図 13 WEB UI VISUAL RECOGNITION PYTHON FLASK 3
14. VISUAL RECOGNITION PYTHON FLASK 3 WEB UI アーキテクチャー図 14 この部分のコンテナイメージを 作成します
15. WEB UI VISUAL RECOGNITION PYTHON FLASK 3 アーキテクチャー図 15 --- Worker Node --- Kubernetes クラスター: mycluster IBM Cloud Kubernetes Service
16. IBM Cloud Kubernetes Service 16 Worker Node コンテナ (Pod) Kubernetes クラスター: mycluster 本⽇のコードチャレンジでは、 • 1つのKubernetes クラスター • 1つのWorker Node • 1つのコンテナ(Pod) をIBM Cloud Kubernetes Service上に作成します
17. アーキテクチャー図(+Development) 17 WEB UI VISUAL RECOGNITION PYTHON FLASK 3 DEVELOPER CONTAINER REGISTRY DOCKER IMAGE Build a docker image with Container Registry
18. Flaskアプリ解説 18 WEB UI VISUAL RECOGNITION PYTHON FLASK 3
19. ソース 19 https://github.com/kyokonishito/watson-vr-flask
20. server/requirements.txt 20 必要なライブラリの指定 flask >= 1.0.2, < 2.0 ibm-watson >= 3.0.4, < 4.0 ibm-watsonはpython⽤のWatsonAPI SDK localで実⾏する場合は以下のコマンドでライブラリーをイン ストールする︓ pip install -r requirements.txt
21. server/app.py 21 3⾏⽬︓ Visual Recognitionライブラリのインポート from ibm_watson import VisualRecognitionV3
22. server/app.py 22 14⾏⽬: APIKEYはソースに書かず、 IKSの場合はVISUAL_RECOGNITION_BIND_PATH からAPIKEY読み込み if os.path.exists(VISUAL_RECOGNITION_BIND_PATH): # For IKS with open(VISUAL_RECOGNITION_BIND_PATH, 'r') as conffile: confData = json.load(conffile) visual_recognition = VisualRecognitionV3( version = VISUAL_RECOGNITION_API_VERSION, iam_apikey= confData['apikey'] ) VISUAL_RECOGNITION_BIND_PATH = '/opt/vr-service-bind/binding' server/watson-vr-flask.ymlでマウントしているPATH (後で解説)
23. server/app.py 23 else: visual_recognition = VisualRecognitionV3( version = VISUAL_RECOGNITION_API_VERSION ) IKS以外の場合は、 ibm-credentials.envから読み込み(SDKで⾃動で実施) IKS以外で実⾏する場合は環境変数IBM_CREDENTIALS_FILE にibm-credentials.envのフルパスをセット 21⾏⽬
24. server/app.py 24 classifyメッソド呼出 32⾏⽬、44⾏⽬ @app.route('/classifyImages', methods=['POST']) def classifyImages(): file = request.files['file'] if file: classes = visual_recognition.classify( file, threshold='0.6', accept_language='ja').get_result() return json.dumps(classes) return 参考: API Document https://cloud.ibm.com/apid ocs/visual- recognition?code=python @app.route('/classifyCustomImages', methods=['POST']) def classifyCustomImages(): file = request.files['file'] if file: classes = visual_recognition.classify( file, threshold='0.6', classifier_ids=["food"], # ここでClassification ID を指定 accept_language='ja').get_result() return json.dumps(classes) return カスタムクラスを使⽤する場 合はここにClassifier IDを セットする
25. server/Dockerfile 25 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 COPY config ./config COPY ibm-credentials.env ./ COPY static ./static COPY app.py ./ python3のベースイメージ project_dirに/app/をセット python3のベースイメージの最新化 pipコマンドの最新化 作業ディレクトリを/app/とし、作成 してカレントディレクトリを移動 requirements.txtを/app/にコピー requirements.txt に書いてあるライブラリの導⼊ configディレクトリごと/app/configにコピー ibm-credentials.envを/app/にコピー staticディレクトリごと/app/staticにコピー app.pyを/app/にコピー 次ページに続く
26. server/Dockerfile 26 ENV IBM_CREDENTIALS_FILE /app/ibm-credentials.env CMD ["python", "app.py"] 環境変数IBM_CREDENTIALS_FILEに /app/ibm-credentials.envをセット pythonをapp.pyのパラメータで実⾏ 環境変数IBM_CREDENTIALS_FILEに/app/ibm-credentials.envをセットしていますが、 IKSの場合はバインドしたSecretsより読むので、今回ibm-credentials.envは使いません。 ローカルDockerまたはIKS以外の環境のための処理となります。
27. server/watson-vr-flask.yml 27 spec: containers: - name: deploy-watson-vr image: us.icr.io/<namespace>/watson-vr-flask:v1 ports: - containerPort: 5000 # imagePullPolicy: Always volumeMounts: - mountPath: /opt/vr-service-bind name: service-bind-volume volumes: - name: service-bind-volume secret: defaultMode: 420 secretName: <secretName-binding-visual_recognition> 26⾏⽬以降: Visual Recognition にアクセスするため のシークレットをボリュームとしてここ にマウントしている。 バインドすると資格情報がこの下の bindingに⼊る。 サービスをバインドした時のsecrets nameをセット 参考: https://cloud.ibm.com/docs/containers?topic=containers-service-binding#reference_secret
28. 実⾏中のコンテナのシェルで確認 Kubernatesクラスターにdeploy後、IBM Cloudにログイン、ibmcloud ks cluster config – clusterコマンドでconfigをダウンロード後、環境変数KUBECONFIGセット後実施 $ kubectl get pod NAME READY STATUS RESTARTS AGE deploy-watson-vr-deployment-cc6cc66cb-btt94 1/1 Running 0 5d23h $ kubectl exec -it deploy-watson-vr-deployment-cc6cc66cb-btt94 -- /bin/bash root@deploy-watson-vr-deployment-cc6cc66cb-btt94:/app# root@deploy-watson-vr-deployment-cc6cc66cb-btt94:/app# ls /opt/vr-service-bind binding root@deploy-watson-vr-deployment-cc6cc66cb-btt94:/app# cat /opt/vr-service- bind/binding 実⾏中のpod名を取得 実⾏中のコンテナへのシェルを取得(コンテナに⼊る, ⻩⾊部分は⾃分のpod nameに変更) バインドしたVolumeの確認 その他Dockerファイルで指定した通りに設定されているか確認してみましょう! シェルを抜けるのはexitコマンドです。
29. コードチャレンジ: IKS+Watson 〜17:00 休憩⾃由 不明な点は 質問
30. 30 https://ibm.box.com/v/dojo-iks-watson 1. (再度)事前準備の確認 尚、本⽇のチャレンジは、ほぼほぼコマンド操作です︕ ターミナル(Mac) または コマンドウィンドウ(Win)を 使います。
31. 2. レポジトリのClone 31 1. 以下のコマンドでレポジトリをCloneしてください $ git clone https://github.com/kyokonishito/watson-vr-flask.git $ cd watson-vr-flask command.txtというファイルがありますので、 エディターで開いておきます。 今後使⽤するコマンドは全てここからコピペできま す。
32. 3. IBM Cloudへのログインと設定(1) 32 1. 以下のコマンドでIBM Cloudにログインします $ ibmcloud login -a cloud.ibm.com -r us-south -g Default E-mail(IBM Cloudのアカウント)と Passwordを聞かれるので⼊⼒します
33. 33 出⼒例: API エンドポイント: https://cloud.ibm.com Email> xxxxxxxx@gmail.com Password> 認証中です... OK ターゲットのアカウント XXXXXXXX's Account (bxxxxxxxx07e44eaba7711faxxxxxxx) ターゲットのリソース・グループ Default ターゲットの地域 us-south API エンドポイント: https://cloud.ibm.com 地域: us-south ユーザー: xxxxxxxx@gmail.com アカウント: XXXXXXXX's Account (bxxxxxxxx07e44eaba7711faxxxxxxx) リソース・グループ: 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' を使⽤します。
34. 3. IBM Cloudへのログインと設定(2) 34 2. 以下のコマンドでCloudFoundry 環境をターゲット に設定します。 $ ibmcloud target --cf
35. 4. IBM Cloud コンテナレジストリ のセットアップ (1-1) 35 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
36. 4. IBM Cloud コンテナレジストリ のセットアップ(1-2) 36 設定した名前空間は後で使⽤するので、 command.txtの以下の<ここにコピペ>にコピーして ください (設定したnamespaceを以下にコピペしてください) <namespace>: <ここにコピペ>
37. OK ID パブリック IP プライベート IP フレーバー 状態 状況 ゾーン バージョン kube-bm5bm4gd0v63ean36gk0-mycluster-default-00000050 173.193.99.122 10.47.64.227 free normal Ready hou02 1.14.6_1533* 5. ワーカー・ノードのデプロイメント が完了したことを確認 37 1.以下のコマンドを実⾏してください $ ibmcloud ks workers mycluster ワーカー・ノードのプロビジョニングが終了すると、状況 が Ready に変わり、IBM Cloud サー ビスのバインドを開始できます。
38. 6. クラスター環境のセットアップ(1) 38 1. 以下のコマンドを実⾏してください $ ibmcloud ks 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 の場合の例:
39. 6. クラスター環境のセットアップ(2) 39 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 の場合の例:
40. 6. クラスター環境のセットアップ(2) 40 $ kubectl version --short Client Version: v1.14.1 Server Version: v1.14.6+IKS 出⼒例: 3. Kubernetes CLI サーバーのバージョンを調べて、ご 使⽤のクラスターで kubectl コマンドが正常に実⾏する ことを確認します。
41. 7. クラスターにサービスをバインド(1) 41 1. Visual Recognition サービスを ご⾃⾝のIBM Cloudアカウントに作成します。 $ ibmcloud resource service-instance-create <visual_recognition_service_name> watson-vision-combined lite us-south クラスターにIBM Cloud サービスをバインドします。バインドされているすべての IBM Cloud サービスは、そのクラスターにデプロイされたアプリで使⽤できます。 <visual_recognition_service_name>にはサービスインスタンス名を⼊れます。 ご⾃⾝でわかりやすいものを設定します(英数字とハイフン(-)ドット(.)のみ使⽤可能,、最初の１ ⽂字は英数字)。 例: VisualRecognition01
42. 7. クラスターにサービスをバインド (2­1) 2. 作成したVisual Recognitionのサービスインスタン スをクラスターの default の Kubernetes 名前空間に バインドします。 $ ibmcloud ks cluster service bind --cluster mycluster --namespace default --service <visual_recognition_service_name> <visual_recognition_service_name>には１で設定したサービスインスタンス名を⼊れます。 42
43. 7. クラスターにサービスをバインド (2­2) 名前空間にサービス・インスタンスをバインド中... OK 名前空間: default 秘密名: binding-visualrecognition01 出⼒例: 43 出⼒された機密名(Secret Name)は後で使⽤するので、 command.txtの以下の<ここにコピペ>にコピーして ください (出⼒されたSecret Nameを以下にコピペしてください) visual_recognition_service Secret Name: <ここにコピペ> 43
44. 7. クラスターにサービスをバインド(4) 44 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 にアクセスするための資格情報がシークレットに格納されます。
45. クラスターが構成され、ローカル環境でアプリをクラ スターにデプロイする準備が整いました︕
46. 8. Dockerイメージをビルド(1) 46 $ 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でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます ibm-credentials.envはIBM Cloudサービスをバインドしていれば設定不要ですが、ファイルが必要なためコピーだけします。
47. ビルドには3分から5分ほどかかります
48. 8. Dockerイメージをビルド(2) 48 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 (次ページへ続く)
49. 8. Dockerイメージをビルド(3) 49 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"]
50. 9. Kubernates マニフェストファイル server/ watson-vr-flask.ymlの編集(1) 50 Kubernetesの各種リソースを定義するファイルをマニフェストファイルと呼びます。 マニフェストファイル watson-vr-flask.ymlをご⾃⾝の環境に合わせて編集します。 1. 29⾏⽬ image: us.icr.io/<namespace>/watson-vr-flask:v1 <namdspace>: ４で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます。 例 image: us.icr.io/ibmwork/watson-vr-flask:v1
51. 9. Kubernates マニフェストファイル watson-vr-flask.ymlの編集(2) 51 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
52. ビルドは完了しましたか︖
53. いよいよデプロイです!
54. 10.クラスターへのアプリケーション デプロイ 54 クラスターへアプリケーションをデプロイします。 デプロイの設定は先ほど作成したマニフェストファイル に設定してあります。下記のコマンドを実⾏してくださ い。 $ kubectl apply -f watson-vr-flask.yml
55. 11.アプリケーションの動作確認(1) 55 1. 下記のコマンドでIPアドレスを確認します。 $ ibmcloud ks workers mycluster OK ID パブリック IP プライベート IP フレーバー 状態 状況 ゾーン バージョン kube-bm5bm4gd0v63ean36gk0-mycluster-default-00000050 173.193.99.122 10.47.64.227 free normal Ready hou02 1.14.6_1533* 出⼒例: 出⼒のパブリック IPがIPアドレスです 2. http://<IPアドレス>:30000 にPCのブラウザーでアクセスします。
56. 11.アプリケーションの動作確認(2) 56 1. 「ファイルを選択」 ボタンをクリックして sampleフォルダーにあ るsushi.pngファイルを 選択します。 2. 「Watsonで認識 （Watson学習済みモデ ルを利⽤）」をクリック し, 画像認識結果を確認
57. 11.アプリケーションの動作確認(2) 57 3. 「 Watsonで認識（カス タム学習モデル IBM提供 「Food」を利⽤）」を クリックし, 画像認識結果を 確認 これは⾷品に特化してIBMが 作成したモデルを使⽤した認 識結果です。
58. 11.アプリケーションの動作確認(3) 58 4. スマートフォンでも結果を確認します ⼀番下にQRコードが表⽰されているので、スマートフォ ンのカメラで読み込み、ブラウザーでアクセスします。 スマートフォンの場合は「ファイルを選択」をクリック 後、「写真を撮る」でとった写真を認識に使⽤できます。 他いろいろな写真をとって試してみましょう。
59. 以降は時間があれば実施ください!
60. 12. UIデザインの変更(1) server/static/index.htmlを編集し、デザインを変更してversion2をデプロイしてみましょう。 1. ファイルのコピー 下記のコマンドでindex.htmlをindex_v1.htmlとindex_v2.htmlに コピーします。 cd static (Winの場合)$ copy index.html index_v1.html (Winの場合)$ copy index.html index_v2.html (macの場合)$ cp index.html index_v1.html (macの場合)$ cp index.html index_v2.html
61. 12. UIデザインの変更(2) 2. index_v2.html 16⾏⽬を<!-- -->で囲んでコメント アウトする <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.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.min.css" rel="stylesheet" integrity="sha384-C++cugH8+Uf86JbNOnQoBweHHAe/wVKN/mb0lTybu/NZ9sEYbd+BbbYtNpWYAsNP" crossorigin="anonymous"> --> 変更後: <!-- -->で囲む
62. 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"> 変更後: <!-- -->を削除
63. 12. UIデザインの変更(参考) デザインテンプレートはbootswatchを利⽤しています。 v1はcerulean、v2はdarklyです。 どのようなデザインかは以下を参照してください: https://bootswatch.com/ また組み込んでいるcssのCDNは以下を使⽤しています: https://www.bootstrapcdn.com/bootswatch/
64. 12. UIデザインの変更(4) server/static/index.htmlを編集し、デザインを変更してversion2をデプロイしてみましょう。 4. ファイルのコピー 下記のコマンドでindex_v2.htmlをindex.htmlにコピーします。 (Winの場合)$ copy index_v2.html index.html (macの場合)$ cp index_v2.html index.html
65. 12. UIデザインの変更(5) 65 $ cd .. $ ibmcloud cr build -t us.icr.io/<namespace>/watson-vr-flask:v2 . 5. IBM Cloudコンテナレジストリにv2イメージをビル ドします。 下記のコマンドを実⾏します。 <namespace>は４で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます 実⾏ディレクトリはserverです。
66. 12. UIデザインの変更(６) マニフェストファイル watson-vr-flask.yml をコピーして、v2イメージ⽤のマニフェストファイ ルを作成します。 6. ファイルのコピー 下記のコマンドでwatson-vr-flask.ymlをwatson-vr-flask_v2.yml に コピーします。 (Winの場合)$ copy watson-vr-flask.yml watson-vr-flask_v2.yml (macの場合)$ cp watson-vr-flask.yml watson-vr-flask_v2.yml
67. 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>: ４で設定したコンテナレジストリの名前空間になっています。 例(変更後) image: us.icr.io/ibmwork/watson-vr-flask:v2
68. 12. UIデザインの変更(8) 68 クラスターへアプリケーションv2をデプロイします。 デプロイの設定は先ほど作成したマニフェストファイル に設定してあります。下記のコマンドを実⾏してくださ い。 $ kubectl apply -f watson-vr-flask_v2.yml 完了後、 アプリケーションを表⽰していたWebブラウ ザーをリロードします。 (またはhttp://<IPアドレス>:30000 にアクセス) UIのデザインが変わっていれば変更完了です。
69. 12. UIデザインの変更(9) 69 元に戻します。以下のコマンドを実⾏します。 $ kubectl apply -f watson-vr-flask.yml または以下のコマンドでロールバックをしても 元に戻ります。 $ kubectl rollout undo deployment deploy-watson-vr-deployment
70. 13.アプリケーションの削除 70 デプロイしたアプリケーションを削除します。 1. Deploymentを削除します。 $ kubectl delete deployment deploy-watson-vr-deployment 2. Serviceを削除します。 $ kubectl delete service deploy-watson-vr-service もう⼀度デプロイする場合は、10で実施したコマンドを実施します。 尚、今回使⽤しているフリー・クラスターは 30 ⽇後に⾃動的に削除されます。 ここから先は作成したアプリを削除したい⽅のみ実施してください。
71. 14.イメージの削除 71 ビルドしたイメージを削除します。 $ ibmcloud cr image-rm us.icr.io/<namespace>/watson-vr-flask:v1 UIを変更したイメージv2を作成した場合は、以下も実施。 <namespace>は４で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます もう⼀度ビルドする場合は、8および12­5で実施したコマンドを実施します。 $ ibmcloud cr image-rm us.icr.io/<namespace>/watson-vr-flask:v2
72. 15.サービスのアンバインド 72 クラスターにバインドしたサービスを解除(アンバイン ド)します。 $ ibmcloud ks cluster service unbind --cluster mycluster --namespace default --service <visual_recognition_service_name> (尚、エラーが出ることがありますが、実際はアンバインドされているので、 ibmcloud ks cluster service ls --cluster mycluster で削除されたことを確認してください) もう⼀度バインドする場合は、７-2で実施したバインドのコマンドを実施します。 <visual_recognition_service_name>には7-１で設定したサービスインスタンス名を⼊れます。 ibmcloud ks cluster service ls --cluster mycluster
73. 16.コンテナレジストリの名前空間の削除 73 作成した名前空間を削除します(削除したい場合のみ)。 $ ibmcloud cr namespace-rm <namespace> 名前空間「nishito_dojo」を削除してよろしいですか? 名前空間を削除すると、その名前空間内の すべてのイメージおよび信⽤情報も削除されます。 [y/N]> と聞かれるので、yを⼊⼒してEnterを押します。 もう⼀度ビルドする場合は、4-1で実施したコマンドを実施します。 <namespace>は4-1で設定したコンテナレジストリの名前空間です。 4でcommand.txtにコピペしていますので、確認してください。 または ibmcloud cr namespace-list コマンドで表⽰できます。 削除するとその名前空間内のイメージは全て削除されますので、当ハンズオン外で作成したイメージがあり保存して置きたい場合は実⾏しないでく ださい。
74. 17. Visual Recognitionサービスの削除 74 作成したVisual Recognitionサービスを削除します(削 除したい場合のみ)。 $ ibmcloud resource service-instance-delete <visual_recognition_service_name> ID crn:v1:bluemix:public:watson-vision-combined:us-south:a/xxxxxxxxx:xxxxxxxx:: の サービス・インスタンス VisualRecognition01 を本当に削除しますか? [y/N] > と聞かれるので、yを⼊⼒してEnterを押します。 もう⼀度作成する場合は、7-1で実施したコマンドを実施します。 <visual_recognition_service_name>には7­1で設定したサービスインスタンス名を⼊れます。 忘れた場合は ibmcloud resource service-instances コマンドで表⽰できます。 当ハンズオン外でVisual Recognitionサービスを利⽤している場合は実⾏しないでください。
75. --- ここまでがオプションです ---
76. Watson Visual Recognition カスタムクラスを作 ろう! https://qiita.com/nishikyon/items/7d1c07e2f50c1002e815 Visual Recognitionのカスタムクラスを作成して、本⽇作成したアプリに 組み込んでみましょう。Visual RecognitionサービスをGUIで作成する場合 は名前にスペースを⼊れないように変更してください。 カスタムクラスを作成後、/server/app.pyの def classifyCustomImages():内のclassifier_ids=["food"]のfoodを Classifier IDに変更してください (51⾏⽬)。 オプションチャレンジ
77. まとめ • IBM Cloud Kubernetes サービス上でWatsonサー ビスをを使⽤する場合は、バインド+シークレット の設定でAPI KEYのセットが不要(アプリ側で要読み込み 処理)。 • IBM Cloudコンテナ・レジストリ上でコンテナイ メージのビルドができる。 • Kubernates マニフェストファイルを作成して、 設 定とともにKubernetes サービス上にアプリケー ションのデプロイができる。