Nuxt.js + micro + micro-router + serve を試してみた

imatomix
2018年10月21日 21:36
image

概要

  • 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 })
こんな風に。見た目もミニマル。

image

ルーティング

  • 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) )