IBM Bluemix ハンズオン・セミナー

Transcription

1 IBM Bluemix ハンズオン セミナー 1

2 ハンズオンの 内 容 0. 事 前 準 備 1. Bluemixの 基 本 操 作 データベース サービスを 使 用 したアプリケーション 実 行 環 境 の 構 築 2. クラウド 上 でのアプリケーション 開 発 IBM DevOps Servicesを 使 用 した 開 発 とデプロイ 3. Buildpack を 使 用 した 言 語 環 境 の 拡 張 オープン コミュニティのBuildpackの 活 用 4. Internet of Thingsアプリケーションを 作 成 する センサーからのデータをプログラミングレスで 利 用 5. Node.js アプリケーションからSQL Database を 利 用 する サンプル プログラムのデプロイと 実 行 2

3 IBM Bluemix ハンズオン セミナー 事 前 準 備 1. Bluemix 利 用 登 録 2. DevOps Service 連 携 3. Cloud Foundry CLI 導 入 3

4 1. IBM Bluemix 利 用 登 録 にアクセス します ガイドに 従 ってサインアップします 登 録 したアドレスに IBM Bluemixよりメールが 届 きます メール 本 文 内 のリンクをクリックすることでア カウントの 有 効 化 が 行 われます 必 ずこのステップを 実 施 し Bluemixに ログ イン できることを 事 前 に 確 認 ください 4

5 2. DevOps Servicesへの 登 録 (1) にアクセスします 表 示 された 画 面 で Sign up for free をクリックします Log in to start using DevOps Services. をクリックします 5

6 2. DevOps Servicesへの 登 録 (2) Bluemixのサインアップ 時 に 使 用 した IBM IDとパスワードを 入 力 し サイン イン をクリックします IBM IDの 別 名 (エイリアス)を 作 成 します 任 意 の 文 字 列 を 入 力 し Finish を クリックします Success! が 表 示 されれば 完 了 です 6

7 3. Cloud Foundry CLI 導 入 (1) コマンドベースでBluemixを 操 作 するために Cloud FoundryのCLI (コマンドライン インターフェース)を 導 入 します undry/cli にアクセスします 下 にスクロールし Downloads セク ションの Stable Installers から 環 境 に 合 ったモジュールをダウンロードし 導 入 します 7

8 3. Cloud Foundry CLI 導 入 (2) cf コマンドが 実 行 可 能 であることを 確 認 します コマンドプロンプトで cf と 実 行 するとコマンドのヘルプが 表 示 されます 8 cf コマンドが 認 識 されない 場 合 は 導 入 ディレクトリーにパスが 通 っているか どうかを 確 認 してください

9 [ハンズオン1] Bluemixの 基 本 操 作 データベース サービスを 使 用 したアプリケーション 実 行 環 境 の 構 築 9

10 ハンズオン 手 順 Bluemix へログイン アプリケーション 実 行 環 境 の 構 築 サービスの 追 加 アプリケーション 実 行 環 境 の 詳 細 10

11 Bluemix へログイン まず 初 めに Bluemix にログインします Webブラウザを 起 動 し Bluemix にアクセスします 下 記 URLを 入 力 します 表 示 された 画 面 右 上 の ログイン をクリックします IBM ID パスワードを 入 力 して サインイン ボタンをクリックします ログインが 成 功 すると Bluemix の Dashboardが 表 示 されます 11

12 作 業 する 地 域 を 確 認 する Bluemixは 米 国 南 部 と 英 国 の2つの 地 域 で 稼 動 しています 上 部 メニューの 地 域 をクリックすることで 稼 動 する 環 境 を 選 択 することができます 今 回 は 米 国 南 部 を 利 用 します 地 域 が 米 国 南 部 になっていることを 確 認 してくだ さい 英 国 になっている 場 合 は 地 域 をクリックして 米 国 南 部 を 選 択 してください 12

13 [ 補 足 ] 米 国 南 部 選 択 時 のポップアップへの 対 応 方 法 米 国 南 部 を 選 択 した 際 に スペースを 作 成 するように 指 示 するポップアップ ウィンドウが 表 示 された 場 合 は 任 意 の 名 前 を 入 力 し 作 成 をクリックしてください 本 資 料 では スペース 名 として dev を 使 用 します 13

14 アプリケーション 実 行 環 境 の 構 築 (1/3) 1. 上 部 メニューの カタログ にて 作 成 するアプリケーションの 実 行 環 境 を 選 択 します ランタイム カテゴリから Node.js による JavaScriptの 実 行 環 境 を 選 択 します 2.アプリケーション 名 とホスト 名 を 指 定 して 作 成 ボタンをクリックします 任 意 の 名 前 を 指 定 します 重 複 しているとエラーに なるのでユニークな 名 称 を 指 定 してください 14

15 アプリケーション 実 行 環 境 の 構 築 (2/3) 3. 上 部 メニューの ダッシュボード をクリックし 作 成 中 のアプリケーションを 選 択 します 30 秒 ほどでインスタンスの 作 成 および 起 動 が 完 了 します 画 面 右 端 の アプリの 正 常 性 のステータスが 赤 色 から 緑 色 に 変 わり アプリは 稼 動 しています のメッセージが 表 示 されたことを 確 認 してください これだけの 手 順 で Node.js の 実 行 環 境 が 構 築 できました アプリの 正 常 性 のステータスが 変 わらない 場 合 は Web ブラウザのリロード (F5キー)をお 試 しください 15

16 アプリケーション 実 行 環 境 の 構 築 (3/3) 4.それではサンプルとして 用 意 されたスターター アプリケーションを 実 行 してみましょう アプリケーションの 経 路 : のリンクをクリックすると 作 成 された Node.js 上 で JavaScript のスターター アプリケーションが 動 いていることが 確 認 できます 16 この 例 では

17 サービスの 追 加 (1/2) 1. 上 部 メニューの カタログ をクリックし カタログからアプリケーションと 連 携 させたい サービスを 選 択 します ここでは 先 ほど 作 成 した Node.js の 実 行 環 境 に SQL Database(DB2) のサービスを 追 加 してみましょう 2.サービスを 追 加 するアプリケーションを 指 定 し 作 成 ボタンをクリックします ( アプリケーション の 選 択 で 先 ほど 作 成 したアプリ 名 を 指 定 します ) SQL Database のサービス 名 や プランはデフォルトのままでOKです 17

