IBM Cloud Continuous Delivery の紹介, パート 1
単純なアプリをデプロイして更新する
アプリをフォークしてデプロイし、更新してから再びデプロイして、変更後のアプリをライブで確認する
コンテンツシリーズ
このコンテンツは全#シリーズのパート#です： IBM Cloud Continuous Delivery の紹介, パート 1
このコンテンツはシリーズの一部分です：IBM Cloud Continuous Delivery の紹介, パート 1
このシリーズの続きに乞うご期待。
私は開発者として常に、作業をより迅速かつ容易に終える方法を探しています。開発環境のセットアップやサーバーの構成など、一般に自動化できるような作業に時間を無駄にするのは嫌いです (作業する時間が短くなれば、その分、ショッピングに時間をかけられます)。だからこそ、私は IBM Cloud Continuous Delivery を好んで利用しています。
“IBM Cloud はクラウド内でインフラストラクチャーとサービスを提供しているので、サーバーを管理することや、他の誰かがすでにコーディングしたものをコーディングする作業に時間をかけることについて気に掛ける必要はありません。IBM Cloud Continuous Delivery にはクラウド内でのコーティング作業に必要なツール (セットアップは不要です)、そしてアプリケーションの計画作業や他の開発者との共同作業に必要なツールが揃っています。”
Continuous Delivery の非常に優れた機能を紹介するために、私はこの 4 部構成のチュートリアル・シリーズを作成しました。パート 1 では、単純なアプリケーションをデプロイして変更を加える方法を説明します。パート 2 では、IBM Cloud サービスを利用するアプリケーションをデプロイする基本的な方法を説明します。パート 3 では、Continuous Delivery の計画機能を利用してアプリケーションを計画および追跡する方法、IBM Cloud の新しいサービスをアプリケーションに追加する方法、そして IBM Cloud のサービスを利用するコードを作成する方法を説明します。パート 4 では、Delivery Pipeline サービスを利用する方法を詳しく説明します。Delivery Pipeline サービスを利用することで、チームのメンバーがコードをプロジェクトのリポジトリーにプッシュすると、自動的にそのアプリケーションを IBM Cloud にデプロイできます。
このシリーズのサンプルに取り組むことで一連の知識を得られるだけでなく、おまけとして、オンライン・ストアで商品の価格を自動的にチェックしてくれるアプリケーションを手に入れることができます。このアプリケーションがあれば、お気に入りの商品がセールに出されているかどうかを確かめるために Web を見て回る必要がなくなります！
パート 1 の内容
パート 1 では、以下の方法を学びます。
- 既存のアプリケーションをフォークする
- Continuous Delivery から IBM Cloud にアプリケーションをデプロイする
- 「Eclipse Orion Web IDE」と呼ばれる、Continuous Delivery の Web 統合開発環境の中で、アプリケーションに変更を加える
アプリケーションの概要
このワークショップでは、「Lauren's Lovely Landscapes (ローレンのお気に入りの景色)」という名前のサンプル・オンライン・ストアに取り組みます。このストアで現在販売しているのは、3 枚の写真プリントです。それぞれの写真プリントのページには、その写真に付けられた名前、価格、そして画像が表示されます。
作業を開始する上での必要事項
作業に取り掛かる前に、IBM Cloud に登録する必要があります。また、以下のいずれかのブラウザーの最新バージョンも必要です。
- Chrome
- Firefox
- Internet Explorer
- Safari
オンライン・ストアを立ち上げる
このチュートリアルで使用する Fabulous Price Finder を扱ったり、テストしたりする際には、価格を簡単に操作できるオンライン・ストアがあると便利です。そのようなオンライン・ストアを用意するために、「Lauren's Lovely Landscapes」アプリケーションをフォークして、IBM Cloud にデプロイしてください。
IBM Cloud Continuous Delivery を使用してアプリケーションをフォークするということは、既存のリポジトリーに含まれるコードをコピーして、コピーしたコードを新しいリポジトリー内に配置することだけでなく、そのコードを処理してデプロイするために必要となる、ツールチェーンと呼ばれる一連のツールを起動することも意味します。アプリケーションは手作業でフォークすることもできますが、このチュートリアルの例では、それよりも簡単な方法を使用します。
Lauren's Lovely Landscapes をフォークする
- Lauren's Lovely Landscapes のリポジトリーのページにアクセスします。
- 「Deploy to IBM Cloud (IBM Cloud にデプロイ)」ボタンをクリックします。
- アカウントにログインするか、必要に応じてアカウントを作成します。
- アプリケーションの新しい名前を入力します (デフォルトの名前をそのまま使うのでも構いません)。
- デプロイ・ボタンをクリックします。
これにより、新しいツールチェーンのランディング・ページが表示されます。ツールチェーンには、自動的に作成された新しいリポジトリー内のコードのコピーに加え、アプリケーションを構築するためのパイプラインと Web ベースのエディターが含まれています。さらに、パイプラインはすでに稼働していて、アプリケーションのデプロイを自動的に処理するようになっています。
Lauren’s Lovely Landscapes が実行されているのを確認する
パイプラインによるアプリケーションのデプロイが完了したかどうかを確認するには、ツールチェーン・ページ上でパイプラインのタイトルをクリックします。
パイプライン・ページが表示されて、現在実行中のジョブが示されます。アプリケーションのデプロイが処理されている間は、以下のように表示されます。
ジョブが正常に完了すると、以下のような表示に変わります。
パイプラインについては今後のチュートリアルで詳しく説明するとして、とりあえず今は、パイプラインの実行が完了した時点で「Toolchain (ツールチェーン)」リンクをクリックしてください。これで、ツールチェーンのランディング・ページに戻るので、「View app (アプリケーションを表示)」ボタンをクリックして、アプリケーションが実行されていることを確認できます。
IBM Cloud 上で実際に実行されているアプリケーションをブラウズします。「Antarctica (南極大陸)」ページをクリックして、現在の価格が 100.00 ドルになっていることを確認してください。
コードの変更: 商品の価格を更新する
前述したように、このアプリケーションのソース・コードは、IBM によってホストされている Git リポジトリー内に保管されています。このホスト型 Git には「Git Repos and Issue Tracking (Git リポジトリーおよび問題追跡)」という名前が付いています。このリポジトリーを表示するには、ツールチェーン・ページ上で、以下のように表示されているリポジトリーのタイトルをクリックします。
コードを開発する際は、リポジトリーを複製できるツールであれば、どのツールでも使用できます。そのようなツールとして、コマンド・ラインを使用するのでも構いません。また、IBM Cloud に直接デプロイするためのコマンド・ライン・ツールをインストールするという選択肢もあります。
ここでは、単純にするために、ツールチェーンに含まれている Eclipse Orion Web IDE を使用します。この IDE を表示するには、ツールチェーン・ページ上で、以下のように表示されている IDE のタイトルをクリックします。
Eclipse Orion Web IDE が開き、ツールチェーン・リポジトリーをオンライン・ワークスペースに複製します。このワークスペースで、コードを開発してテストしてから、コミットすることができます。同じツールチェーンを使用して複数のチーム・メンバーが作業する場合、このワークスペースは互いの作業に干渉しないようにする上でも役立ちます。Web IDE がロードされたら、以下の手順に従ってください。
- Web IDE の左側のペインで、リポジトリー名が示された行を展開し、続いて「views」フォルダーを展開して
antarctica.tplを選択します。 <div id="price">100.00</div>が見つかるまでスクロールダウンします。- 「100.00」を「99.99」で置き換えます (わあ、すごい値引き！ ;-))。
- 「File (ファイル)」 > 「Save (保存)」の順にクリックします。
Web IDE では、起動構成を使用してアプリケーションのデプロイ先を制御します。この起動構成により、ワークスペースからデプロイする際の動作をより詳細に制御することができます。例えば、起動構成を使用してマニフェスト・ファイル内の設定をオーバーライドすることもできますが、とりあえずは以下の手順に従って起動構成を作成し、使用するだけで十分です。
- 「Create new launch configuration (新しい起動構成を作成)」をクリックし、ドロップダウン・メニューに示される「+」記号をクリックします。
- 「Edit Launch Configuration (起動構成の編集)」ダイアログが開きます。データが取り込まれるまでに時間がかかることもありますが、データの取り込みが完了すると、以下のような画面が表示されます。
- 「Target (ターゲット)」、「Organization (組織)」、および「Space (スペース)」フィールドで、IBM Cloud 内でのアプリケーションのデプロイ先を指定します。これらのフィールドをデフォルト値のままにしても問題ありませんが、必要に応じて変更できます。
- デプロイ・ボタン (
) をクリックします。 - アプリケーションを停止して再デプロイするよう求められたら、「OK」をクリックします。
- アプリケーションのデプロイが完了したら、ページ上部にある灰色のバーの「Open URL (URL を開く)」ボタン (
) をクリックします。 - 開いたアプリケーションで、「Antarctica (南極大陸)」をクリックします。
アプリケーションがデプロイされると、アプリケーションの成果物がバンドルされて IBM Cloud 内でアプリケーションが作成されます。そしてバンドルされたアプリケーションが、IBM Cloud に転送されて開始されます。IBM Cloud でのアプリケーションの名前と URL は、通常はソース・コード内の manifest.yml ファイルに定義されているプロパティーを使用して作成されます。「Lauren's Lovely Landscapes」のソース・コードには、すでにこのマニフェスト・ファイルが作成されています。
- Web IDE の左側にあるナビゲーション・ペインで、
manifest.ymlを選択します。 - 上部のバーでデプロイ用ボタン () をクリックします。
注: Web IDE を利用してデプロイする場合は、Web IDE のワークスペース内の変更内容をデプロイすることになります。具体的に言うと、現在作業している変更内容のなかで、まだリポジトリーにプッシュされていないものがある場合には、それらの変更がデプロイされることになります。
商品の価格を更新する
商品の価格が更新されるように、アプリケーションに変更を加えます。
- Web IDE の左側のペインに、リポジトリーの名前が表示されています。その横にある三角形をクリックしてリポジトリーを展開し、続いて「views」フォルダーを展開して
antarctica.tplを選択します。 - ファイルの内容が表示されたペインで、
<div id="price">100.00</div>が見つかるまでスクロールダウンします。 - 「100.00」を「99.99」に置き換えます。
- 「File (ファイル)」 > 「Save (保存)」の順にクリックします。
- デプロイ用ボタン ()をクリックします。
- アプリケーションを停止して再デプロイするよう促されたら、「OK」をクリックします。
- アプリケーションがデプロイされたら、ページ上部にある灰色のバーの「Open the application URL (アプリケーション URL を開く)」ボタン () をクリックします。
- 開いたページで、「Antarctica (南極大陸)」をクリックします。
商品の価格が更新されていることがわかるはずです。成功です！
次の作業
少し時間を取って、ここまでのステップで皆さんが行った素晴らしい作業を振り返ってください。IBM Cloud とIBM Cloud Continuous Delivery を利用して、簡単にアプリケーションをフォーク (コピー) してデプロイすることができました。また、IDE のセットアップを手作業で行うことなくアプリケーションを更新し、再度デプロイして、その変更が実行中のアプリケーションに反映されていることを確認できました。
次に、このアプリケーションに対して創造力を働かせてください。Lauren’s Lovely Landscapes は今や皆さんのものです。アプリケーションの名前を変更したり、配色を変更したり、画像を変更したり、あるいはショッピング・カートを夢中で実装したりして、このサイトを皆さん独自のものにして再デプロイしてください。
そして、このシリーズのパート 2 に進んで、IBM Cloud のサービスを利用するアプリケーションのデプロイ方法を学んでください。