【演習】IBM CloudでNode.jsアプリを構築する - Part1: HelloWorld

#はじめに
これはIBM Redbooksの[Developing Node.js Applications on IBM Cloud](http://www.redbooks.ibm.com/abstracts/sg248406.html)をなぞってみたものです。
この記事では第1章の「Developing a Hello World Node.js app on IBM Cloud」に取り組んでいきます。

この章ではEclipse Orion Web IDEとIBM Cloudを使って、Node.jsベースのサーバアプリを構築します。

#必要物
- IBM Cloudアカウント
- インターネットに接続できる環境
- Google Chrome または Firefox
- OS: Linux, Mac OS または Windows

# IBM Cloud上にNode.js環境を立ち上げる
まずはIBM Cloudにログインします。
すると、ダッシュボードが表示されるので、右上の「Create resource」をクリックします。
(あるいは右上の「カタログ」をクリックします。)

カタログに移動したら、左のメニューから「Cloud Foundryアプリ」を選ぶか検索バーに「Node.js」を入力し、「SDK for Node.js」サービスを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/b0a5d2f2-ea5a-1292-f30a-3a1d9bb924c4.png)

任意のアプリ名を入力し、右下の「作成」をクリックします。
このアプリ名はIBM Cloud上の他のアプリと被らないものでなくてはいけません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/d1850b58-928b-2434-bf32-33f7f7678df2.png)

サービスの利用準備ができたら、アプリ名の横の表示が緑に変わりますので、それまで数分待ちます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/d5d0fdb5-0407-ee4f-72a8-2666b45afafc.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/9caaef39-0218-2efb-b58c-28053c63ea20.png)

# Continuous Deliveryを有効化する
「概要」タブに移動します。
下部にある「継続的デリバリー」を「有効化」ボタンを押して有効化します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/b85a8acf-29ad-8a5d-4e6d-a1b50eb34c46.png)

Continuous Deliveryツールチェーンの作成画面が現れますので、「地域」と「組織」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/6fe31fb6-13b3-1008-1018-0835baedaf8b.png)

下にスクロールして、「ツール統合」欄を設定します。
「リポジトリタイプ」はデフォルトでは「クローン」が選択されていますが、この演習では「新規作成」に変更します。そのほかの設定はそのままにして「作成」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/bfd6ff35-e794-ca94-144b-690621d6e7f0.png)

作成完了後、以下のような画面が表示されます。
フェーズは「THINK」「CODE」「DELIVER」の3つに分かれています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/1aa1e397-e7c8-9d65-6072-58e359ae7bc1.png)

# Node.js Webサーバの作成
ここでは Eclipse Orion Web IDEを使ってコードを書いていきます。
上の画面の「CODE」のところにある「Eclipse Orion Web IDE」を選択します。

しばらく待つと以下のような画面が現れます。
ここでは、JavaScript、HTML、CSSなどを使って開発ができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/ff86d686-000d-d6f2-52bf-d8809e963878.png)

左側のメニューにあるアプリ名を右クリックして、「新規作成」→「ファイル」を選択します。
ファイル名を「manifest.yml」としてEnterを押します。
このファイルにはIBM Cloudにアプリをデプロイするための情報が表記されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/52ee2c47-e4ac-c000-fb57-23034c0037a8.png)

ファイルに以下のように表記します。
各項目は各々の環境に合わせて変更してください。
ホスト名は変更していなければアプリ名と同じものになっているはずです。

```manifest.yml
applications:
- path: .
memory: 256M
instances: 1
domain: mybluemix.net
name: <アプリ名>
host: <ホスト名>
disk_quota: 1024M
```

ドメイン(domain)はサービス作成時のリージョンによって変更する必要があります。

```
米国南部 US SOUTH -> mybluemix.net
英国　UNITED KINGDOM -> eu-gb.mybluemix.net
シドニー SYDNEY -> syd.mybluemix.net
ドイツ　GERMANY -> eu-de.mybluemix.net
```

「ファイル」->「保存」でファイルを保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/71448f36-b87a-e009-5e09-4744543b16d3.png)

先ほどと同様にして、今度は「package.json」というファイルを新規作成します。
NPMというNode.jsのパッケージマネジャーがこのファイルを使用します。
ファイルには以下のように記述し、保存します。

```package.json
{
       "name": "NodejsStarterApp",
        "version": "0.0.1",
        "description": "A Hello World NodeJS sample",
        "scripts": {
        "start": "node app.js"
        } 
}
```

