初のアプリを IBM Cloud にデプロイする

このチャレンジで、初めて作成した Cloud Foundry アプリケーションを IBM Cloud にデプロイするために IBM Cloud の DevOps ツールチェーンによって自動化されたデプロイメントを使用する方法を学んでください。自動化されたデプロイメントを使用すると、「Deploy to IBM Cloud (IBM Cloud にデプロイ)」ボタンをクリックするだけで、アプリケーションが自動的にビルドされて IBM Cloud にデプロイされます。

このチャレンジでは、次のようなツールチェーンを作成します。

IBM Cloud ツールチェーン

このツールチェーンは 4 つのコンポーネントからなります。

  1. IBM Cloud 上でホストされている GitLab インスタンスを使用した問題管理
  2. IBM Cloud 上でホストされている Git リポジトリー
  3. Eclipse Orion Web IDE
  4. アプリケーションをビルドして IBM Cloud にデプロイするデリバリー・パイプライン

アプリケーションをビルドしてデプロイするパイプラインには、次のような内容が表示されます。

ビルド&デプロイ・パイプライン

このパイプラインは次の 2 つのステップで構成されています。

  1. ビルド: アプリケーション・コードがリポジトリーからプルされて、依存関係がビルドされます。
  2. デプロイ: アプリケーションのビルド成果物が IBM Cloud にデプロイされます。

アプリケーションとツールチェーンのファイル

この単純なアプリケーションでは Vue.js フレームワークを使用して単純なシングルページ・アプリケーションを表示します。webpack を使用してフロントエンドのファイルを静的なアセットにバンドルした後、Node.js と Express フレームワークによってアプリケーションを表示します。

Vue.js アプリケーションのファイルは、このチャレンジのリポジトリー内の /src ディレクトリーに格納されています。これらのファイルが webpack によって /dist フォルダーにバンドルされます。

Node.js の /bin/www ファイルと app.js ファイルでは、Express を使用してフロントエンド・アプリケーションに対応します。一方、/routes にはリクエストをホーム・ページにルーティングするファイルが格納されています。

ツールチェーンを作成するには、デフォルトのツールチェーン・テンプレートを使用します。

上述のリポジトリー内の /.bluemix ディレクトリーに、ツールチェーンとパイプラインのファイルが格納されています。

  • toolchain.yml には、複製されたリポジトリー、パイプライン、Web IDE 統合を含む、ツールチェーンの構造が格納されています。

  • pipeline.yml には、パイプラインの定義が格納されています (この例の場合、パイプラインを構成するステージは ビルドデプロイ の 2 つだけです)。

前提条件

このチャレンジに取り組むには、IBM Cloud アカウントを登録する必要があります。

所要時間

このチャレンジの所要時間は約 10 分です。

手順

  1. 以下の図に示す「Deploy to IBM Cloud (IBM Cloud にデプロイ)」をクリックします。

    「Deploy to IBM Cloud (IBM Cloud にデプロイを示す画像)

  2. IBM Cloud にサインインするよう促されます。まだサインインしていない場合は、アカウント情報を入力してサインインします。

  3. ツールチェーンを作成するページが開きます。作成するツールチェーンの新しい名前を入力します。「Select Region (リージョンの選択)」の下に表示されているリージョンの名前をメモしておきます。後のセクションで、このリージョン名を使用する必要があります。以下の図ではリージョンとして Dallas (ダラス) が選択されていますが、ツールチェーンはユーザーに最も近いリージョンを選択しようとするので、これとは異なるリージョンの場合もあります。

    新しい名前を示す画面のスクリーンショット

  4. 「Tool Integrations (ツール統合)」セクション内にある「Delivery Pipeline (デリバリー・パイプライン)」をクリックします。パイプライン構成設定を更新する必要があります。

    「Tool Integrations (ツールの統合)」セクションを示す画面のスクリーンショット

  5. IBM Cloud API Key (IBM Cloud API キー)」フィールドの横にある「Create (作成)」 (または「New (新規)」) ボタンをクリックします。これにより、ポップアップ・ウィンドウが開きます。

    パイプライン構成を示す画面のスクリーンショット

  6. ウィンドウには、このパイプラインの新しい API キーを作成するかどうかを確認するメッセージが表示されます。「Create (作成)」 (または「OK」) をクリックします。

    API ポップアップのスクリーンショット

  7. Region (リージョン)」、「Space (スペース)」、「Organization (組織)」などの情報が表示されます。組織またはスペースが表示されていない場合、「Region (リージョン)」フィールドを更新してください。例えば、Washington DC (ワシントン DC) が選択されている場合は、Dallas (ダラス) リージョンに変更してください。

    デリバリー・パイプラインの領域を変更する画面のスクリーンショット

  8. ページの上部にある「Create (作成)」をクリックします。すると、新しく作成されたツールチェーンが表示されます。

  9. パイプラインをクリックすると、ビルド中のアプリケーションを表示できます。パイプラインがビルドを完了するまでツールチェーンのページに留まってもかまいません。
  10. ツールチェーンのページで、パイプラインの「Deploy Stage (デプロイ・ステージ)」タイル上にある「View Console (コンソールの表示)」をクリックしてアプリケーション・コンソールを表示します。

    アプリのコンソールを表示する画面のスクリーンショット

  11. アプリケーション・コンソールで、「Visit App URL (アプリ URL にアクセス)」をクリックしてアプリケーションを開きます。

    : Internet Explorer および Microsoft Edge の制約により、これらのブラウザー内ではアプリケーションが表示されません。Firefox、Chrome、または Safari を使用してアプリケーションを開くことをお勧めします。

    「Visit App URL (アプリ URL にアクセス)」を示す画面のスクリーンショット

すべての手順を正しく完了していれば、新しいアプリケーションのホーム・ページ上に次の画像が表示されます。

IBM Cloud へのデプロイが成功したことを示す画面のスクリーンショット

まとめ

このチャレンジでは、自動的にアプリケーションをビルドして IBM Cloud にプッシュするように構成された IBM Cloud の DevOps ツールチェーンを使用して、初めてのアプリケーションをデプロイしました。新しくデプロイしたアプリを探索してから、他のチャレンジに取り組んでください。