LoginSignup
9
4

More than 5 years have passed since last update.

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

Posted at

はじめに

これはIBM RedbooksのDeveloping Node.js Applications on IBM Cloudをなぞってみたものです。
この記事では第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

任意のアプリ名を入力し、右下の「作成」をクリックします。
このアプリ名はIBM Cloud上の他のアプリと被らないものでなくてはいけません。
image.png

サービスの利用準備ができたら、アプリ名の横の表示が緑に変わりますので、それまで数分待ちます。
image.png

image.png

Continuous Deliveryを有効化する

「概要」タブに移動します。
下部にある「継続的デリバリー」を「有効化」ボタンを押して有効化します。
image.png

Continuous Deliveryツールチェーンの作成画面が現れますので、「地域」と「組織」を選択します。
image.png

下にスクロールして、「ツール統合」欄を設定します。
「リポジトリタイプ」はデフォルトでは「クローン」が選択されていますが、この演習では「新規作成」に変更します。そのほかの設定はそのままにして「作成」をクリックします。
image.png

作成完了後、以下のような画面が表示されます。
フェーズは「THINK」「CODE」「DELIVER」の3つに分かれています。
image.png

Node.js Webサーバの作成

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

しばらく待つと以下のような画面が現れます。
ここでは、JavaScript、HTML、CSSなどを使って開発ができます。
image.png

左側のメニューにあるアプリ名を右クリックして、「新規作成」→「ファイル」を選択します。
ファイル名を「manifest.yml」としてEnterを押します。
このファイルにはIBM Cloudにアプリをデプロイするための情報が表記されます。
image.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

先ほどと同様にして、今度は「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

三角形のデプロイボタンをクリックします。
再デプロイの確認画面が出たらOKをクリックします。
image.png
image.png

デプロイをしている間は起動構成の部分が「デプロイ中」になります。
デプロイが終わったら同部分は緑の丸がつき、「実行中」と表示されます。
image.png

デプロイが終わったら、デプロイされたアプリケーションを開きます。
image.png

「Hello NodeJS!」というメッセージが表示されたでしょうか?
image.png

Node.jsアプリにモジュールを加える

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

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

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

「新規作成」->「フォルダ」で「currentDate」というフォルダを作成します。
image.png

「currentDate」フォルダの中に「package.json」というファイルを作成します。
image.png

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

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

currentDateフォルダの中に「lib」というフォルダを新規作成します。
「lib」フォルダ内に「currentDate.js」ファイルを作成します。
image.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

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

デプロイします。

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

image.png

アプリを停止する

もし、IBM Cloudライトアカウントをご利用中の場合、メモリは他のアプリも合わせて256MBに制限されています。
そのため、このアプリを停止することで、このアプリで利用中のリソースを他に明け渡したいということがあるかもしれません。
そんな際は、四角い停止ボタンをクリックしブラウザを閉じます。
image.png

おわり

今回の内容は以上です。
原本であるDeveloping Node.js Applications on IBM Cloudには続章がありますので、引き続きまとめられたらいいなと思っています。

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4