express+ejsでhello world.
先日のnpm xmasに引き続き、今度はexpressとejsを使ってhello worldです。文中でさらっとコールバック関数について書きますが、特に説明はしないので、その辺は適当に調べて下さい。。。
まずexpressとejsを導入します。expressはnode.jsを使ったアプリのプロジェクト・フレームワークを作ってくれるパッケージ。ejsはテンプレート・エンジン。
もう少し噛み砕くと、アプリに作成に必要な最低限のファイルを自動的に作ってくれるのがexpress。作成してくれたファイルを編集してwebページを作っていくのだけど、その時の書き方にいくつかの方法(テンプレート)があって、その中で多分よく使われてるのがejs。
ってことで、早速npmを使ってこの2つをインストールします。
npm install -g express ejs
"-g"をつけるとグローバルにインストールします。つまり、複数プロジェクトがあった時に、どのプロジェクトからでも使えるようにします。"-g"をつけない場合、基本的にはプロジェクトごとに同じパッケージを何度もインストールすることになります。
さて、じゃぁhello world作ってみましょう。まずexpressを使ってプロジェクトを作成します。
[ec2-user@ip-10-117-93-66 ~]$ express -t ejs helloworld
create : helloworld
create : helloworld/package.json
create : helloworld/app.js
create : helloworld/public
create : helloworld/routes
create : helloworld/routes/index.js
create : helloworld/views
create : helloworld/views/layout.ejs
create : helloworld/views/index.ejs
create : helloworld/public/javascripts
create : helloworld/public/images
create : helloworld/public/stylesheets
create : helloworld/public/stylesheets/style.css
dont forget to install dependencies:
$ cd helloworld && npm install
上記の赤色で示したファイルとディレクトリが作成されます。とりあえず押さえておくべきは、以下の3つのファイルです。
まずメインのファイルとなるのがapp.jsです。図中のピンクの部分がポイント。express.createServer()で、アプリケーションサーバが立ち上がります。appache http server立ててるのと同じ。簡単ですね。さて、module.exportsに代入してますが、これは何かというと。。。ちょっと複雑なので説明は次回に回します！とりあえずおまじないってことで^ ^
それでは、図中の(1)から順を追って全体の概要を説明します。
(1)まずユーザーは指定のアドレスに対してアクセスします。ここでは3000番をlistenするようにしたので、3000番をアクセスしてもらいます。
(2)アプリケーションサーバは、指定のアドレス以下をみて処理を振り分けます。実例みた方がわかりやすいと思うので、以下に示します。
http://xxxxx:3000/hoge
➡app.get('hoge', hoge.index);http://xxxxx:3000/fuga
➡app.get('fuga', fuga.index);
今回は"http://xxxxx:3000/"なのでルート('/')指定ですね。なのでapp.get('/', routes.index)が呼ばれます。さて、第二引数には、アクションが指定されます。まずroutesが何かというと、同じapp.jsファイルの上の方で指定されているように、'./routes'ディレクトリです。正確には、'./routes/index.js'ファイル。index.jsは省略されるようです。
(3)'./routes/index.js'ファイルをみると、indexというコールバック関数が定義されています。この'index'が、app.jsファイルのapp.get('/', routes.index)で指定されているindexです。app.getでは、ファイルと関数名を指定してコールバック関数を呼んでいることが分かりました。
(4)最後です。res.renderの第一引数は、'views'ディレクトリのファイル名を指定します。ここではindex.ejsというファイルが指定されていますね。このindex.ejsファイルがHTMLファイルとほぼ同義です。ここに、ユーザに対して表示したいページを記述します。便利なのは、res.renderの第二引数。ここで、アクセスに応じて変更したい値を指定します。例えば今回の例では<% =title %>に'Express'という文字列を代入しています。これを工夫すれば、ユーザに応じて異なる値を表示したりなんてことが簡単に出来ます^ ^
さて、概要わかったところで実行！・・・の前にやることがあります。
[ec2-user@ip-10-117-93-66 ~]$ cd helloworld
[ec2-user@ip-10-117-93-66 helloworld]$ npm ln
npm http GET https://registry.npmjs.org/express/2.5.2
npm http GET https://registry.npmjs.org/ejs
npm http 304 https://registry.npmjs.org/ejs
npm http 304 https://registry.npmjs.org/express/2.5.2
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/mkdirp/0.0.7
npm http GET https://registry.npmjs.org/connect
npm http 304 https://registry.npmjs.org/mime
npm http 304 https://registry.npmjs.org/mkdirp/0.0.7
npm http 304 https://registry.npmjs.org/connect
npm http 304 https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/formidable
npm http 304 https://registry.npmjs.org/formidable
ejs@0.6.1 ./node_modules/ejs
express@2.5.2 ./node_modules/express
├── mkdirp@0.0.7
├── qs@0.4.0
├── mime@1.2.4
└── connect@1.8.5
../.nvm/v0.6.6/lib/node_modules/application-name -> /home/ec2-user/helloworld
"npm ln"コマンドで、先ほどグローバル・インストールしたパッケージへのリンクをはります。これやらないと、expressやejsが無いと怒られます^ ^;
ってことで、実行〜☆
[ec2-user@ip-10-117-93-66 helloworld]$ node app.js
Express server listening on port 3000 in development mode
出来た！
