koa@2でWebアプリケーションを作る

  • 0
    いいね
  • 0
    コメント

    koajs概要

    Node.js用Webアプリケーションフレームワーク

    以下ぐぐってざっくり把握

    • Express開発陣によって開発されている、Expressの後継
    • よりminimalist,modularな設計
    • koaはgeneratorベースだったが、koa@2はasync/awaitベース

    ローカルで動かす

    Node.js導入

    $ nvm install 6.9.1
    $ node -v
    v6.9.1
    

    package.json

    作業ディレクトリを作ってpackage.jsonを生成

    $ mkdir APP_NAME
    $ cd APP_NAME
    $ npm init
    $ npm install --save koa@2
    $ npm install --save babel-cli babel-preset-es2015 babel-preset-stage-0 babel-polyfill
    

    scriptsとenginesを修正

    package.json
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "babel index.js -o app.js",
        "heroku-postbuild": "npm run build",
        "start": "node app.js"
      },
      "engines" : {
        "node" : "6.9.1"
      },
    

    Babelプリセット設定

    .babelrc
    {
        "presets": ["es2015", "stage-0"]
    }
    

    koaミドルウェア導入

    評価がまだ心細いが、適当に探して選んでみる。

    $ npm install --save koa-router@next
    $ npm install --save pug koa-pug
    

    ビュー実装

    $ mkdir views
    
    views/index.pug
    html
      body
        p Hello #{name}!
    

    アプリケーション実装

    index.js
    import 'babel-polyfill';
    import Koa from 'koa';
    
    const app = new Koa();
    
    const Pug = require('koa-pug');
    const pug = new Pug({
        app: app,
        viewPath: './views',
        basedir: './views'
    });
    
    const router = require('koa-router')();
    app.use(router.routes());
    
    router.get('/', async (ctx, next) => {
      ctx.render('index', {name: 'koa@2'});
    })
    
    app.listen(process.env.PORT || 5000);
    

    koa@2におけるミドルウェアの使い方は個別に調べる。

    • koa-router
      • 7.xではgetの引数がgeneratorからasync/awaitになっている(ただしこの例ではasyncつけてもつけなくても変わらない)
    • koa-pug

    ビルド

    $ npm run build
    

    app.jsが出力される

    動作確認

    $ npm start
    

    ローカルではlocalhost:5000で動作確認できる

    Herokuで動かす

    $ git init
    $ git add .babelrc index.js package.json views
    $ git commit -m'initial commit'
    
    $ heroku create
    $ git push https://git.heroku.com/......git master
    

    参考