概要

• Nuxt.js + Express（APIとストレージも含む） だったのを Nuxt.js + micro (同じく、APIとストレージも含む) にしてみようかと思い、触ってみた。
• 単に Nuxt.js + micro でモダンなフロント環境を作りたいだけなら create-nuxt-app から、いろんな組み合わせのテンプレートプロジェクトを作成できるのでそちらをオススメする。
• ここでは以下の理由により、テンプレートとは少し異なる処理をする。
• micro-route よりも micro-router の方を使いたい。
• フロントだけじゃなくて、同じサーバーでAPIとストレージへのアクセスも処理したい。
• serve-handlerを触ってみたい。

何で micro?

• 単純に Express の置き換えだと Koa が最適のよう
• Nuxt.js 使うので、必要最低限だけ（足りなければそこだけ足していくのが）あればいいかなぁと思った。
• そして、ただの興味。

起動

• 別に分けた設定 micro.config.js から micro サーバー作成して起動。
• とてもシンプル。

index.js
const micro = require('micro')
const serviceConfig = require('./micro.config.js')

const server = micro(serviceConfig)

const host = process.env.HOST || 'localhost'
const port = process.env.PORT || '3000'

// Listen the server
server.listen(port, host)

設定

Nuxt

• 基本は Express と変わらない。
• nuxt.config.js から Nuxt のインスタンスを立ち上げ、nuxt.render()する

micro.config.js
const { Nuxt, Builder } = require('nuxt')

// Create nuxt instance with nuxt config
const config = require('../nuxt.config.js')
const nuxt = new Nuxt(config)

// Enable live build & reloading on dev
if (nuxt.options.dev) {
  new Builder(nuxt).build()
}

module.exports = async (req, res) => await nuxt.render(req, res)

ストレージへのアクセス

• serve-handlerを使用する
• 以下だけで、指定したディレクトリ以下にアクセスできるようになる。

micro.config.js
const handler = require('serve-handler')

module.exports = async (req, res) => await handler(req, res, {
  public: __dirname
})

ルーティング

• micro-routerを使用する。（単に触ってみたいから）
• 以下のように分ける
• / 以下はストレージへのアクセス
• /api/ 以下はAPIへのアクセス
• それ以外は上記以外は Nuxt.js へのアクセス

micro.config.js
const handler = require('serve-handler')
const { router, get } = require('microrouter')
const { Nuxt, Builder } = require('nuxt')
const api = require('./api/v1/')

// Create nuxt instance with nuxt config
const config = require('../nuxt.config.js')
const nuxt = new Nuxt(config)

// Enable live build & reloading on dev
if (nuxt.options.dev) {
  new Builder(nuxt).build()
}

module.exports = async (req, res) => {
  await router(
    api,
    get('(/*)', (req, res) => {
      return handler(req, res, {
        public: __dirname,
        directoryListing: false // ディレクトリ表示は無しにする
      })
    }),
    get('/*', () => nuxt.render(req, res))
  )(req, res)
}

おまけ

API

• micro-routerで API 内部のルーティングと処理を指定していく

api/v1/index.js
const { withNamespace, get } = require('microrouter')
const user = require('./user')

const api = withNamespace('/api/v1')

module.exports = api(
  get('/users', user.getList),
  get('/users/(:username)', user.getProfile)
)