はじめに
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以下の全てのデバッグメッセージが出力される。
詳細は以下を参照。
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
まとめ
シンプルだし直感的に使えそう。
