目次


IBM Cloud Continuous Delivery の紹介, パート 2

IBM Cloud サービスを利用するアプリをデプロイする

Fabulous Price Finder を起動、フォーク、デプロイする

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: IBM Cloud Continuous Delivery の紹介, パート 2

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:IBM Cloud Continuous Delivery の紹介, パート 2

このシリーズの続きに乞うご期待。

このチュートリアル・シリーズでは、IBM Cloud Continuous DeliveryIBM Cloud を併せて利用すると、アプリケーションの計画作業、コーディング、デプロイがいかに容易になるかをデモンストレーションします。パート 1 では、単純なアプリケーションをデプロイし、デプロイしたアプリケーションに変更を加える方法を説明しています。パート 2 (このチュートリアル) では、IBM Cloud のサービスを利用するアプリケーションをデプロイする方法を説明します。パート 3 では、IBM DevOps Services の計画機能を利用してアプリケーションを計画および追跡する方法、IBM Cloud の新しいサービスをアプリケーションに追加する方法、そして IBM Cloud のサービスを利用するコードを作成する方法を説明します。パート 4 では、チームのメンバーがコードをプロジェクトのリポジトリーにプッシュすると自動的にそのアプリケーションが IBM Cloud にデプロイされるようにするために、Delivery Pipeline サービスを利用する方法を説明します。

このシリーズのサンプルに取り組むことで一連の知識を得られるだけでなく、おまけとして、オンライン・ストアで商品の価格を自動的にチェックしてくれるアプリケーションを手に入れることができます。このアプリケーションがあれば、お気に入りの商品がセールに出されているかどうかを確かめるために Web を見て回る必要がなくなります!

パート 2 の内容

パート 2 では、IBM Cloud のサービスを利用するアプリケーションのデプロイ方法を説明します。

アプリケーションの概要

このパートの出発点となるのは、パート 1 で作成した Lauren's Lovely Landscapes アプリケーションです。今回は、Fabulous Price Finder アプリケーションも扱います。このアプリケーションでは、ボタンをクリックするだけで、オンラインで購入しようと考えている商品の現在の価格が表示されるようにします。

Fabulous Price Finder のスクリーンショット
Fabulous Price Finder のスクリーンショット

アプリを実行するコードを入手する

作業を開始する上での必要事項

このワークショップはパート 1 の続きです。まだパート 1 を完了していない場合は、完了してからこのパートを開始してください。パート 1 を完了すると、このワークショップに必要なすべてのものが揃います。

1

Fabulous Price Finder をフォークする

パート 1 で、オンライン・ストアを開始しました。今度は Fabulous Price Finder を実行状態にしましょう。

  1. Fabulous Price Finder リポジトリー・ページにアクセスします。
  2. 「Deploy to IBM Cloud (IBM Cloud にデプロイ)」ボタンをクリックします。
  3. IBM Cloud アカウントにログインします (まだログインしていない場合)。
  4. アプリの新しい名前を入力します (または、デフォルトの名前をそのまま使用するのでも構いません)。
  5. 「Deploy (デプロイ)」ボタンをクリックします。

パート 1 でも見たように、これによって新しいツールチェーンのランディング・ページが表示されます。ツールチェーンには、アプリケーションを構築するためのパイプラインと Web ベースのエディターが含まれている他、自動的に作成された新しいリポジトリー内にコードのコピーも格納されています。さらに、パイプラインはすでに稼働していて、アプリケーションのデプロイを自動的に処理するようになっています。

2

Fabulous Price Finder アプリを実行状態にする

パイプラインは最初に、アプリが実行状態になるよう処理します。パイプラインによるアプリケーションのデプロイが完了したかどうかを確認するには、ツールチェーンのページ上でパイプラインのタイルをクリックします。

Delivery Pipeline タイルのスクリーンショット
Delivery Pipeline タイルのスクリーンショット

パイプライン・ページが表示されて、現在どのジョブが実行されているかが示されます。アプリのデプロイが処理されている間は、以下のように表示されます。

デプロイ・ステージ - ジョブ実行中の画面のスクリーンショット
デプロイ・ステージ - ジョブ実行中の画面のスクリーンショット

ジョブが正常に完了すると、以下のような表示に変わります。

デプロイ・ステージ - ジョブ完了後の画面のスクリーンショット
デプロイ・ステージ - ジョブ完了後の画面のスクリーンショット

パイプラインについては、このチュートリアル・シリーズの以降のパートで詳しく説明しますが、ご参考として、パイプラインの実行が完了した後はツールチェーンのリンクをクリックするだけで、そのツールチェーンのランディング・ページに戻ることができます。

3

Cloudant を接続する

