ExpressをGetting startedしてみる

はじめに

Node.jsのWebフレームワークであるExpressを、本家サイトにあるGetting startedで学んでみる。

Express - Node.js web application framework

現時点で最新版のExpressのバージョンは4.12.3。3.x.x系とはAPIが異なるようなので注意。

環境は以下。

OS X 10.10.2
Node v0.12.0

インストール

express-generatorをインストールすると、expressコマンドが使用可能になる。このコマンドを使うと、Expressアプリの雛形が簡単に作れる。

以下でコマンドをグローバルにインストールする。

$ sudo npm install express-generator -g

以下でmyappというディレクトリが作られ、配下にアプリの雛形が生成される。

$ express myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/views
   create : myapp/views/index.jade
   create : myapp/views/layout.jade
   create : myapp/views/error.jade
   create : myapp/bin
   create : myapp/bin/www

   install dependencies:
     $ cd myapp && npm install

   run the app:
     $ DEBUG=myapp:* ./bin/www

出力の最後にある通り、作成されたフォルダに移動して依存関係にあるパッケージをインストールする。

$ cd myapp 
$ npm install

その後、以下を実行するとサーバが起動する。ブラウザからhttp://localhost:3000/へアクセスすると、起動が確認できる。

$ DEBUG=myapp:* ./bin/www

環境変数DEBUGにmyapp:*を設定しているのは、debugパッケージに対して表示するメッセージの設定をしているもよう。この場合、ワイルドカード指定によってmyapp以下の全てのデバッグメッセージが出力される。

詳細は以下を参照。

debug

Hello world

ExpressのGetting startedでは各セクションが短い内容で完結していて、前セクションの内容を引き継いで進めるチュートリアルになっていないので、ここでもそれに従って、ここまでの内容は一旦捨てて、ここから新しい内容を始める。

まずはお決まりのHello world、すなわち最小構成のアプリの作成をしてみる。

とりえあえず以下で準備。ここではexpressコマンドによる雛形作成は使わない。npm initで聞かれる質問には全てデフォルトで回答（Enter）しておく。

$ mkdir myapp2
$ cd myapp2
$ npm init
$ npm install express -save

次に以下のコードをapp.jsという名前で保存する。内容は本家のまま。

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

var server = app.listen(3000, function () {

  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);

});

以下を実行すると、http://localhost:3000/でサーバが起動する。

$ node app.js

ルーティング

Hello worldで作ったapp.jsを以下のように書き換える。

var express = require('express');
var app = express();

// respond with "Hello World!" on the homepage
app.get('/', function (req, res) {
  res.send('Hello World!');
});

// accept POST request on the homepage
app.post('/', function (req, res) {
  res.send('Got a POST request');
});

// accept PUT request at /user
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

// accept DELETE request at /user
app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');
});

var server = app.listen(3000, function () {

  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);

});

GET以外はブラウザでは確認できないので、curlなどを使う。

$ curl -X GET http://localhost:3000/
Hello World!
$ curl -X POST http://localhost:3000/
Got a POST request
$ curl -X PUT http://localhost:3000/user
Got a PUT request at /user
$ curl -X DELETE http://localhost:3000/user
Got a DELETE request at /user

静的ファイル

画像やCSS、JavaScriptなど、静的ファイルの配置には、express.staticを使う。

app.use(express.static('public'));

これでpublicディレクトリ以下のファイルへ相対パスでアクセスできるようになる。

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css

まとめ

シンプルだし直感的に使えそう。

light log

学んだこととか