IBM Developer Dojo OpenShift101 ハンズオンワークショップ Tokyo City Team

ハンズオンワークショップ 4-1. IBM CloudでOpenShiftを使う 4-2. OpenShift ワークショップ

今回はGithub上にあるコードからアプリをOpenShift上にDeployします。① このアプリはIBM Cloud のWatson Visual Recognition(画像認識)を利⽤しています。② K8s Deploy Dockerhub等 Build docker レジストリ Dockerfile ソースコード (Node.js) Catalog template (JSON/YAML) S2I Build (OpenShift上でBuild) DevOps Pipeline アプリやミドルウエアといった直接的なソー スではなく、アプリやミドルウエアを OpenShift上どう動かすか、という構成/定義 類を雛型として記述したものです 今回のハンズオンで⾏うこと Github等 Visual Recognition (画像認識) API ① ②

4-1. IBM CloudでOpenShiftを使う 1. IBM Cloud にログイン 本⽇は http://ibm.biz/BdqsqL にアクセスして 右上の「ログイン」から ログインしてください 通常は https://cloud.ibm.com/ からログイン可能です ライトアカウント対象外です PAYGアカウントでお使い頂けます

4-1. IBM CloudでOpenShiftを使う 2. ダッシュボードから「カタログ」をクリック

4-1. IBM CloudでOpenShiftを使う 3. フィルターに[ライト]がある場合は[x]をクリックして削除 ↑フィルターが消える

4-1. IBM CloudでOpenShiftを使う 4. 左側のカテゴリーから「コンテナ」をクリック、 「Red Hat OpenShift Cluster」をクリック

4-1. IBM CloudでOpenShiftを使う 5. Red Hat OpenShift Cluster作成画⾯が表⽰されます。 ただしライトアカウントでは作成できないため、 ライトアカウントの場合は「アップグレード」ボタンが表⽰されます。

4-1. IBM CloudでOpenShiftを使う 6. 「 Red Hat OpenShift Cluster 」を作成します。動画で⾒てみましょう: https://youtu.be/UJ2frartWFk

4-1. IBM CloudでOpenShiftを使う 補⾜情報: 3分でわかるIBM Cloudシリーズ(動画) • OpenShiftクラスターに対してocコマンドでアクセスする • OpenShiftクラスターにHelloWorldアプリをデプロイしてみよう IBM Demos (デモ動画サイト、英語): • Red Hat OpenShift on IBM Cloud

4-2. OpenShift ワークショップ IBM Watson Visual Recognitionを使った node.jsの画像認識Webアプリ をOpenShift on IBM Cloudで実⾏する 【ワークショップ完了後のアプリ画⾯イメージ】 https://github.com/kyokonishito/watson- vr-node ソースはこちら︓

今回使⽤するIBM Watson API – Visual Recognition 2019年3⽉現在 Watson Assistant アプリケーションに⾃然⾔語インターフェースを追加して エンドユーザとのやり取りを⾃動化 Text to Speech テキスト⽂章を⾳声に変換する Speech to Text ⾳声をテキスト⽂章に変換する Visual Recognition 画像コンテンツに含まれる意味を検出する Discovery 先進的な洞察エンジンを利⽤して、デー タの隠れた価値を解明し、回答やトレン ドを発⾒する Discovery News Discovery上に実装され、エンリッチ情報 も付加されたニュースに関する公開デー タセット Personality Insights テキストから筆者の性格を推定する Language Translator テキストを他⾔語へ翻訳を⾏う Natural Language Understanding ⾃然⾔語処理を通じてキーワード抽出、エン ティティー抽出、概念タグ付け、関係抽出な どを⾏う Natural Language Classifier テキスト⽂章の分類を⾏う(質問の意図推定など) Tone Analyzer(⽇本語未対応) テキストから筆者の感情、社交性、⽂体を解析 Knowledge Studio コーディングなしに、業務知識から⽣成した 機械学習モデルで、⾮構造テキストデータか ら洞察を取得(学習⽀援ツール) ⼼理系 ⾔語系 照会応答系 知識探索系 ⾳声系 画像系 https://www.ibm.com/watson/jp-ja/developercloud/services-catalog.html

Watson Visual Recognition (画像認識) 画像認識「⼀般種別」(General Tagging): • 事前学習済みの分類器の出⼒を返す 画像認識「カスタム」: • 識別を⾏いたいクラスのイメージを事前学習させ、 その分類器の出⼒を返す 事前学習 不要 事前学習 必要 https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html 画像に写った物体・情景など様々なものを分析・認識するAIサービス