さらにもう一つ「app.js」というファイルを作成し、以下のように記述して保存します。
requireはNPMで管理されているnodeモジュールをインポートするのに用いられます。
ここで作成されたサーバはクライアントから送られたHTTPリクエストを管理するのに用いられます。

```app.js
var http = require("http");
// Read the port from the underlying environment. 
// If not exist, use the default port: 8080
var port = process.env.VCAP_APP_PORT || 8080;

// Create the server and listen to requests on the specified port.
http.createServer(function (request, response) {
// Set the content type of the response
response.writeHead(200, {'Content-Type': 'text/plain'});
// Write a simple Hello World message,
// which will be shown in the user's web browser
response.end('Hello NodeJS!');   
}).listen(port);
```

ツールバーの中に、「新規起動構成の作成」というドロップダウンがありますので、その中の「＋」をクリックします。出てきた設定画面の設定を確認して、正しければ確定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/1e735efc-6a95-5371-f3ed-19639ed21c98.png)

三角形のデプロイボタンをクリックします。
再デプロイの確認画面が出たらOKをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/cb5914a3-0e28-f273-f4fc-749042be1573.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/8662518a-24d6-953c-aac3-7d961eccc2bf.png)

デプロイをしている間は起動構成の部分が「デプロイ中」になります。
デプロイが終わったら同部分は緑の丸がつき、「実行中」と表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/f2bf9a1c-e862-505c-0ab3-de1077c8e1ce.png)

デプロイが終わったら、デプロイされたアプリケーションを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/05a0caa6-d7b6-ae27-6882-fdfbb555521f.png)

「Hello NodeJS!」というメッセージが表示されたでしょうか？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/62992776-ad40-8670-0750-4a910326dd01.png)

# Node.jsアプリにモジュールを加える
モジュールとはコードをひとまとめにカプセル化することです。つまり、モジュールを作成するということは、コードを1つのファイルにまとめるということです。

Node.jsにはHTTPモジュールなど複数のモジュールがあらかじめ組み込まれています。

自分でモジュールを作成したい場合は以下のようにします。

「新規作成」->「フォルダ」で「currentDate」というフォルダを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/c7cb7167-497b-1d77-750c-b68ca2d536de.png)

「currentDate」フォルダの中に「package.json」というファイルを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/c2caefdd-5927-7ae7-4427-5f96f408516c.png)

package.jsonファイルの中に以下のコードを記述します。
できたら保存します。

```package.json
{
    "name": "currentDate",
    "main": "./lib/currentDate"
}
```

currentDateフォルダの中に「lib」というフォルダを新規作成します。
「lib」フォルダ内に「currentDate.js」ファイルを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/e9a7bff2-49e0-99f1-a486-91eecd57fddb.png)

currentDate.jsファイル内に以下のコードを記述し保存します。
このcurrentDateTime関数はDate()をつかって現在の日付を返すという単純なものです。
この関数は「exports」という変数を伴っています。この変数は関数を出力するのに用いられます。

```currentDate.js
exports.currentDateTime = function() {
    return Date();
};
```

既存のapp.jsファイルを開きます。
```var http = require("http");``` という行の下に ```var dateModule = require('./currentDate');``` を加えます。
この行を加えることで、先ほど作成したcurrentDateモジュールをapp.jsファイルに加えることができます。

また、以下の記述を

```
/ Write a simple Hello World message, 
// which will be shown in the user's web browser
response.end('Hello NodeJS!');
```

次のように書き換えます。

```
// Write a simple Hello World message appended with the current date
response.end('Hello NodeJS! The time now is: ' + dateModule.currentDateTime());
```

全体としては以下のようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/c69d377d-2778-896e-81ff-3622fbb12e4d.png)

変更は自動保存されていますが、保存を確実にしたい際はこれまでのファイルの新規作成時と同様に「ファイル」->「保存」します。

デプロイします。

デプロイが完了したらアプリを開きます。
以下のメッセージが、ご自身の現在の日時を伴って表示されたでしょうか？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/8acac4cd-7845-1e70-12ab-842c935b410b.png)

# アプリを停止する
もし、IBM Cloudライトアカウントをご利用中の場合、メモリは他のアプリも合わせて256MBに制限されています。
そのため、このアプリを停止することで、このアプリで利用中のリソースを他に明け渡したいということがあるかもしれません。
そんな際は、四角い停止ボタンをクリックしブラウザを閉じます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141025/6d0d6e34-5701-a523-9d96-0ea682fa9a79.png)

#おわり
今回の内容は以上です。
原本である[Developing Node.js Applications on IBM Cloud](http://www.redbooks.ibm.com/abstracts/sg248406.html)には続章がありますので、引き続きまとめられたらいいなと思っています。