ExpressのミドルでNuxt.jsを利用

Nuxt.jsをExpressのミドルに組み込んで動作させることができます。ここでは、Create Nuxt Appで生成したプロジェクト( サーバーサイドのフレームワークにExpressを選択 )をもとに動作確認します。

create-nuxt-appでプロジェクト生成
( yarn create nuxt-app )

create-nuxt-app でプロジェクトを生成します。

$ yarn create nuxt-app sample-express
(省略)
success Installed "create-nuxt-app@2.6.0" with binaries:
      - create-nuxt-app
> Generating Nuxt.js project in /xxx/sample-express
? Project name sample-express
? Project description My tremendous Nuxt.js project
? Use a custom server framework express
? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name wakuwaku
? Choose a package manager yarn

  To get started:

	cd sample-express
	yarn run dev

  To build & start for production:

	cd sample-express
	yarn run build
	yarn start

✨  Done in 71.05s.

Use a custom server frameworkexpress を選択しています。

フォルダ構成

.
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── server/
│   └── index.js
├── static/
├── store/
├── README.md
├── nuxt.config.js
├── package.json
└── yarn.lock

server/index.js がアプリケーションのエントリポイントとなります。

ビルド
( yarn run build )

$ yarn run build

.nuxt 配下に生成されました。
nuxt.config.js で設定可能な buildDirのデフォルト値が .nuxt であるためです。

.nuxt/
├── components/
├── dist/
│   ├── client/
│   └── server/
├── views
│   ├── app.template.html
│   └── error.html
├── App.js
├── client.js
├── empty.js
├── index.js
├── loading.html
├── middleware.js
├── router.js
├── server.js
└── utils.js

サーバー起動
( yarn start )

$ yarn start
yarn run v1.13.0
$ cross-env NODE_ENV=production node server/index.js

 READY  Server listening on http://localhost:3000

起動後、ブラウザで http://localhost:3000 にアクセスすると、Nuxt.jsのSSRにより生成されたページを確認できます。

yarn start を実行すると node server/index.js が実行されています。

server/index.js の内容は以下のようになっていました。

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

app.use(nuxt.render) の処理で、Expressのミドルウェアとして処理を組み込んでいます。
これにより、先ほど yarn run build で生成した .nuxt 配下の処理が実行されます。

参考