Bluemixで動く クラウド開発環境 簡単サンプル

Bluemix は IBM が提供するソフトウェア込みのクラウド環境、つまり PaaS です。これが、ローカル環境を一切使わずアプリ開発できるクラウド開発環境ということなので、どういう事かやってみました。
最近は複数PCを使っていたり、タブレットを使う時間も増えているので、クラウド開発環境があれば確かに便利かもです。

Bluemix は 30日間は無料で使えるので、まず以下の入り口画面に入り、右上の[登録]ボタンから無料ユーザーIDを取得します。

https://console.ng.bluemix.net/
bm0_bluemix

すると以下の登録(Register)画面になるので、アスタリスク(*)付きの必須項目に入力します。Security Questionは、「高校」とかにして、その右に高校名を入れるといった感じです。

bm00_register

そこで入力したe-mailアドレスと、指定したパスワードがIBM IDになりますので、それで Bluemix にサインイン(ログイン)します。すると以下のような「ダッシュボード」が表示されます。Bluemix のクラウド環境を構成する場合は、必ずこの画面から実施します。

bm01_select

下にスクロールすると、[アプリケーション]のところに、[+ アプリの作成] という四角がありますので、ここをクリックします。

bm02_apl+

すると以下のように、[WEB] と [モバイル] を選択する画面が出てきます。何と、これだけでどちらかの環境が自動的に構成されます。(これは素晴らしい) [WEB] をクリックしてブラウザ用アプリを作りましょう。

bm03_web

次に、まずどのサービス(ソフトウェア)の上でプログラムを動かすか聞いてきますので、一番簡単な、Node.js を選びましょう。[SDK for Node.js] というのがソレです。js とは JavaScriptのことで、言語としては JavaScript がクラウド側で動かせるようになります。[続行] ボタンで次に進んでください。

bm05_nodejs

次に、新規作成するアプリの名前を入力します。以下の [アプリ名] のところに自由な名前を入れることができますが、既存の名称と重複すると再入力になるので、重複しないように名前を入れます。(この名称がURLになるため)
私は 「BMSample」 にしましたが、これとは違う名前にしてください。入力し、Enterを押したらすぐにアプリケーション環境が起動します。

bm04_aplname

すると、以下のような開発環境を選択する画面が表示されます。一番右の [GIT] を選んでみましょう。ローカルPC環境でなく、クラウド上で開発することができます。

bm06_git

下にスクロールして、[アプリの概要の表示] ボタンを押してください。

bm07_git2

すると以下のような「アプリの概要」の画面になり、既に自分で追加したアプリケーションがクラウド上で稼動しているのが確認できます。右に [アプリは稼動しています] とありますよね。

bm05_2_addGit

次に、開発環境を作成します。上の画面の右上に、[GITの追加] がありますので、そこをクリックしてください。すると、以下のように Jazz ID でのログイン画面が表示されます。Jazz IDを既に持っている場合は入力し、持っていない場合は別途取得してからこの画面に戻ってきてください。(以下のURLで簡単に取得でき、後からBluemixのIDと統合できます)

Jazz IDの取得: https://jazz.net/wiki/

bm08_jazzid

以下の画面が表示されたら、[リポジトリにスターター・アプリケーション・パッケージを取り込み・・・] にチェックがされていることを確認の上、[続行] ボタンを押してください。チェックされていると、サンプルコード等が一緒に取り込まれます。

bm09_gitrepo

Gitリポジトリを作るのに少し時間がかかるため、待ちます。Gitリポジトリはソースコードを置く場所のことです。普通自分のPCにソースコードを置いて、それをEclipse等で編集してプログラムを作成しますが、クラウド上のGitリポジトリにプログラムを置き、そのままクラウド上で編集・稼動させることができるようになります。
ちなみにJazzは、そういったソースコードを共有しながら複数の人で共同開発するための環境です。

[正常に終了しました] と表示されると、以下の [アプリの概要] に戻れます。右上に[GIT URI: xxxx] と、 [コードの編集] が表示されるようになります。GIT URLがソースコードの置かれる場所のアドレスになります。右の [コードの編集] をクリックして、クラウド開発環境である Web IDE 環境に入りましょう。

bm09_2_editCode

すると以下のようなブラウザ上の統合開発環境、Web IDE(統合開発環境)が表示されます。Eclipse Orionプロジェクトで開発されている、Webブラウザだけで動く統合開発環境ですね。左のツリーの [views]フォルダーから、[body.jade] を選択してみてください。右にソースコードが表示されます。

そのソースコードの 11行目は、以下のようになっていると思います。

h1 Hi there!

この後ろに以下のように、「こんにちは!」 と入力して以下のように変更してみましょう。(下のイメージは変更後)

h1 Hi there! こんにちは!

変更したら、左にある、[ファイル] メニューを開いて、[保存] をクリックして保存しましょう。

bm010_edit_save

以下のようにメニューバーのやや右にある [▶] をクリックして、「このアプリケーションを再度デプロイ」 してください。サーバーが一度停止し、再起動します。(このボタンが無かったら、右上の[Build&Deploy]をクリックしてから戻ってください)
しばらく時間がかかりますが、[実動の実行中] の緑の表示に変わったら、再度実行可能になります。

bm011_redeploy

次に、この変更したプログラムを実行してWeb画面に結果を表示しましょう。先ほどの2つ右のアイコンをクリックし、「URLを開く」 を実行します。

bm011_2_openURL

すると、以下のように自分で入力した 「こんにちは!」 が、画面に追加されているはずです!これで自分で変更したアプリがクラウド上で動いたことが確認できます。

bm012_result1

ブラウザに表示される URL も、以下のように自分が指定したアプリ名称のURLになっていることが確認できます。

https://bmsample.mybluemix.net/

これは自分のPCではなく、既にクラウドで動いているため、どのPCのブラウザからでもこのURLを入力すれば画面を見ることができます。

次にもう少し編集してみましょう。以下の2行を、それだけ残して後は削除するか、その下のイメージのように行の先頭に 「//」 を入力しコメントアウトすることで実行しないようにしてください。

body
h1 こんにちは!

bm013_edit2

そして再度保存し、「このアプリケーションを再度デプロイ」 と、「URLを開く」 を実行すると、以下のように表示されるはずです!

bm014_result2

後は自分の好きに編集してみてください!

クラウド上の開発環境、面白いですね。
Web IDEなどこのブラウザ上の開発環境は、IBM DevOps Services (IDS) と呼んでいるようですが、まさにクラウド開発したものをすぐに同じクラウドで動かす 「DevOps」 環境ですね!

決して反応は速くはありませんが、気軽に何か作って動かしてみるには、いろんな端末から使えるので便利そうです。




=> Bluemixについての紹介資料

 

FacebookTwitterGoogle+Line