フロントエンドエンジニアをやっています。
頑張るから読んでほしい。

はじめてのNode.js 2

Node.js

昨日の続きです。

express-generatorで吐き出されたapp.jsのコードを読んでみたのでまとめてみました。
（以下のソースは全て吐き出されたapp.js上のコードです。）

あと、せっかくなのでHerokuを使ってサーバー公開してみるところまでやってみたので手順をまとめました。

1. expressのapp.js

  • サーバー起動時に実行するファイル
  • 必要なURL（ルーティング）を決めていく
  • 使用するミドルウェアを設定していく



2. app.set

expressで使うテンプレートエンジンを設定する

var express = require('express');
var path = require('path');
var app = express();

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
  1. expressとnode.jsのpathモジュールを読み込む
  2. appを用意、ejsを置くディレクトリを決めて、 view engineとして指定する


  • app.set()
    • アプリケーションを必要とする各種の設定情報をセットするためのオブジェクトとメソッド
  • view engine
    • テンプレートエンジンの種類を示す。具体的には第二引数で’ejs’をテンプレートエンジンを使用しているということになる
  • path.join関数
    • 返り値として第1引数以降のパスを順番に結合したパスが得られる
  • __dirname



以下がexpressの公式ドキュメントです。app.setのことをもっと詳しく書いてくれてます。
http://expressjs.com/ja/4x/api.html



3. app.use

使うミドルウェアの設定、URLの設定（ルーティング）を行う。
next();が呼ばれる度に実行される。

必要なモジュールを読み込んだり、/や/usersのようにルーティングを記述。

var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');


 // morganを使ってlog出力を行う 
app.use(logger('dev')); 

// body-parserでユーザーのリクエストのbody情報を取得
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); 

// リクエストを受けてcookie情報を取得する
app.use(cookieParser());

// 静的ファイルの場所を指定する。ここでは public/ 以下のファイルが静的ファイルとして設定される
app.use(express.static(path.join(__dirname, 'public')));

// routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行する
app.use('/', routes);
// routes/users.js のルーティング内容を 'http://domain/users' をGETで受け取った時に実行する
app.use('/users', users);


  • morgan

    • logの出力。
      morgan() の引数に文字列を渡すか、format: を指定することで、ログのフォーマットを指定することができる。

  • body-parser

    • HTTPリクエストボディのデータを取得する

  • express.static

    • 静的ファイルの読み込み
      img、CSS ファイル、JavaScript ファイルなど



4. module

//routesというモジュール
var routes = require('./routes/index');

app.use('/', routes);

routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行 

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

. /routes/index.ejsをrenderして返す処理

5. Herokuを使う

herokuとは?

gitでコードを送られると、自動でサーバー公開までやってくれる便利なサービス。

Herokuに登録、Heroku Toolbelをインストール

Heroku

jp.heroku.com

Heroku Toolbel devcenter.heroku.com

Procfileを用意する

Procfileとは？

herokuがこのプロジェクトを起動するときに実行するコマンドを記載している。

Herokuにpush

  1. Herokuにログイン
    heroku login

  2. Herokuに新しいアプリケーションを作成
    heroku create XXX

  3. Herokuにpushする
    git push heroku master

  4. Herokuコマンドでサーバーを起動
    heroku ps:scale web=1

6. まとめ

  • express-generatorで吐き出されたapp.jsの中身を確認。
  • herokuのリモートリポジトリを使い公開