ExpressでWebサーバー

参考資料

1. 昨年度のレクチャ記録の、サーバーサイド編

2. ネット上の記事は多数。たとえば、
   • ゼロからはじめるExpress + Node.jsを使ったアプリ開発
   • node初心者がexpress-generatorで吐き出されたapp.jsを読んでみる
3. オフィシャルサイト（日本語版）
4. 日本語で読めるリファレンスとして、
   Express - node Webフレームワーク | 日本語ドキュメンテーション

前提

これまでの(特に、サーバ側に話を移してからの)作業が
済んでいる（Generatorでアプリケーション生成まで）こと。 （前回の資料集の後半部）

Webサーバの動作

• Webで扱うコンテンツには、静的コンテンツと、動的コンテンツがある。
• 静的コンテンツに対する要求では、サーバに置かれたファイルの中身をそのまま返す（HTML, CSS, JSなどのファイルや、様々な画像ファイル、がよく使われる）
• 動的コンテンツでは、プログラムが動作し、プログラムが出力した結果が（サーバの応答送信の段階では静的コンテンツと変わりない形で）送られる。
  • このとき、（昨今のフレームワーク技術では）
  1. プログラムがその実行結果としてデータを生成する
  2. そのページの出力の標準的な配置やスタイルを定めた「テンプレート」が予め準備してあり、
  3. 「テンプレートエンジン」がそのテンプレートにデータを埋め込むなどの作業（「レンダリング」と呼ぶ）をし、
  4. その結果がクライアントに返送される。

いくつかの解説

package.json について

• このファイルは JSONという形式で書かれている
• このアプリケーション（パッケージ）に関する様々な情報を書く場所だが、特に重要なのは、
• dependencies 欄。ここに、このアプリケーションが依存する （使用する）ライブラリ（の名前と、バージョンに関する要件）が列挙される。
• アプリケーション生成（generatorを使った場合）後にすぐ行う作業として npm install があるが、
  • このコマンドにより、npmのリポジトリから必要なファイルがダウンロードされ、
  • node_modules の下に置かれる。

app.js を眺めてみよう

1. require の動作（node.js全般）
   • ライブラリまたはファイルを（JavaScriptのプログラムとして）呼び出す。
     • 引数として名前だけ与えられた場合は、ライブラリ名と解釈され、node_modulesフォルダ等の下位フォルダから 実体となるソースファイルが探される。
       このとき、拡張子がついてなければ、’.js’ などの拡張子が補われる（パス名のときも同様）。
     • 引数としてパス名（ ‘./’ などを含む文字列として）が与えられた場合は、（相対パスならば、プログラムが実行されている 　 カレントフォルダを出発点として）当該ファイルを見つけ、実行する。
   • 呼び出された側のプログラムの中では、オブジェクトを module.exports に代入することにより、値を呼び出し側に返すことができる。
2. app.use, app.get などの意味：
   • middlewareの登録 　
   • get, put など（HTTPのメソッドに対応した名前）は use の特殊な形態
3. ‘view’ エンジンの登録と動作
   • 登録は app.set　メソッドで行っている。
     （エンジンの種類と、テンプレートの置き場所を指定している）

   • 例えば HTTPで ‘GET /’ というリクエストがあった場合、

     1. ’/’ に対応した router（ミドルウェア）が呼ばれる （そのソースは、/routes/index.js）
     2. そのrouterに（router.get で、パス名 ‘/’を指定して、）登録されたミドルウェア（functionキーワードを使って、無名関数として登録されている）が、呼び出される。
     3. その関数の中で、res.renderが呼ばれる。
        これが、テンプレートエンジンを呼び出してその結果を HTTP応答（responce）として送信する指示。
     4. ここでの res.renderの第一引数（テンプレート名）は、’index’。
        その実体は、/view/index.jade。
     5. index.jadeから、layout.jade も引用されていて、この２つのテンプレートファイルを合成したものに、
     6. res.renderの第２引数として渡された値が、挿入され、HTMLに変換されたものが、ページのデータとなり、 HTTP応答として送信される。
     7. それをブラウザが受け取って画面に表示する。

重要なmiddleware

1. express.static
   • 静的コンテンツ（前述）を扱う
   • 自動生成サーバでは、’public’フォルダに割り当てている
2. router
   • app.use の第一引数に「パス（PATH)」を渡して登録する。
   • このパスは、HTTPによる要求パス（GETコマンド等の第１引数として送られた資源名）にマッチした時だけ、 このミドルウェアが呼び出される、という規約。

プログラムの骨組み

• npm start で、bin/www を呼び出す。
  • と、packages.json に書いてある
• bin/www から app.js を呼んでいる （詳細は前述）

• bin/www で行っていることは、概ね以下のこと

    var app = require('../app')
    // 間接的に require('express')() している
    var http = require('http')
    var server = http.createServer(app)
    server.listen(3000)
  

  • 実際に node インタプリタで 一行ずつ実行してみるといい
• この骨組を出発点として、次回は、generatorを使わない expressアプリケーションを作ってみる。

実習

• 実際に上記の方法でサーバを起動し、ブラウザからアクセスしてみる。

• 前回述べたように、

    http://localhost:3000/
  

  へのアクセスにおいて HTTPのGETコマンドで、資源

    /
  

  に対する要求が送られる。

  • それを受けたサーバの動作は（これまで見てきた通り） routes/index.js にある routerミドルウェアを介しての応答生成となる。
  • もう１つ /userという要求にも応答することを確認せよ。
    • それに対応するソース（app.jsやroutes/users.jp）も眺めてみて下さい。
  • 他に　/stylesheets/style.css など、 publicフォルダの下に置かれたファイルに対しての GET 要求にこのサーバは応答することができる。
  • 逆に言えば、それ以外のリクエストには、 （そのためのプログラムが書かれおらず） 　　　　答えることができない
    （app.jsの後半に定義された エラーハンドラーが働いて、404などのエラーを返す）。
    • これも実際に試してみること。
• publicフォルダに適当なファイルを追加で配置してみて、 それがブラウザで表示できることも確認せよ。
• public/stylesheets/style.css や、 views/index.jade などのファイルを変更してみて 結果を確認する。たとえば
  • 文字の色(CSS)
  • 表示する文字列(テンプレート)
  • res.render(JS)　から渡す文字列

  など。
  これらを変更する際は、CSSやJSやJadeの文法に適っている必要がある。
  例：

    // route/index.js の中で
    res.render('index', { title: 'えくちゅぷれす' });
  

    // views/index.jade の中で
    p Welcome to #{title}
    p Welcome to #{title.repeat(10)}