18 サービスの 追 加 (2/2) 3.アプリケーションの 再 起 動 ( 再 ステージ)の 確 認 があります OKボタンをクリックします 4. 約 20 秒 ほどでサービスの 追 加 が 完 了 します アプリケーションの 概 要 画 面 の 下 部 に SQL Database サービスが 表 示 される ことを 確 認 してください たったこれだけの 手 順 で アプリケーションからデータベースが 使 用 できるようになりました アプリの 正 常 性 のステータスが 変 わらない 場 合 は Web ブラウザのリロード (F5キー)をお 試 しください 18

19 アプリケーション 実 行 環 境 の 詳 細 (1/4) ~リソースの 動 的 追 加 アプリケーションの 概 要 の 画 面 には 実 行 環 境 が 使 用 するリソース 情 報 が 表 示 されています ここで 実 行 環 境 のリソース 変 更 が 可 能 です インスタンス : 3 メモリー : 384MB と 指 定 して 保 存 をクリックします 再 起 動 後 リソースが 拡 張 されていることを 確 認 してください 19

20 アプリケーション 実 行 環 境 の 詳 細 (2/4) ~リソースの 動 的 追 加 左 端 のメニューから SDK for Node.js を 選 択 します ページ 上 部 で CPU やメモリーの 使 用 率 など インスタンスの 詳 細 情 報 が 確 認 できます 先 程 インスタンスを 増 やしたので リストには3 行 が 表 示 されています 今 度 はリソースの 縮 退 を 行 ってみましょう インスタンス : 1 メモリー : 64MB と 指 定 して 保 存 をクリックします リソースは 増 やすだけでなく 減 らすこともできることを 確 認 してください 画 面 の 切 り 替 えがうまくいかない 場 合 は Web ブラウザのリロード (F5キー)をお 試 しください 20

21 アプリケーション 実 行 環 境 の 詳 細 (3/4) ~ファイル/ログの 参 照 左 端 のメニューから ファイルとログ を 選 択 します 実 行 環 境 のファイルシステム 上 にあるアプリケーション ファイルやログ ファイルを 参 照 したりダウンロードしたりすることができます 画 面 の 切 り 替 えがうまくいかない 場 合 は Web ブラウザのリロード (F5キー)をお 試 しください 21

22 アプリケーション 実 行 環 境 の 詳 細 (4/4) ~ 環 境 変 数 の 参 照 SDK for Node.js ページの 下 部 にて 実 行 環 境 に 設 定 されている 環 境 変 数 の 情 報 が 確 認 できます ( 環 境 変 数 を 新 しく 追 加 することも 可 能 です) 連 携 に 必 要 となる 情 報 は 自 動 的 に 環 境 変 数 にセットされるので アプリケーションは これらの 環 境 変 数 の 値 を 取 得 して サービスにアクセスします SQLDatabase 接 続 の 場 合 IPアドレス, ポート 番 号, DB 名, username, password などが 環 境 変 数 としてセットされます Bluemix では Web ブラウザからアプリケーション 実 行 環 境 の 構 築 やサービスのバインド 様 々な 運 用 管 理 作 業 ができることを 確 認 いただきました お 疲 れ 様 でした! 22

23 [ハンズオン2] DevOps Services を 使 ったクラウド 上 での アプリケーション 開 発 23

24 IBM Bluemix DevOps Services 概 要 IBM Bluemix DevOps Services ( 以 下 IDS )は パブリック プロジェクトまたは プライベート プロジェクトにおいて 他 のメンバーとコラボレーションを 取 りながらソフト ウェアの 開 発 が 可 能 なクラウドベースのプラットフォームです IDSには アプリケーション 開 発 に 必 要 な 以 下 の 機 能 があります アジャイルな 計 画 立 案 と 追 跡 (TRACK & PLAN) Web IDE (Webブラウザ 上 でのソースコードの 修 正 と 管 理 ) Git, Jazz SCM, GitHubを 使 用 したソースコード 管 理 (SCM) Bluemixへの 自 動 デプロイ (BUILD & DEPLOY) 24

25 ハンズオンの 概 要 このハンズオンでは WebIDE(*)を 使 用 し IBM Bluemix DevOps Servicesに 公 開 されているアプリケーションに 独 自 の 編 集 を 加 え Bluemix に push して 実 行 環 境 を 自 動 作 成 する 手 順 を 体 験 していただきます 公 開 プロジェクト プロジェクトの 取 り 込 み Node.js 実 行 環 境 の 作 成 / モジュールの 配 置 / URL 生 成 プロジェクトの 保 管 プロジェクトの デプロイ アプリケーション の 実 行 アプリケーション 修 正 修 正 モジュールの 再 デプロイ アプリケーション の 再 実 行 25 WebIDE 以 外 の 機 能 をご 紹 介 したdW 記 事 について 参 考 資 料 1に 記 載 しておりますので ご 参 照 ください

26 ハンズオン 手 順 IDSに 登 録 する IDS で 公 開 されているプロジェクトを 開 く IBM Bluemix DevOps Services にログインする プロジェクトを 保 管 する プロジェクトをデプロイする ソースコードを 編 集 する 編 集 結 果 を 確 認 する 26

27 IDSに 登 録 する (1) にアクセスします 表 示 された 画 面 で Sign up for free をクリックします ログインして DevOps Services の 使 用 を 開 始 してください をクリック します 27

28 IDSに 登 録 する (2) Bluemixのサインアップ 時 に 使 用 した IBM IDとパスワードを 入 力 し サイン イン をクリックします IBM IDの 別 名 (エイリアス)を 作 成 します 任 意 の 文 字 列 を 入 力 し Finish を クリックします 正 常 に 終 了 しました が 表 示 されれば 完 了 です 28