操作の流れ 1. ワークショップ⽤の環境へのIBM Cloud ID関連付け 2. IBM Cloud Shellの準備 3. Visual Recognitionサービスの作成 4. 資格情報のダウンロード 5. 資格情報のアップロード 6. OpenShiftアプリの作成

1. ワークショップ⽤のIBM Cloud環境にご⾃⾝の IBM Cloud IDを関連付ける 注意事項 ・ブラウザはFirefoxをご利⽤ください ・本ワークショップ⽤のIBM Cloud環境はセミナー開催時から 24時間限定でお使いいただけます ・IBM Cloud上で継続的にOpenShiftを検証する環境が 必要な場合は、4-1. OpenShiftをご利⽤ください ・ローカルでOpenShiftを検証する環境を構築されたい場合は、 Appendix. Minishiftをご利⽤ください

1.1: 下記URLにFirefoxブラウザでアクセスする https://osdojo.mybluemix.net 1.2: [Lab Key] 、[Your IBMid]にご⾃⾝のIDを ⼊⼒し、チェックボックスにチェックを⼊れて [Submit]をクリックする Lab Keyは oslab です。 oslab

1.3: Congratulations! が表⽰されたら [1. Log in IBM Cloud] リンクをクリックする

1.5: IBM Cloudダッシュボードの右上のアカウント情報の 右横の v をクリックする 1.6:[xxxxxxx – IBM] をクリックする

1.7: IBM Cloudダッシュボードの右上のアカウント情報が 変更されたことを確認し、[リソースの要約]の [Clusters]をクリックする

1.8: Clustersの下のクラスター名をクリックする ※本ワークショップではこちらのクラスタを使⽤します ※クラスター名は⾃動的に割り当てられます

1.9: [OpenShift Webコンソール]ボタンをクリックします。

1.10: Securityの警告が表⽰された場合は、 [Advanced]→[Accept the Risk and Continue]を クリックします。 (⾃⼰証明書を使⽤しているため警告が出ます)

1.11: [OpenShift Container Platform]画⾯が表⽰されたら 右上のアカウント情報の隣の ▼ をクリックし、 [Copy Login Command]を選択する

1.12: [Display Token] をクリックし、 [Log in with this token ]の下のコマンドをコピーする マウスで選択して クリップボードに コピー

2. IBM Cloud Shellの準備 2.1:ブラウザーで最初に開いていたIBM Cloudのクラスターの 概要が表⽰されているタブをクリックする タブが⾒つからない場合は cloud.ibm.comにアクセス

2.2: 上のメニューからIBM Cloudシェルのアイコン をクリック

2.3: ブラウザで新しいタブが開き、しばらく待つとIBM Cloud Shellのセッションが開始されます。

2.4: 前章1.11でコピーしたコマンドをペーストし実⾏する 2.5:「Using project "default"」が表⽰されれば OKです

3. Visual Recognitionサービスの作成 Visual Recognitionを新規に作成する⽅は次のページに進んでください。 既に以前に作成済みの⽅は、作成済みのものが使⽤できます。 作成済みの⽅は以下の⼿順を参照しVisual Recognitionの管理の画⾯を表⽰後、 http://ibm.biz/watson-service-screen 当資料「4. Visual Recognitionサービスibm-credentials.env のダウンロード」まで進んでく ださい。 ブラウザー上で、新しいタブを開きます。 https://cloud.ibm.com/ にアクセスして、ダッシュボードを開きます。 XXXXXXX – IBM ではなく⾃分のアカウントになっていることを確認し、異なっ ている場合はクリックして変更します

3.1 上部のメニューにある「カタログ」をクリックします

3.2 Visual Recognitionサービスの選択 1. 左側のメニューから「AI」をクリック 2. 下にスクロールして表⽰された「Visual Recognition」をクリック

地域の選択は「ダラス」、価格プランに「ライト」が選択されていることを確認して、 「作成」をクリック 3.3 Visual Recognitionサービスを作成する

3.4 Visual Recognitionサービスを作成確認、管理画⾯の表⽰ 下の画⾯が出たら、作成完了です。 左のメニューから「管理」をクリックして管理画⾯を表⽰します

資格情報の「ダウンロード」を クリックし、⾃分のPCに ibm-credentials.env という ファイルを保存します。 4. Visual Recognitionサービス ibm-credentials.env のダウンロード

5. ibm-credentials.env のアップロード 5.1. ブラウザーのIBM Cloud Shellのタブをクリックし て表⽰します。

5. ibm-credentials.env のアップロード 5.2. メニューバーのアップロードアイコンをクリック、 ibm-credentials.envを指定してアップロード

5. ibm-credentials.env のアップロード 5.3 Completedになったら、XをクリックしてTransferの ウィンドウを閉じる

