ウェブアプリを作ってみよう

ウェブアプリを実装する

Hello World ウェブアプリ(以降 Worker)を Node.jsExpress フレームワークを使って実装しましょう。

Worker 開発環境へ接続

Worker 開発環境に接続する様子 (↑クリックで拡大表示)

先ほど起動した Worker 開発環境 Docker コンテナに、docker exec コマンドで接続します。Worker 開発環境では、開発用に magellan というユーザーアカウントを用意しています。接続時に、su コマンドで、magellan ユーザーアカウントに切り替えます。

docker exec -it worker-devenv su magellan

cd コマンドで、/workspace ディレクトリに移動します。

cd /workspace

Worker のテンプレートを生成

Worker のテンプレート生成の様子 (↑クリックで拡大表示)

express コマンドを使って、hello-world という名前で、Worker(Express アプリケーション)のテンプレートを生成します。

express hello-world

テンプレートは、hello-world ディレクトリ以下に、次の構造で生成されます。

hello-world
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files

Worker の実装は、生成された次のファイルを編集します。

  • routes/index.js (編集)
  • views/index.jade (編集)
  • public/sytlesheets/style.css (編集)
  • public/images/magellan_robo.png (追加)

それでは、Worker の実装に移りましょう。

実装に入る前に、cd コマンドで hello-world ディレクトリに移動します。また、npm install コマンドで、Worker(Express アプリケーション)の実行に必要なパッケージのインストールを済ませておきます。

cd hello-world
npm install

Worker を実装

Worker の実装の様子 (↑クリックで拡大表示)

テキストエディタで、次のファイルを編集します。

  • routes/index.js
  • views/index.jade
  • public/sytlesheets/style.css

Worker 開発環境では、次のテキストエディタが使えます。

  • Vim
  • GNU Emacs
  • GNU nano
  • Atom

Atom テキストエディタは、GUI ツールのため DISPLAY 環境変数を適切に設定する必要があります。また、OS X や Windows の場合は、X11 サーバーが必要となります。

編集する各ファイルの内容は、次のとおりです。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Hello World!', hostname: process.env['HOSTNAME'] });
});

module.exports = router;
extends layout
block content
  div.content.clearfix
    div.balloon
      h1= title
      p My name is #{hostname}.
    p.robo: img(src="/images/magellan_robo.png", alt="MAGELLAN Robot", width="300", height="340")
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

.content {
  margin: 0 auto;
  width: 560px;
}

.balloon {
  float: left;
  display: inline;
  position: relative;
  width: 256px;
  height: 100%;
  text-align: center;
  line-height: 56px;
  border: 2px solid #9CF;
  border-radius: 12px;
  background: #FFF;
}

.balloon:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-left-color: #9CF;
  top: 70%;;
  right: 0;
  margin: 0 -32px -16px 0;
}

.balloon:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-left-color: #FFF;
  top: 70%;
  right: 3px;
  margin: 0 -32px -16px 0;
}

.robo {
  float: left;
  display: inline;
  margin: 0;
  width: 300px;
  height: 340px;
}

最後に、ロボットの画像をダウンロードして、public/images/magellan_robo.png に配置します。

curl -L https://raw.githubusercontent.com/magellan-devcenter/magellan-docker-node-helloworld/master/public/images/magellan_robo.png -o public/images/magellan_robo.png

以上で Worker の実装は完了です。次のステップに進む前に、簡単に動作を確認しておきましょう。

動作確認

動作確認の様子 (↑クリックで拡大表示)

npm start コマンドで、ウェブサーバーを起動します。

npm start

続いて、ウェブブラウザーで動作を確認します。http://localhost:3000/ にアクセスします。

OS X および Windows 環境の場合は、localhost の部分を Docker 仮想マシンの IP アドレスに読み替えてください。Docker 仮想マシンの IP アドレスは、docker-machine ip default コマンドで確認できます。default の部分は、確認したい Docker 仮想マシン名に置き換えてください。

OS X の場合は、ターミナルで、open http://$(docker-machine ip default):3000/ を実行するとすると良いでしょう。

ウェブブラウザーで Hello World の確認ができたら、ターミナルに戻って、Ctrl + C (コントロールキーを押しながら C キーを押す)で、npm start コマンドを終わらせます。

これで、Worker の実装が完了しました。「Docker イメージを作る」へ進みましょう。