概要
Nuxt.jsはcreate-nuxt-appを使うことで簡単にSSRのプロジェクトを作ることができますが、イマイチ中がどのように動いているか知らなかったので、
#開発モード
$ npm run dev
#productionモード
$ npm run build
$ npm run start
開発モードやproductionモードで実行した時に自動生成されたindex.js内で何が起きているのかを少し調べてみました。
環境
- Nuxt.js 2.8.1
- express, ssrモードでプロジェクトを作成
- Node.js 10.15.3
- npm 6.9.0
require
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
ログモジュールであるconsolaをrequireしている。
また、nuxtモジュールから NuxtクラスとBuilderクラスをrequireしている。
また、express インスタンスを作成している。
Nuxt クラス
Nuxt.jsを利用する上でのコアクラス。公式では、「すべてのモジュールとクラスが通信できるようにするためのコアのコンテナ」と説明されている。ソースコードを見ると、Nuxt.jsを動作させるためのサーバやモジュールの準備をしているようです。
Builder クラス
ソースコードをビルドするためのクラス。
productionでは、ビルドコマンドが別途用意されているため、開発モードでのみ使用されるようです。
config
Nuxt.jsのconfigファイルを読み込み、またNODE_ENVを確認して開発モードかどうか決定している。
start メソッド内
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()
非同期のstartメソッドを用意し、それを実行している。
Nuxt.jsの初期化
const nuxt = new Nuxt(config)
設定ファイルを引数にして、Nuxtクラスのインスタンスを生成する。
この時、内部では以下の処理が実行されている。
-
nuxt.js#20
- 引数に設定されたconfigの解決を行います。この処理で、ユーザが指定していないconfigはすべてdefault値が設定されるようです。
-
nuxt.js#L23-L24
- コアコンポーネントであるResolverクラスとModuleContainerクラスをインスタンス化します。
- ResolverクラスはAliasなどのパス解決を行ってくれます。設定ファイルでいうと、下記の辺りです。
- ModuleContainerクラスはすべてのモジュールを持つコンテナです。呼び出しはすべてこのコンテキスト上で行います。
-
nuxt.js#37-L47
- Nuxt.js内にあるserver機能の初期化を行い、ready状態にします。
開発モードとproductionモード
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
} else {
await nuxt.ready()
}
開発モードの場合、Builderクラスをインスタンス化し、buildメソッドを実行します。
productionモードの場合、すでにbuild済みのはずなので、readyメソッドを実行します。
Nuxt.jsをexpressのミドルウェアとして与える
// Give nuxt middleware to express
app.use(nuxt.render)
nuxt.renderでミドルウェアに与えられているのは、server.js#L34で生成されたconnectのappです。ミドルウェアを追加したりもしています。
サーバ起動
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
最後に、ポートとホストを設定してサーバを起動します。