5. ibm-credentials.env のアップロード 5.4 ファイルアップロードを確認 ls ターミナルに下記コマンドを⼊⼒し、確認します。 出⼒例: 尚、今後のコマンドは以下からコピペできます https://ibm.box.com/v/openshift-101-command

6.1. プロジェクトを作成する oc new-project watson-vr --display-name="watson-vr" -- description="Sample Watson Visual Recognition Node.js app" ターミナルに下記コマンドを⼊⼒し、新しいアプリケーション⽤に新しい プロジェクトを作成します。 (コマンドは１⾏です。コマンドは以下からコピペできます。 https://ibm.box.com/v/openshift-101-command) 6. Openshift アプリの作成 出⼒例:

6.2. アプリケーションの作成 ターミナルに下記のコマンドを⼊⼒し、 githubのソースコードから、アプ リケーションを作成します。 (コマンドは１⾏です。コマンドは以下からコピペできます。 https://ibm.box.com/v/openshift-101-command) oc new-app https://github.com/kyokonishito/watson-vr-node.git --build-env-file=./ibm-credentials.env --build-env CLASSIFIER_ID=food 6. OpenShiftアプリの作成

6.2. アプリケーションの作成 出⼒例: 6. OpenShiftアプリの作成

6.3 ビルドログを表⽰します oc logs -f bc/watson-vr-node ターミナルに下記のコマンドを⼊⼒しビルドログを表⽰し、 「 Push successful 」で終わるまで待ちます。 6.4 ロードバランサーのサービスを作成します oc expose dc watson-vr-node --port=3000 --type=LoadBalancer -- name=watson-vr-node-ingress ターミナルに下記のコマンドを⼊⼒し実⾏します。 (コマンドは１⾏です。コマンドは以下からコピペできます。 https://ibm.box.com/v/openshift-101-command) 6. OpenShiftアプリの作成

6.5. ロードバランサーのサービスを公開します oc expose service watson-vr-node-ingress ターミナルに下記のコマンドを⼊⼒し実⾏します。 6. OpenShiftアプリの作成 これで完了です!ターミナルに下記のコマンドを⼊⼒し実⾏し、その結果を 参照して、OpenShift で実⾏されているアプリケーションにアクセスでき ます。 oc get route/watson-vr-node-ingress NAME HOST/PORT PATH SERVICES PORT TERMINATION WILDCARD watson-vr-node-ingress watson-vr-node-ingress-watson-vr.openshifttokyo17-0e3e0ef4c9c6d831e8aa6fe01f33bfc4-0002.jp- tok.containers.appdomain.cloud watson-vr-node-ingress 3000 None 以下のような出⼒があった場合は、 watson-vr-node-ingress-watson-vr.openshifttokyo17-0e3e0ef4c9c6d831e8aa6fe01f33bfc4-0002.jp- tok.containers.appdomain.cloud にブラウザでアクセスします。

6.6 ブラウザーでアプリケーションにアクセスします アプリケーションは表⽰できましたか? ボタンを押して動作確認してみましょう! 「ファイルの選択」から写真を選んだ後、各⻘ボタンを クリックして、Visual Recognitionの結果を確認します。 • Watsonで認識（Watson学習済みモデルを利⽤): • Watsonが写真を認識した内容を表⽰します。 • Watsonで認識（カスタムモデルを利⽤): • IBM提供の⾷品に特化したカスタムモデルFoodで認識し たクラスを表⽰します。 ※スマートフォンでの確認 ⼀番下にQRコードが表⽰されているので、それをスマートフォ ンのカメラで読んでアプリケーションのURLにアクセすると、ス マートフォンでも結果を確認できます。 スマートフォンでは「ファイルの選択」ボタンでその場で撮った 写真も認識可能です。

[オプション] ブラウザーでOpenShift Web Consoleに アクセスして作成したアプリを確認 1/2(1.10で開いたWeb画⾯ です) ←Projectsをクリック 下にスクロールすると watson-vr プロジェクト があるので、クリックし ます。

[オプション] ブラウザーでOpenShift Web Consoleに アクセスして作成したアプリを確認 2/2 ↑このあたりをクリックするといろいろ情報が⾒れます 下にスクロール

アプリケーション⼀式の削除 oc delete all -lapp= watson-vr-node ターミナルに下記のコマンドを⼊⼒し実⾏します。 プロジェクトの削除 oc delete project watson-vr ターミナルに下記のコマンドを⼊⼒し実⾏します。 [オプション]作成したアプリ・プロジェクトの削除 作成したものを削除したい場合のみ下記のコマンドを実⾏してください

No content