読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

Node.jsでWebサービスを作ろう! - Express入門編

f:id:mochizuki_p:20161005031521j:plain

ExpressはRubyで人気のあるWebアプリケーションフレームワーク・Sinatraに似た構造をもったNode.jsで一番人気のあるWebアプリケーションフレームワークです。

非常で柔軟で高性能なアプリケーションを簡単に作成することが可能です。npmの様々なパッケージを組み合わせることで簡単に様々な機能を追加することが可能です。

以下はNode.jsとnpmがインストールされている前提で進めます

Expressのプロジェクトを開始する

まずはExpressをグローバルにインストールします。

sudo npm install express -g

最初にexpress-generatorをインストールする

sudo npm install express-generator -g 

コマンドラインでexpressを入力するとひな形を作成できます。

以下のオプションを指定することができます。

オプション 説明 デフォルト 例の説明
--view テンプレートエンジンを指定する jade --view=ejs ejsに変更
--css スタイルシートの種類を指定する css --css=less lessに変更
--ejs ejsを有効化する

おすすめはテンプレートエンジンをjadeからejsに変更することです。jadeは直感的でないので。そして作成するアプリの名前を最後に指定します。ここではtestにしましょう。

express --ejs --view=ejs test

すると以下のようにディレクトリにアプリが展開されます。

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

   install dependencies:
     $ cd test && npm install

   run the app:
     $ DEBUG=test:* npm start

アプリのホームディレクトリに移動して、 最初にアプリを起動するのに必要なプラグインをインストールします。

cd test
sudo npm install

するとインストールされたプラグインの一覧が・・

├─┬ body-parser@1.13.3 

│ ├── bytes@2.1.0 

│ ├── content-type@1.0.2 

│ ├── depd@1.0.1 

│ ├─┬ http-errors@1.3.1 

│ │ ├── inherits@2.0.3 

│ │ └── statuses@1.3.1 

│ ├── iconv-lite@0.4.11 

│ ├─┬ on-finished@2.3.0 

│ │ └── ee-first@1.1.1 

│ ├── qs@4.0.0 

│ ├─┬ raw-body@2.1.7 

│ │ ├── bytes@2.4.0 

│ │ ├── iconv-lite@0.4.13 

│ │ └── unpipe@1.0.0 

│ └─┬ type-is@1.6.14 

│   ├── media-typer@0.3.0 

│   └─┬ mime-types@2.1.13 

│     └── mime-db@1.25.0 

├─┬ cookie-parser@1.3.5 

│ ├── cookie@0.1.3 

│ └── cookie-signature@1.0.6 

├─┬ debug@2.2.0 

│ └── ms@0.7.1 

├── ejs@2.3.4 

├─┬ express@4.13.4 

│ ├─┬ accepts@1.2.13 

│ │ └── negotiator@0.5.3 

│ ├── array-flatten@1.1.1 

│ ├── content-disposition@0.5.1 

│ ├── cookie@0.1.5 

│ ├── depd@1.1.0 

│ ├── escape-html@1.0.3 

│ ├── etag@1.7.0 

│ ├── finalhandler@0.4.1 

│ ├── fresh@0.3.0 

│ ├── merge-descriptors@1.0.1 

│ ├── methods@1.1.2 

│ ├── parseurl@1.3.1 

│ ├── path-to-regexp@0.1.7 

│ ├─┬ proxy-addr@1.0.10 

│ │ ├── forwarded@0.1.0 

│ │ └── ipaddr.js@1.0.5 

│ ├── range-parser@1.0.3 

│ ├─┬ send@0.13.1 

│ │ ├── depd@1.1.0 

│ │ ├── destroy@1.0.4 

│ │ ├── mime@1.3.4 

│ │ └── statuses@1.2.1 

│ ├─┬ serve-static@1.10.3 

│ │ └─┬ send@0.13.2 

│ │   ├── depd@1.1.0 

│ │   └── statuses@1.2.1 

│ ├── utils-merge@1.0.0 

│ └── vary@1.0.1 

├─┬ morgan@1.6.1 

│ ├── basic-auth@1.0.4 

│ └── on-headers@1.0.1 

└─┬ serve-favicon@2.3.2 

  └── ms@0.7.2 

まずはExpressアプリを起動できるかを試してみましょう。

アプリをローカルで起動するにはnpm startを入力します。

sudo npm start

そして、safariやChromeなどのブラウザを立ち上げて、localhost:3000にアクセスしてみてください。

f:id:mochizuki_p:20161120172904p:plain

すると、

f:id:mochizuki_p:20161120172913p:plain

正常にアクセスできました。

とりあえずExpressアプリを動作させることができました。次のページではExpressのアプリのディレクトリ構成について見てみましょう。