29 IDS で 公 開 されているプロジェクトを 開 く IBM Bluemix DevOps Services 上 の MemoApp1-Nodejs プロジェクトを 開 きます Webブラウザで にアクセスします xxxxxxxxxxxxxxxxx IDS 上 のNode.jsアプリケーション(*)のサンプル プロジェクトが 表 示 されます このコードを 使 って IDS と Bluemix との 連 携 を 体 験 していただきます Node.jsについては 補 足 資 料 2をご 参 照 ください 29

30 IBM Bluemix DevOps Services にログインする 画 面 上 部 の LOG IN をクリックします IBM ID パスワードを 入 力 して Sign in ボタンをクリックします ログイン 済 み(LOGIN ボタンが 右 上 に 表 示 さ れない) 場 合 このペ ージはスキップください 30

31 プロジェクトを 保 管 する (1) 画 面 右 上 の EDIT CODE をクリックします プロジェクトをコピー(フォーク)します 左 上 の FORK ボタンをクリックします 31

32 プロジェクトを 保 管 する (2) 任 意 のプロジェクト 名 を 指 定 して CREATE ボタンをクリックします この 例 では MemoApp1-Nodejs という プロジェクト 名 を 指 定 しています Make it privateにチェックを 入 れ Add features for Scrum developmentのチェックを 外 し Make this a Bluemix Projectにチェック を 入 れます デプロイ 先 として -Region が US South -Organization に 正 しい IBM ID -Space に 作 成 したスペース 名 (dev) が 指 定 されていることを 確 認 し CREATE をクリックします 32

33 プロジェクトを 保 管 する (3) フォーク 処 理 が 完 了 し 自 分 のプロジェクトとして 保 管 されました 33

34 プロジェクトをデプロイする (1) manifest.yml 作 成 Bluemixにデプロイするために manifest.ymlファイル(*)が 必 要 となります このプロジェクトには manifest.ymlファイルが 含 まれていないため 新 規 作 成 しま す ファイル 名 は manifest.yml と 入 力 してください manifest.ymlには 作 成 するアプリケーション インスタンスの 数 アプリケーションに 割 り 振 るメモリー 量 とディスク 割 り 当 て 量 アプリケーションのその 他 の 環 境 変 数 などのオプションが 指 定 されます 詳 細 は 以 下 をご 参 照 ください 34

35 プロジェクトをデプロイする (2) manifest.yml 作 成 manifest.ymlに 以 下 のように 記 載 し 保 存 します applications: - name: MemoApp1-Nodejs-shimac00 disk_quota: 1024M memory: 128M host: MemoApp1-Nodejs-shimac00 domain: mybluemix.net command: node app.js path:. instances: 1 host, nameが 固 有 になるよう MemoApp1-Nodejs に ご 自 身 のユーザーIDなどを 付 加 してください 35 オプション 説 明 name Bluemix 内 のアプリケーション 名 この 値 は Bluemix 環 境 で 固 有 でなければなりません disk_quota アプリケーションに 割 り 振 るディスク 割 り 当 て 量 デフォルト 値 は 1G です memory アプリケーションに 割 り 振 るメモリー 量 デフォルト 値 は 1G です host Bluemix 内 のアプリケーションのホスト 名 Bluemix 環 境 で 固 有 でなければなりません domain Bluemix 内 のアプリケーションのドメイン ネーム command アプリケーションのカスタム 開 始 コマンド path アプリケーションのロケーション この 値 は 相 対 パスまたは 絶 対 パスとすることができます instances アプリケーション 用 に 作 成 するインスタンスの 数

36 プロジェクトをデプロイする (3) Bluemixにデプロイしてみましょう ボタンをクリックします デプロイが 完 了 すると 実 動 の 実 行 中 と 表 示 されます アプリケーションを 実 行 してみましょう ボタンをクリックします 36

37 プロジェクトをデプロイする (3) ブラウザにアプリケーションの 画 面 が 表 示 されます 次 に ソースコードを 編 集 し Versionの という 表 示 を に 変 更 して みましょう 37

38 ソースコードを 編 集 する (1) Versionは package.json ファイルの version の 値 を 表 示 しています routes > index.js package.json 38

39 ソースコードを 編 集 する (1) package.json ファイルの version の 値 を から に 修 正 し 保 存 します (デフォルトでは 自 動 保 存 の 設 定 が 有 効 になっています) package.json 39

40 ソースコードを 編 集 する (2) 編 集 済 みのソースコードで アプリケーションをデプロイしてみましょう クリックします ボタンを 以 下 のメッセージが 表 示 されます OK ボタンをクリックします しばらくすると アプリケーションが 稼 動 します 40

41 編 集 結 果 を 確 認 する アプリケーションを 実 行 してみましょう ボタンをクリックします 以 下 の 通 り Versionが と 表 示 され 修 正 したコードが 反 映 されていること を 確 認 してください 41 Bluemix と IBM Bluemix DevOps Services との 連 携 により クラウドを 活 用 したクイックなアプリケーション 開 発 / 実 行 ができる ことを 確 認 しました お 疲 れ 様 でした!

42 ( 参 考 ) IDSのプロジェクトを 削 除 する 1) 画 面 右 上 の ボタンをクリックします 今 回 のハンズオンでは 不 要 です 2) 左 ペインの DELETE をクリックすると 右 ペインが 切 り 替 わるので DELETE と 入 力 し CONFIRM をクリックします これで 完 了 です 42

43 参 考 資 料 1. IBM Bluemix DevOps Services 以 下 のdW 記 事 では ハンズオンで 体 験 いただいたWebIDEのほか チーム 開 発 で 必 要 となる 作 業 をステップバイステップでご 紹 介 していますので ご 参 照 ください ソースコードのGitリポジトリー 登 録 BUILD&DEPLOY TRACK&PLAN Bluemix アプリケーションを IBM DevOps Services を 利 用 してチーム 開 発 する 43

44 参 考 資 料 2. Node.js Node.jsは スタンドアローンおよびサーバー サイドで 動 作 する JavaScript 言 語 の 実 行 環 境 です イベント 駆 動 ノンブロッキング I/O モデルを 採 用 しているという 特 徴 があり 大 規 模 な 同 時 接 続 が 生 じるようなネットワーク アプリケーションにおい て 優 れたスケーラビリティーを 発 揮 します ハンズオンで 使 用 したアプリケーションの 開 発 方 法 をdW 記 事 でご 紹 介 しています 2 章 アプリケーションの 開 発 が 該 当 します 3 章 アプリケーションの 拡 張 では データ 管 理 サービスのひとつである Cloudant NoSQL DB サービスを 使 用 するようにアプリケーションを 拡 張 していますので ぜひご 参 照 ください Bluemix 上 で 稼 動 する Web アプリケーション 開 発 方 法 - Node.js 編 44

