Nuxt 3 Release Candidate がリリースされました! v3.nuxtjs.org で詳細について見れます。

翻訳されたページ このページのコンテンツは古い可能性があります。

serverMiddleware プロパティ

サーバーサイドミドルウェアを定義します。


  • 型: Array
    • 要素: String または Object または Function

Nuxt はカスタムミドルウェアを追加できる connect インスタンスを内部で作ります。これにより外部サーバーを必要とせずに通常は /api ルート)を登録できます。

connect 自体はミドルウェアなので、登録されたミドルウェアは nuxt startexpress-template のようなプログラムで使われるミドルウェアとして使う場合の両方で動作します。Nuxt モジュール もまた this.addServerMiddleware() を使って serverMiddleware を提供できます。

それらに加え、デフォルト値が trueprefix オプションを導入しました。サーバーミドルウェアに router base を追加します。

例:

  • サーバーミドルウェアパス: /server-middleware
  • Router base: /admin
  • prefix: true の場合(デフォルト): /admin/server-middleware
  • prefix: false の場合: /server-middleware

サーバーミドルウェア vs ミドルウェア!

クライアントサイドやサーバーサイドレンダリングで Vue によって各ルートの前に呼び出されるルートのミドルウェア と混同しないでください。 serverMiddleware プロパティに列挙されているミドルウェアは vue-server-rendererにサーバーサイドで実行され、API リクエストの処理やアセットの提供などのサーバー固有のタスクに使用できます。

サーバーミドルウェアを middleware/ ディレクトリに追加しないでください。ミドルウェアは webpack によって本番バンドルにバンドルされ beforeRouteEnter で実行されます。serverMiddleware を middleware/ ディレクトリに追加すると、Nuxt によってミドルウェアとして誤って選択され、誤った依存関係がバンドルに追加されたり、エラーが発生したりします。

使い方

もしミドルウェアが文字列の場合、 Nuxt はそのミドルウェアを自動的に解決し要求します。

nuxt.config.js
import serveStatic from 'serve-static'

export default {
  serverMiddleware: [
    // redirect-ssl npm パッケージを登録します
    'redirect-ssl',

    // /server-middleware/* を処理するために、プロジェクトの server-middleware ディレクトリからファイルを登録します
    { path: '/server-middleware', handler: '~/server-middleware/index.js' },

    // カスタムインスタンスを作成することもできます
    { path: '/static2', handler: serveStatic(__dirname + '/static2') }
  ]
}
もしミドルウェアをすべてのルートに登録したくない場合は、特定のパスでオブジェクトフォームを使用する必要があります。 そうしないと nuxt のデフォルトハンドラは機能しません。

カスタムサーバーミドルウェア

カスタムミドルウェアの作成も可能です。詳細については Connect Docs を参照してください。

ミドルウェア(server-middleware/logger.js):

server-middleware/logger.js
export default function (req, res, next) {
  // req は Node.js の HTTP リクエストオブジェクトです
  console.log(req.url)

  // res は Node.js の HTTP レスポンスオブジェクトです

  // next は 次のミドルウェアを呼び出すための関数です。
  // ミドルウェアがエンドポイントでない場合、関数の最後で next を呼び出すのを忘れないでください!
  next()
}
nuxt.config.js
serverMiddleware: ['~/server-middleware/logger']

カスタム API エンドポイント

サーバーミドルウェアも Express を拡張できます。これにより REST エンドポイントを作成できます。

server-middleware/rest.js
const bodyParser = require('body-parser')
const app = require('express')()

app.use(bodyParser.json())
app.all('/getJSON', (req, res) => {
  res.json({ data: 'data' })
})

module.exports = app
nuxt.config.js
serverMiddleware: [
  { path: "/server-middleware", handler: "~/server-middleware/rest.js" },
],

オブジェクトの構文

パスにマッピングされた関数のリストでサーバーミドルウェアが構成されている場合:

export default {
  serverMiddleware: [
    { path: '/a', handler: '~/server-middleware/a.js' },
    { path: '/b', handler: '~/server-middleware/b.js' },
    { path: '/c', handler: '~/server-middleware/c.js' }
  ]
}

あるいは、次のとおりオブジェクトを渡して定義することもできます:

export default {
  serverMiddleware: {
    '/a': '~/server-middleware/a.js',
    '/b': '~/server-middleware/b.js',
    '/c': '~/server-middleware/c.js'
  }
}