2018-10-21 21:36
micro nuxt serve

Nuxt.js + micro + micro-router + serve

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を使用する。(単に触ってみたいから)
  • 以下のように分ける
    • /public/ 以下はストレージへのアクセス
    • /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('/public(/*)', (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) )

感想

  • 日本語資料はほぼ皆無なので、トライ&エラーで1日かかったw。
  • micro は本当に micro だった。