45 [ハンズオン3] Buildpack を 使 用 した 言 語 環 境 の 拡 張 45

46 Bluemix で 提 供 されていない 言 語 を 使 用 するには 現 在 の Bluemix のカタログには Java や Node.js Ruby といった 言 語 の 実 行 環 境 が 載 っています 場 合 によっては カタログに 載 っていない 言 語 を 使 用 する 場 面 もあるかもしれません BluemixはオープンなPaaSである Cloud Foundry(クラウド ファウンドリー) を ベースとしています Cloud Foundryでは ビルドパック という 仕 組 みで 任 意 の 言 語 の 実 行 環 境 を 構 築 することが 可 能 です この 仕 組 みを 利 用 し カタログに 載 って いない 言 語 をBluemix 上 で 使 用 できます 46

47 ビルドパック ~ ランタイム 追 加 の 仕 組 み ~ 任 意 のランライムに 対 するフレームワーク( 実 行 基 盤 )を 準 備 する 仕 組 み Herokuで 開 発 されたカスタマイズの 仕 組 みで Cloud Foundry V2で 採 用 必 要 なランタイムが 不 足 している 場 合 は ビルドパックを 自 身 で 作 成 し 追 加 す ることも 可 能 buildpackを 指 定 しない 場 合 は 内 部 でマッチング Java, Node.js, Ruby cf push [-b buildpack] アプリ Bluemix / Cloud Foundry アプリ 開 発 者 実 行 基 盤 Container 必 要 なランタイムがCloud Foundry 上 にな い 場 合 は Git URLを 指 定 し 追 加 GitHub 等 で 公 開 PHP, Python, Go, etc 47

48 ハンズオン 概 要 このハンズオンでは このような Bluemixでは 標 準 で 用 意 されていない 言 語 を 使 用 する 方 法 について 学 びます 単 純 なHTMLファイルを 表 示 するために ビルドパック を 使 って 軽 量 なWebサーバーであるnginxをBluemix 上 で 動 かしてみます 要 件 に 応 じて 任 意 の 言 語 を 扱 えるBluemixの 柔 軟 性 を 体 感 してください! なお これまでのハンズオンでは Webインターフェースを 使 ってBluemixを 操 作 して きました 今 回 のハンズオンでは コマンドラインインターフェース(CLI)を 使 用 します nginx ビルドパック nginx 環 境 +アプリ Cloud Foundry CLI HTMLファイル HTMLファイル デプロイ 指 示 プロジェクトの デプロイ アプリケーション の 実 行 48

49 ハンズオン 手 順 ビルドパックによる 言 語 環 境 の 拡 張 を 理 解 する コマンドライン インターフェース (CLI) を 導 入 する コマンドラインでBluemixにHTMLファイルをデプロイする デプロイしたHTMLファイルを 確 認 する 49

50 ビルドパックによる 言 語 環 境 の 拡 張 を 理 解 する(1) Bluemix 上 にnginxの 環 境 を 作 るには nginxのビルドパックを 使 います ビルドパックはどこにあるのでしょうか? Cloud Foundry のコミュニティが 作 成 した たくさんのビルドパックが GitHub という サイトで 公 開 されています これを 利 用 しましょう なお GitHub とはソフトウェア 開 発 プロジェクトのための 共 有 サービスです ソースコードや 仕 様 情 報 などプロジェクトの 様 々な 成 果 物 が 保 管 され 管 理 されて います それでは 実 際 にnginxのビルドパックを 探 してみましょう 50

51 ビルドパックによる 言 語 環 境 の 拡 張 を 理 解 する(2) GitHub の Cloud Foundry コミュニティにアクセスしてみましょう Bluemix のカタログのランタイムから ビルドパックの 持 込 み を 選 択 します ビルドパックの 持 込 み のダイアログボックスが 表 示 されます 既 知 の Cloud Foundry 互 換 ビルドパックの 表 示 のリンクをクリックします 51

52 ビルドパックによる 言 語 環 境 の 拡 張 を 理 解 する(3) GitHub の Cloud Foundry コミュニティにアクセスしました GitHubには 様 々なビルドパックが 公 開 されていることを 確 認 してください 52

53 ビルドパックによる 言 語 環 境 の 拡 張 を 理 解 する(4) GitHubで 公 開 されているnginxのビルドパックを 探 します ブラウザで staticfile を 検 索 し のリンクをクリックします nginxというビルドパックも 存 在 しますが 廃 止 予 定 のためstaticfileを 使 用 します staticfileのビルドパックのプロジェクトが 表 示 されます 後 程 この URL を 使 用 する ので Web ブラウザはそのままにしておいてください 53

54 コマンドライン インターフェース (CLI) を 導 入 する (1) コマンドベースでBluemixを 操 作 するために Cloud FoundryのCLI (コマンドライン インターフェース)を 導 入 します undry/cli にアクセスします 下 にスクロールし Downloads セク ションの Stable Installers から 環 境 に 合 ったモジュールをダウンロードし 導 入 します 54

55 コマンドライン インターフェース (CLI) を 導 入 する (2) cf コマンドが 実 行 可 能 であることを 確 認 します コマンドプロンプトで cf と 実 行 するとコマンドのヘルプが 表 示 されます 55 cf コマンドが 認 識 されない 場 合 は 導 入 ディレクトリーにパスが 通 っているか どうかを 確 認 してください

56 コマンドラインでHTMLファイルをデプロイする(1) Windows のコマンド プロンプトを 起 動 します Windows のスタートメニュー もしくはデスクトップのショートカットから 起 動 します 作 業 用 に 新 しく 空 のディレクトリを 作 成 します (C: Bluemix) 作 成 したディレクトリに 移 動 し HTMLのサンプルファイル(index.html)をエディタ ーで 作 成 します コマンドプロンプトから 以 下 のようにコマンドを 実 行 してください C: Bluemix>notepad index.html エディター(メモ 帳 )が 起 動 します Hello! Bluemix World!! と 表 示 される 簡 単 なHTMLファイルです <h1>hello Bluemix World!</h1> 作 業 用 ディレクトリには 他 のファイルを 置 かない ようにします これを Bluemix にデプロイしてみます 56

