Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

参考

satzz
Web Engineer 2009-2011 Hatena(part-time) 2011-2015 DeNA
http://satzz.me
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away