Fabulous Price Finder は、Cloudant NoSQL DB サービスを利用します。このサービスを利用すると、完全に管理されたオールウェイズ・オンの NoSQL JSON データ層へアクセスできるようになります。Fabulous Price Finder アプリケーションを正常に機能させるにはこのサービスが必要なので、実行中のアプリケーションに新規 Cloudant NoSQL DB インスタンスをバインドします。

  1. IBM Cloud ダッシュボードを表示して、アプリケーションのリスト内で Fabulous Price Finder を見つけます。Fabulous Price Finder アプリケーションをクリックして、このアプリケーションのダッシュボード・ページを表示します。.

    ヒント: リスト内にアプリケーションが表示されていない場合、バナー内のセレクターを使って領域/組織/スペースを変更し、アプリケーションがデプロイされている場所に一致させると、表示されるようになるはずです。 アカウントの項目を変更するパネルを示すスクリーンショット
    アカウントの項目を変更するパネルを示すスクリーンショット
  2. アプリケーションのダッシュボード・ページが表示されたら、「Connections (接続)」タブをクリックし、「Connect New (今すぐ接続)」をクリックします。
  3. 「Cloudant NoSQL DB」サービスが表示されるまでスクロールダウンし、このサービスをクリックします。
  4. 「Cloudant NoSQL DB」ウィンドウでは、デフォルト値をそのまま受け入れて (このコードでは、Cloudant NoSQL DB サービスの名前が「cloudant」で始まることが前提となっています)、「CREATE (作成)」をクリックします。
  5. Cloudant サービスがすぐに開始できる場合、アプリケーションを再ステージするように促されるので、それに従ってください。再ステージするよう促されなかった場合、少し待ってから「Connections (接続)」タブの「Connect Existing (既存に接続)」を使用して、利用できるようになったサービスに接続してください。この時点でも、アプリケーションを再ステージするように促されますので、それに従ってください。
  6. ページにアプリが実行中であることが示されたら、「View App (アプリを表示)」をクリックします。
4

Fabulous Price Finder を試してみる

Fabulous Price Finder が実行されている状態になったので、このアプリケーションの機能を探りましょう!

商品に関する情報を保管する

Fabulous Price Finder のホーム・ページでは、価格チェックの対象にする商品を登録することができます。まずは、デプロイした Lauren's Lovely Landscapes アプリケーションにある南極大陸の写真プリントを登録して、価格をチェックしましょう。

Fabulous Price Finder のフォームのスクリーンショット
Fabulous Price Finder のフォームのスクリーンショット
  1. ホーム・ページ上のフォーム内に、写真プリントの名前 (「Antarctica」)、そしてオンライン・ストアで調べたその特定の写真プリントを販売しているページの URL (ヒント: 「http://laurenslovelylandscapes-some-random-words.mybluemix.net/antarctica」のような URL を探してください) を指定し、写真プリントの price フィールドの ID (この例の場合、"price”) を指定します。
  2. 「Submit (送信)」をクリックします。

「View Database (データベースの表示)」ページにリダイレクトされます。このページで、上記のステップでデータベースに保管した商品に関する情報を確認することができます。お望みであれば、他の商品の詳細を記録することもできます。

価格を取得する

商品に関する情報を保管した後は、その商品の価格を調べられるようになります。

  1. ホーム・ページで「Get Prices (価格を取得)」をクリックします。
  2. 取得の成功を示すページが表示されたら、そのページで「View the database (データベースを表示)」をクリックします。データベース内の価格を調べるページのスクリーンショット
    データベース内の価格を調べるページのスクリーンショット

商品の価格がデータベースに保管されていることがわかります。試しに、Lauren's Lovely Landscapes プロジェクトに戻って、南極大陸の写真プリントの価格を更新してから (変更をデプロイすることをお忘れなく)、「Get Prices (価格を取得)」をもう一度クリックしてください。写真プリントの新しい価格がデータベースに反映されているはずです。

5

Cloudant データベースについて探る

Cloudant データベースの中身は、参照および更新することができ、アプリケーションをデバッグしたり、扱ったりする上で役立ちます。

  1. IBM Cloud のダッシュボードにアクセスします。
  2. まだユーザーとして認証されていない場合は、ログインします。
  3. ダッシュボードで、FabulousPriceFinder アプリケーションをクリックして開きます。
  4. 「Connections (接続)」セクションで、Cloudant NoSQL DB サービス・インスタンスをクリックして開きます。
  5. 「LAUNCH (起動)」をクリックします。
  6. 「Database (データベース)」セクションで、データベースをクリックして開きます。
  7. データベースに追加したドキュメントを参照します。 データベース内のドキュメントの情報を示すスクリーンショット
    データベース内のドキュメントの情報を示すスクリーンショット

次の作業

創造性を発揮して、アプリケーションのナビゲーションを機能強化してください。そうすれば、サイト内をとても簡単に移動できるようになります。あるいは、アプリケーションの名前をもう少し自分らしい現実的な名前にして、自分用のアプリケーションにしてください!

そしてパート 3 に進み、IBM Cloud Continuous Deliveryの計画機能を利用してアプリケーションを計画および追跡する方法、IBM Cloud の新しいサービスをアプリケーションに追加する方法、そして IBM Cloud のサービスを利用するコードを作成する方法を学んでください。そしてシリーズの最終回 (パート 4) では、複数のステージからなるパイプラインを作成し、手作業でビルドをリクエストします。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, DevOps
ArticleID=993660
ArticleTitle=IBM Cloud Continuous Delivery の紹介, パート 2: IBM Cloud サービスを利用するアプリをデプロイする
publish-date=05242018