57 コマンドラインでHTMLファイルをデプロイする(2) Bluemix を 操 作 するには cf コマンドを 使 用 します IBM ID とパスワードで Bluemix にログインします C: Bluemix>cf login a u (IBM ID) p (パスワード) HTMLファイルをデプロイします C: Bluemix>cf push (アプリケーション 名 ) b (ビルドパックのURL) m 64M ここで 指 定 するアプリケーション 名 は デフォルトではBluemix 上 に 作 られる 仮 想 サーバーのホスト 名 を 兼 ねています 名 前 が 重 複 するとデプロイに 失 敗 しますの で nginx+ 任 意 の 文 字 列 と 指 定 してください ( 下 記 の 例 参 照 ) ビルドパックのURLは 先 程 Webブラウザで 開 いたGitHubのstaticfileビルドパッ クの URL を 指 定 します コピー&ペーストしてください ( 例 ) cf push nginx abc -b -m 64M 57

58 デプロイしたHTMLファイルを 確 認 する(2) Bluemix のダッシュボード 画 面 に 今 デプロイしたアプリケーション nginxxxx が 表 示 されています シグナルが 赤 から 緑 に 変 わればデプロイは 完 了 です nginxxxx のURLリンクをクリックして サンプルのHTMLファイルが 表 示 されるこ とを 確 認 してください 58

59 参 考 資 料 1. ビルドパックを 利 用 したその 他 のサンプル 統 計 処 理 用 の 言 語 であるRを 使 用 して Twitterのセンチメント 分 析 のサンプルアプ リケーションに 関 する 記 事 がdeveloperWorksに 公 開 されています ご 興 味 がありましたら 以 下 のURLのリンク 先 をご 参 照 いただき サンプルアプリケー ションを 動 かしてみてください 59

60 ( 参 考 )デプロイしたアプリケーションとサービスを 削 除 する 不 要 なアプリケーションとサービスを 次 の 手 順 ですべて 削 除 します ( 質 問 のためなどで とっておきたい 場 合 は 削 除 しなくても 構 いません ) Bluemix のダッシュボード 画 面 に デプロイしたアプリケーションとサービスが 表 示 されて います 緑 色 の 歯 車 のアイコンをクリックし アプリの 削 除 を 選 択 します アプリケーションと 同 時 に 関 連 するサービスを 削 除 するか 聞 かれる 場 合 は チェックを 入 れ 同 時 に 削 除 します ハンズオン5を 行 われ る 方 は ハンズオン1 の 環 境 を 消 さないでく ださい 60

61 [ハンズオン4] Internet of Things アプリケーションを 作 成 する 61

62 ハンズオン 手 順 ボイラープレートでアプリケーションを 作 成 する Node-RED で IoT アプリを 作 成 する デプロイされたアプリケーションを 確 認 する 62

63 ハンズオンの 概 要 Internet of Thingsのボイラープレート( 後 述 )を 使 用 して クラウド 上 のセンサー シミュレーターのデータを 活 用 します ボイラープレートに 含 まれるNode-REDというツールを 用 いて セン サー データ( 温 度 湿 度 など)を 活 用 する IoT アプリをノンプログラミ ングで 作 成 します センサー シミュレーター 63

64 ボイラープレートでアプリケーションを 作 成 する (1) Bluemix には 予 めランタイムやサービスを 組 み 合 わせたボイラープレート という テンプレートが 用 意 されています これを 利 用 することで 簡 単 に Bluemix アプリケーションを 開 発 することができます Bluemix の カタログメニューにボイラープレートを 確 認 してください 各 ボイラープレートをクリックすると それがどのランタイム サービスを 組 み 合 わせたものか 説 明 されています 64

65 ボイラープレートでアプリケーションを 作 成 する (2) Internet of Things Foundationをクリックします このボイラー プレートは 以 下 のコンポーネントから 構 成 されていることが 分 かります - SDK for Node.js - Cloudant NoSQL DB 次 のように 入 力 し 作 成 ボタンをクリックします 名 前 : iotsample+ 末 尾 に 任 意 の 文 字 列 ホスト: 上 記 の 名 前 がコピーされる 65

66 ボイラープレートでアプリケーションを 作 成 する (3) 左 上 の ダッシュボードに 戻 る をクリックします ダッシュボードに iotsample アプリケーションと Cloudant NoSQL DB のサービスが 追 加 されることを 確 認 します iotsample アプリケーションの 状 態 が 青 信 号 になるのを 待 ち 右 下 のリンク アイコンをクリ ックします 66

67 Node-RED で IoT アプリを 作 成 する (1) Node-RED のページが 表 示 されます Go to your Node-RED flow editor ボタン をクリックし Node-RED フロー エディターを 起 動 します IoT (Internet of Things) は 家 電 自 動 車 ウェラブル デバイスなどあらゆる モノ を インターネットに 接 続 し お 互 いに 情 報 をやりとりすることで 新 しい 価 値 を 生 み 出 す 概 念 です Node-RED は IoT のフローを 構 築 するためのビジュアル ツールで 開 発 したシ ステムを 簡 単 に Bluemix にデプロイすることが 可 能 になっています ここでは 温 度 セン サーにより 取 得 したデータによって 処 理 を 変 えるような IoT システムを 作 成 していきます 67 クリック

68 Node-RED で IoT アプリを 作 成 する (2) ここでは Node-REDで 接 続 するセンサーの 情 報 を 取 得 します Webブラウザーの 新 しいタブを 開 き ibm.biz/iotsensor に 接 続 します IoT Sensorは IoT Cloud に 接 続 するデバイスをエミュレートし 気 温 湿 度 物 体 温 度 の 情 報 を 発 信 (publish) することができます 右 上 に 当 デバイスの MAC アドレスが 表 示 されるので メモしておきます タブは 開 いたままにして おいてください 後 ほど 使 用 します 68

