Expressのインストールと構成を把握する

Node.jsのフレームワーク、Expressを試してみました。
ExpressはNode.jsでwebアプリケーションを作成するためのフレームワークです。

インストール

まずは、Node.jsをインストールします。

以下のページからパッケージをダウンロードしてインストールします。
https://nodejs.org/en/

次にnpmを使ってexpress-generatorをインストールします。
express-generatorはExpressのスケルトンアプリケーションを作成するコマンドです。
npmはNode.jsをインストールした際にインストールされていると思います。

1
$ sudo npm install express-generator -g

スケルトンアプリケーションを作成する

expressコマンドでスケルトンアプリケーションを作成します。

1
2
3
$ express myapp
$ cd myapp
$ npm install

起動してみます。

1
2
3
4
5
6
7
8
9
⇒  DEBUG=myapp:* npm start

> myapp@0.0.0 start /Users/PMAC025S/Development/sample/nodejs/myapp
> node ./bin/www

  myapp:server Listening on port 3000 +0ms
GET / 200 659.865 ms - 170
GET /stylesheets/style.css 200 9.088 ms - 111
GET /favicon.ico 404 70.846 ms - 1285

http://localhost:3000 にアクセスしてみます。
Welcome to Express と表示されていれば正常に起動できています。

サーバーの停止はCtrl + Cです。

ルーティング

ルーティングの基本的な構造です。

1
app.METHOD(PATH, HANDLER)

app: expressのインスタンス
METHOD: HTTPメソッド(GET, POST, PUT, PATCH, DELETE等)
PATH: サーバーのパス
HANDLER: 実行する関数

Hello World!を返すルーティングのサンプルです。
/にGETリクエストを送ると、Hello World!が返却されます。

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

/にPOSTリクエストを送ると、Got a POST requestが返却されます。

1
2
3
app.post('/', function (req, res) {
  res.send('Got a POST request');
});

Expressの構造

express-generator で作成されたファイルを確認していきます。
ファイル構成は以下です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
⇒  tree -L 2
.
├── app.js
├── bin
│   └── www
├── node_modules
│   ├── body-parser
│   ├── cookie-parser
│   ├── debug
│   ├── express
│   ├── jade
│   ├── morgan
│   └── serve-favicon
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

app.js

app.jsではアプリの設定やルーティングを定義します。
簡単なアプリであれば、ここに全て書いてしまってもよいでしょう。
express-generatorで作成されたファイル構成では、routes/、views/ ディレクトリが作成されており、ルーティングやテンプレートは分離する構成となっています。

bin

実行ファイルが格納されます。

node_modules

Expressなどのモジュールが入っているディレクトリです。npmでインストールしたファイルが格納されます。

package.json

アプリの設定やメタ情報を定義するファイルです。

public

公開ディレクトリです、cssファイル、imageファイル、JavaScriptファイルを格納します。

routes

アプリケーションのルーティングと処理を定義したファイルを格納します。

viewsディレクトリ

テンプレートを定義したファイルを格納します。

Expressの構成は把握できました。
次はExpressを使ってチャットアプリケーションを作ってみたいと思います(次回へ続く)。

参考リンク

最近の投稿