目次


Bluemix に「Hello World」Web ページをデプロイする

簡単なアプリを作成して Web ページを IBM クラウド・プラットフォームにデプロイする

Comments

開発者たちは実に素晴らしいサンプル・アプリとスターター・ボイラープレートを Bluemix 上で作成していますが、場合によっては、基本的な「Hello World」アプリが必要な場合もあります。私が、そのような場合のお手伝いをします。

このチュートリアルでは、シンプルな「Hello World」アプリを作成して、Web ページを IBM Bluemix クラウド・プラットフォームにデプロイする方法を紹介します。この方法で使用するのは、HTML と、GitHub 上にホストされている静的ファイルのビルドパックだけです。以下のボタンで、これから作成するアプリを実行することや、このアプリを作成するためのコードを入手することができます。

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

アプリを自分で作成してみませんか?

迅速なスタートを切るために、皆さんはビルド済みのシンプルなアプリを Bluemix にデプロイすることができます。その後は、コードを好きなだけ何度でも編集して再デプロイすることができます。

あるいは、コードをブラウズし、「Hello World」Web ページを作成するアプリの読み取り専用バージョンを表示しても構いません。皆さんが満足いくまで、コードをフォークして編集し、デプロイすることができます。

アプリを作成する上で必要となるもの

手順はこのとおりです

ステップ 1. アプリ用のプロジェクトを作成する

作成するプロジェクトは、IBM Bluemix DevOps Services に置かれることになります。

  1. IBM Bluemix DevOps Services にログインします。
  2. 最上部のナビゲーションで、「MY PROJECTS (マイ・プロジェクト)」をクリックします。
  3. 「new project (新規プロジェクト)」をクリックします。
  4. 「Create a project (プロジェクトの作成)」ページで、以下の手順に従います。
    1. プロジェクトの名前を入力します。
    2. ソース管理の方法を選択します (私は Git リポジトリーを好んで使っています)。
    3. 「Make this a Bluemix Project (Bluemix プロジェクトにする)」ボックスにチェック・マークを付けます。
    4. 「CREATE (作成)」をクリックします。

ステップ 2. シンプルな Web ページを作成する

プロジェクトを作成したら、次はコーディングを行います。この例では、シンプルな Web ページで、世界に向かって「Hello」と挨拶します。コーディング作業は、ブラウザー上の Web IDE で一貫して行うことができます。

  1. プロジェクトの概要ページで、「EDIT CODE (コードの編集)」ボタンをクリックします。

    これによって、Web IDE が開きます。License.txt、project.json、README.md など、いくつかのファイルが自動的に作成されます。

  2. Web IDE で、「File (ファイル)」 > 「New (新規)」 > 「File (ファイル)」の順に選択します。
  3. ファイルが強調表示されて、ファイル名を入力できる状態になるので、 「index.html」と入力します。
  4. 右側のエディター領域に、以下のコードを貼り付けます。
    <html>
         <body>
              Hello, Bluemix World!
         </body>
    </html>

ステップ 3. マニフェストを作成する

マニフェストとは、Bluemix にアプリのデプロイ方法を指示するファイルのことです。マニフェストを作成しなくても、Web IDE の起動構成ウィザードを使ってアプリをデプロイすることはできますが、Web IDE あるいは CF コマンド・ライン・ツールのいずれを使っても、簡単にアプリをデプロイできるように、これから極めて単純なマニフェストを作成します。

  1. Web IDE で、「File (ファイル)」 > 「New (新規)」 > 「File (ファイル)」の順に選択します。
  2. ファイルが強調表示されて、ファイル名を入力できる状態になります。「manifest.yml」と入力します。
  3. 右側のエディター領域に、以下のコードを貼り付けます。
    ---
    applications:
    - buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
      host: helloworld-html-${random-word}
      name: helloworld-html
      memory: 64M
      stack: cflinuxfs2

    ホストは、基本的にアプリの URL になります。選択するホスト名は、Bluemix 全体で一意でなければならないので、{random-word} の部分を固有のストリング (例えば、自分のイニシャルなど) で置き換えてください。

マニフェストの各行が、アプリのデプロイ方法に関する重要な指示を Bluemix に与えます。

  • ビルドパック (buildpack) には、Bluemix がアプリを実行するのに必要なフレームワークやランタイムのサポートが含まれています。このアプリには、GitHub でホストされている静的ファイルのビルドパックを使用します。
  • ホスト (host) は、基本的にアプリの URL になります。選択するホスト名は、Bluemix 全体で一意でなければなりません。このチュートリアルに従っている読者の間でデプロイメントが競合することのないように、ホスト名に ${random-word} キーワードを追加しました。したがって、好きなようにホストをカスタマイズすることができます。
  • メモリー (memory) は、Bluemix スペースでアプリに割り当てるメモリー容量を指定します。メモリーは、マニフェストに必須ではありませんが、このアプリが Bluemix スペースに割り当てられたメモリーの大部分を使用することがないよう、この例ではメモリー容量を指定しています。
  • スタック (stack) は、Cloud Foundry の定義によると、「ビルドパックと連動して、実行中のアプリをサポートするために使用される、ビルド済みのルート・ファイルシステム (rootfs)」です。このアプリで使用している静的ファイルのビルドパックには、cflinuxfs2 スタックが必要です。Bluemix は現在、デフォルトで古いスタックを使用するようになっているため、スタックを cflinuxfs2 として指定する必要があります。ほとんどのビルドパックでは、スタックを指定する必要はありません。

ステップ 4. アプリをデプロイして開く

Web ページとマニフェストを作成したので、デプロイする準備は万端です!

  1. Web IDE で、「Deploy (デプロイ)」ボタンをクリックします。 「Deploy (デプロイ)」ボタンのスクリーンショット
    「Deploy (デプロイ)」ボタンのスクリーンショット

    これで、アプリが Bluemix にデプロイされます。このプロセスは約 1 分で完了します。実行バーに緑色のドットが表示されたら、デプロイが完了したことになります。

    緑色のドットが表示された実行バーのスクリーンショット
    緑色のドットが表示された実行バーのスクリーンショット
  2. アプリのデプロイが完了したら、「Open the application URL (アプリケーション URL を開く)」ボタンをクリックして、アプリを Web IDE に開きます。 「Open the application URL (アプリケーション URL を開く)」ボタンのスクリーンショット
    「Open the application URL (アプリケーション URL を開く)」ボタンのスクリーンショット

おめでとうございます!アプリが Bluemix の世界に歓迎の挨拶を送っています。

まとめと次のステップ

このチュートリアルでは、シンプルな「Hello World」Web ページを作成するために、DevOps Services でプロジェクトを作成し、index.html ファイルと manifest.yml ファイルを作成して、アプリを Bluemix にデプロイしました。引き続きこのアプリに取り組むとしたら、index.html に変更を加えたり、新しい Web ページを作成して Bluemix にデプロイしたりすることができます。

DevOps Services を使用してアプリの開発を計画、編成する方法の詳細を探ってください。また、アプリに Bluemix のサービスを追加することで、動的アプリをデプロイすることもできます (同僚の e-メールを分析しようと思ったら、Personality Insights Node.js Web Starter ボイラープレートを利用すると楽しいです)。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=1016828
ArticleTitle=Bluemix に「Hello World」Web ページをデプロイする
publish-date=10082015