69 Node-RED で IoT アプリを 作 成 する (3) Node-REDフロー エディターによって IoT アプリの 処 理 フローを 定 義 します サンプルのフローが 以 下 のようにあらかじめ 定 義 されているため それらを 削 除 してからハ ンズオンをすすめます フローの 削 除 は マウスでシフトキーを 押 しながら 全 ノードを 選 択 し キーボードの Delete ボタンを 押 します 69

70 Node-RED で IoT アプリを 作 成 する (4) 先 ず 温 度 データの 入 力 元 である IoT Sensor のノードを 定 義 します 左 のパレットの inputs:ibmiot を 中 央 のキャンバスにドラッグドロップし ダブルクリックします Edit ibmiot in node のダイアログ ボックスで 以 下 のように 入 力 します Authentication: Quickstart Input Type: Device Event Device Id: xxxxxxxxxxx (ここで xxxxxxxxxxxは IoT Sensor の MAC アドレスを 小 文 字 にしてコロンを 削 除 し た 文 字 列 ) Name: IoT Sensor Ok ボタンをクリックします 70

71 Node-RED で IoT アプリを 作 成 する (5) 次 に IoT Sensor のデータから 温 度 データを 取 り 出 す function ノードを 定 義 します パレットの functions:function をキャンバスにドラッグドロップし ダブルクリックします Edit function node のダイアログ ボックスで 以 下 のように 入 力 します Name: temp Function: return {payload:msg.payload.d.temp}; Ok ボタンをクリックします IoT Sensor と temp をマウスでつないでリンクします 71

72 Node-RED で IoT アプリを 作 成 する (6) 次 に 温 度 データの 条 件 分 岐 を 指 定 する switch ノードを 定 義 します ここでは 温 度 40 度 以 下 と40 度 超 で 分 岐 するよう 設 定 します パレットの functions:switch を 中 央 のキャンバスに ドラッグドロップし ダブルクリックします Edit switch node のダイアログ ボックスで 以 下 のように 入 力 します Name: temp thresh 分 岐 条 件 に 以 下 のようになるように 追 加 ( +rule ボタンをクリックして 追 加 ): if msg.payload <= 40 > 40 Ok ボタンをクリックします temp と temp thresh をリンクします 72

73 Node-RED で IoT アプリを 作 成 する (7) 次 に 条 件 ごとの 処 理 を 指 定 する template ノードを 定 義 します ここではメッセージ 出 力 をそれぞれ 設 定 します パレットの functions:template を2つ キャン バスにドラッグドロップします 1つ 目 のEdit template node の ダイアログ ボックスをダブルクリックし 以 下 のように 入 力 します Name: safe Template: Temperature ({{payload}}) within safe limits Ok ボタンをクリックします 2つ 目 のEdit template node のダイアログ ボックスには 以 下 のように 入 力 します Name: danger Template: Temperature ({{payload}}) critical Ok ボタンをクリックします 右 図 のようにリンクします 73

74 Node-RED で IoT アプリを 作 成 する (8) 最 後 に 処 理 結 果 をモニター 出 力 するための debug ノードを 定 義 します パレットの outputs:debug をキャンバスにドラッグドロップし ダブルクリックします Edit debug node のダイアログ ボックスで 以 下 のように 入 力 します Output: message property を 選 択 to: debug tab Name: cpu status Ok ボタンをクリックします template と cpu status を 右 図 のようにリンクします 74

75 Node-RED で IoT アプリを 作 成 する (9) これまでのステップで 下 図 のようなフローができあがります 右 上 の Deploy ボタンをクリッ クし アプリケーションをデプロイします 上 部 に Successfully deployed と 表 示 されれ ば Bluemix へのデプロイは 成 功 です 右 側 のサイドバーを debug タブに 切 り 替 えます ( 必 要 に 応 じ 右 側 にウィンドウが 表 示 されるよう 操 作 します) 75

76 デプロイしたアプリケーションを 確 認 する 別 タブで 開 いておいたIoT Sensor の 矢 印 ボタンをクリックし 温 度 を 変 更 します IoT Sensor の 温 度 が debug タブに 出 力 され 40 度 以 下 のときは Temperature (xx) within safe limits と 出 力 されることを 確 認 します IoT Sensor の 温 度 を 上 げて 40 度 を 超 えると Temperature (xx) critical と 出 力 さ れることを 確 認 します 76 Node-RED を 使 いビジュアルにインターネット 上 のデバイスをワイヤリングし Bluemix の node.js 上 にデプロイする 手 順 を 確 認 しました お 疲 れ 様 でした!

77 IoTアプリの 拡 張 を 考 える ハンズオンではモニター 用 に 画 面 出 力 し 稼 動 を 確 認 するまでにとどめていますが Node-RED を 使 用 して 様 々に 変 更 することが 可 能 です Input/outputを 組 み 合 わせ 特 定 の 条 件 を 満 たすデー タを 受 け 取 ったら 担 当 者 に 通 知 するといったものから コ ーディングを 追 加 してより 高 度 なものにすることも 可 能 で す 詳 細 は 以 下 のサイトをご 覧 ください チュートリアル Arduino Uno と IBM IoT Foundation を 利 用 してクラ ウド 対 応 の 温 度 センサーを 作 成 する( 全 4 回 ) ary/cl-bluemix-arduino-iot1/index.html 77

78 [ハンズオン5] Node.js アプリケーションから SQL Database を 利 用 する 78

79 ハンズオン 手 順 ハンズオンの 概 要 SQL Databaseサービスを 作 成 する サンプルデータをロードする IDSのプロジェクトを 取 り 込 み 保 管 する 設 定 ファイルを 修 正 する プロジェクトをデプロイする デプロイしたアプリケーションを 確 認 する 79

80 ハンズオンの 概 要 本 ハンズオンでは データベースにサンプルデータを 投 入 し Node.jsアプリケーション から 参 照 する 手 順 を 確 認 します サンプルアプリケーションをIDSから 取 得 し Bluemixにデプロイします IBM DevOps Services 公 開 プロジェクト プロジェクトの 取 り 込 み SQL Database の 作 成 サンプルデータの 投 入 プロジェクトの 保 管 設 定 ファイル 修 正 モジュールの デプロイ アプリケーション の 実 行 80

81 サンプルアプリケーションの 紹 介 横 浜 市 金 沢 区 が 公 開 しているAED 設 置 場 所 データをGoogle Mapに 表 示 81

82 ハンズオン 手 順 ハンズオンの 概 要 SQL Databaseサービスを 作 成 する サンプルデータをロードする IDSのプロジェクトを 取 り 込 み 保 管 する 設 定 ファイルを 修 正 する プロジェクトをデプロイする デプロイしたアプリケーションを 確 認 する 82

83 SQLデータベースサービスを 作 成 する ハンズオン1 で 作 成 したNode.js と SQL Database の 環 境 を 利 用 します 83

84 ハンズオン 手 順 ハンズオンの 概 要 SQL Databaseサービスを 作 成 する サンプルデータをロードする IDSのプロジェクトを 取 り 込 み 保 管 する 設 定 ファイルを 修 正 する プロジェクトをデプロイする デプロイしたアプリケーションを 確 認 する 84

85 サンプルデータをロードする (1/8) 1.サンプルデータをWebから 取 得 します Webブラウザを 起 動 し 金 沢 区 データポータル にアクセスします 2. AED 設 置 場 所 をクリックしてCSVファイルを 保 存 します ファイル 名 はデフォルトの 3-kz-somu.csv のままで 結 構 です 85

86 サンプルデータをロードする (2/8) 3.Bluemixのダッシュボードより ハンズオン1で 作 成 したSQL Databaseサービスをクリックします 4. Launch をクリックしてSQL Database のコンソールを 起 動 します 86

87 サンプルデータをロードする (3/8) 5.Load Dataをクリックします 87

88 サンプルデータをロードする (4/8) 6. Brows files をクリックし ダウンロードした 3-kz-somu.csv を 指 定 します ダウンロードしたcsvファイルのコードページはShift_JISですので Code pageを 1208 から 943 に 上 書 き 変 更 します Does the file have columns that contain dates or times? を Yes にし 右 下 の Load File をクリックします ダウンロードした csvファイルを 指 定 コードページを に 変 更 Yes に 変 更 88

89 サンプルデータをロードする (5/8) 7.サンプルデータのCSVファイルの 内 容 が 表 示 されていることを 確 認 し Next をクリックします 89

90 サンプルデータをロードする (6/8) 8. Create a new table and load にチェックを 入 れ Next をクリックします 90

91 サンプルデータをロードする (7/8) 9. Table name を AEDKANAZAWA に 変 更 します 10.Columnを 以 下 のとおり 変 更 し Finish をクリックします 名 称 NAME 住 所 ADDRESS 緯 度 LATITUDE 経 度 LONGITUDE AEDの 数 AED 更 新 日 UPDATE 91

92 サンプルデータをロードする (8/8) 11.ロードしたテーブルを 確 認 します 左 上 の Manage から Work with Table を 選 択 します 12. 左 側 に 表 示 されている AEDKANAZAWA をクリックすると 右 側 にテーブルの 情 報 が 表 示 されます 92

93 ハンズオン 手 順 ハンズオンの 概 要 SQL Databaseサービスを 作 成 する サンプルデータをロードする IDSのプロジェクトを 取 り 込 み 保 管 する 設 定 ファイルを 修 正 する プロジェクトをデプロイする デプロイしたアプリケーションを 確 認 する 93

94 IDSのサンプルプロジェクトを 取 り 込 み 保 管 する (1/4) ハンズオン1で 作 成 したアプリと 経 路 を 削 除 します (SQLDBはそのまま 使 用 ) その 後 公 開 プロジェクトからコードを 取 り 込 みます Bluemixのダッシュボード 画 面 で ハンズオン1で 作 成 した Node.jsアプリのアイコン 右 上 のマークをクリックし アプリの 削 除 をクリックします??????????????? 下 図 のように サービスのチェックをはずし 経 路 のチェックを 入 れて 削 除 をクリックします??????????????????????? 94

95 IDSのサンプルプロジェクトを 取 り 込 み 保 管 する (2/4) 1.IDS 上 に 公 開 されているサンプルアプリケーションにアクセスします YokohamaAEDMap: 2. 画 面 上 部 の SIGN IN をクリックします 3.IBM ID パスワードを 入 力 して Sign in ボタンをクリックします 4.プロジェクトをフォークします FORK PROJECT をクリックしてください 95

96 IDSのサンプルプロジェクトを 取 り 込 み 保 管 する (3/4) 5. 任 意 のプロジェクト 名 を 指 定 して CREATE ボタンをクリックします この 例 では YokohamaAEDMap という プロジェクト 名 を 指 定 しています デプロイ 先 として Region に US South Organization に 正 しい IBM ID が 指 定 されていることを 確 認 し CREATE をクリックします 96

97 IDSのサンプルプロジェクトを 取 り 込 み 保 管 する (4/4) 6.フォーク 処 理 が 完 了 し 自 分 のプロジェクトとして 保 管 されたことを 確 認 します 97

98 ハンズオン 手 順 ハンズオンの 概 要 SQL Databaseサービスを 作 成 する サンプルデータをロードする IDSのプロジェクトを 取 り 込 み 保 管 する 設 定 ファイルを 修 正 する プロジェクトをデプロイする デプロイしたアプリケーションを 確 認 する 98

99 設 定 ファイルを 修 正 する (1/2) 1.Bluemixにデプロイする 際 の 情 報 を 記 述 する 設 定 ファイルである manifest.yml を 編 集 します 前 のページで 取 り 込 んだプロジェクトの EDIT CODE をクリックします 2.manifest.yml クリックします 99

100 設 定 ファイルを 修 正 する (2/2) 3. 以 下 の 箇 所 を 修 正 します <Your SQL Database Name>: 使 用 するSQL Databaseの 名 称 です ハンズオン1で 作 成 した SQL Database サービスの 名 称 を 入 力 してください <Your Host Name>:アプリケーションのホスト 名 です 他 のユーザーとも 重 ならない 任 意 の 名 前 を 入 力 してください <Your Application Name>:アプリケーションの 名 称 です 他 のアプリケーションと 重 複 しない 任 意 の 名 前 を 入 力 してください 以 下 は 編 集 後 の manifest.yml の 例 です 100

101 ハンズオン 手 順 ハンズオンの 概 要 SQL Databaseサービスを 作 成 する サンプルデータをロードする IDSのプロジェクトを 取 り 込 み 保 管 する 設 定 ファイルを 修 正 する プロジェクトをデプロイする デプロイしたアプリケーションを 確 認 する 101

102 プロジェクトをデプロイする(1/2) 1. ボタンをクリックします 2.Bluemix の 上 部 メニューから ダッシュボード をクリックします 102

103 プロジェクトをデプロイする(2/2) 3.ダッシュボードにIDSからデプロイしたアプリケーションが 表 示 されます デプロイ 操 作 の 直 後 は 環 境 作 成 中 のため ステータスが 赤 ( 実 行 不 可 )の 状 態 ですが しばらく 待 って 画 面 を 更 新 するとステータスが 緑 ( 実 行 可 能 )に 変 わります それではアプリケーションを 実 行 してみましょう シグナルが 緑 になっているのを 確 認 し アプリケーションのリンクをクリックします 103

104 ハンズオン 手 順 ハンズオンの 概 要 SQL Databaseサービスを 作 成 する サンプルデータをロードする IDSのプロジェクトを 取 り 込 み 保 管 する 設 定 ファイルを 修 正 する プロジェクトをデプロイする デプロイしたアプリケーションを 確 認 する 104

105 デプロイしたアプリケーションを 確 認 する 1. 表 示 された 画 面 の AED 位 置 情 報 取 得 をクリックします 地 図 上 にAEDの 位 置 が 表 示 されます マーカーをクリックすると AED 設 置 場 所 の 情 報 が 表 示 されます 105

106 [ 補 足 資 料 ] サンプルプログラムの ポイント 説 明 106

107 Node.jsとは サーバーサイドJavaScript 環 境 Webアプリケーションのプログラム 記 述 を 想 定 ファイル 操 作 やデータベース 処 理 など 機 能 ごとにモジュール 化 されており 必 要 なもの を 必 要 に 応 じて 使 用 する 参 考 リンク Node.js: Node.js 日 本 ユーザーグループ: IBM SDK for Node.js: 107

108 Bluemixにデプロイする 各 ファイルの 説 明 サンプルアプリケーションの 構 造 は 以 下 のとおり 実 際 のファイルをみながら 内 容 を 確 認 しましょう app.js public css img js Node.jsアプリケーションの 本 体 ここに 配 置 したファイルは 名 でアクセスできる CSSファイル 配 置 用 ディレクトリ 画 像 ファイル 配 置 用 ディレクトリ ブラウザ 用 JavaScript 配 置 用 ディレクトリ index.html routes index.js package.json manifest.yml リクエストを 処 理 するプログラム 配 置 用 ディレクトリ データベースへのアクセス 処 理 を 記 述 Node.jsが 使 用 するモジュールを 記 述 Bluemixにデプロイするための 情 報 を 記 述 108

109 クライアントからのリクエストを 処 理 する ブラウザからのリクエスト 処 理 は routes/index.js に 記 述 している router.get('/api/aed', function(req, res) { GETメソッド URLのパス reqにリクエスト 内 容 が 格 納 されている resにデータを 書 き 込 むことでクライアントにレスポンスを 返 す // レスポンスのHTTPヘッダーのセット res.writeheader(200, {'Content-type': 'application/json; charset=utf-8'}); HTTPステータスコード レスポンスのHTTPヘッダーの 内 容 // レスポンスの 内 容 res.send(data); // レスポンスの 最 後 res.end(); }); res.end(data)とまとめることも 可 能 109

110 ( 参 考 )HTTPのメソッドとステータスコード HTTPはサーバーの 操 作 としていくつかのメソッドを 定 義 している GET: 情 報 の 取 得 データの 取 得 (SELECT) POST:データの 送 信 データの 新 規 作 成 (INSERT) PUT: 指 定 したファイルの 置 き 換 え データの 更 新 (UPDATE) DELETE: 指 定 したファイルの 削 除 データの 削 除 (DELETE) リクエストに 対 するWebサーバーの 応 答 としてステータスコードが 定 義 されている 100 番 台 :Information 200 番 台 :Success 300 番 台 :Redirect 400 番 台 :Client Error 401 Unauthorized 403 Forbidden 404 Not Found など 500 番 台 :Server Error 500 Internal Server Error 503 Service Unavailable など 110

111 SQL Databaseに 接 続 する(1/2) データベースへの 接 続 情 報 は VCAP_SERVICESという 環 境 変 数 に 格 納 されている Bluemixのダッシュボードより アプリケーションを 選 択 し 左 側 メニューの 環 境 変 数 をクリックする 今 回 のサンプルアプリでは この 環 境 変 数 を 取 得 してDBに 接 続 するように 設 定 されているため 個 別 に 指 定 しなくてもアプリからDBが 使 用 できるようになっています( 次 ページ 参 照 ) 111

112 SQL Databaseに 接 続 する(2/2) Node.jsはibm_dbというモジュールを 利 用 してSQL Databaseに 接 続 できる package.jsonにモジュールの 使 用 を 記 述 データベースへのアクセス 処 理 は routes/index.jsに 記 述 している // 使 用 するモジュールの 読 み 込 み var ibmdb = require('ibm_db'); // DB2への 接 続 情 報 の 取 得 var services = JSON.parse(process.env.VCAP_SERVICES); var credentials = services['sqldb'][0].credentials; var dsnstring = xxx; // DB 接 続 開 始 ibmdb.open(dsnstring, function(err, conn) { // 実 行 するSQL 文 var sqlstatement = "SELECT NAME, LATITUDE, LONGITUDE, ADDRESS, AED FROM AEDKANAZAWA"; conn.query(sqlstatement, function (err, rows, moreresultsets) { // DBから 取 得 したデータをJSON 配 列 に 格 納 する for (var i = 0; i < rows.length; i++) { rows[i].longitude }; 112 // DB 接 続 終 了 conn.close(function(){}); }; });