Nuxt.jsのServer Side RenderingモードでFastifyをserverMiddlewareとして使う話 #Vue.js

おはこんにちばんは。
ハイパーエンジニアの@FL1NEです。

何

Nuxt.jsのServerSideRenderingモード(以下SSRモード)で開発する際に
Nuxt.js + Expressという組み合わせはよく見かけますが、Expressよりも高速だと言われているFastifyを組み合わせた例があまりなかったので組み合わせて使う方法をメモっておきます。

リポジトリ

なんでserverMiddleware?

別で立てるのだったら別で立ててやればいいと思いますけど、Nuxt.jsのserverMiddlewareとして立てることによって以下の利点が生まれます。

Nuxt.jsとセットで開発できるので管理が楽
Nuxt.jsとは別のポートをLISTENしなくていい。 (LISTENすることもできる)
ワンパッケージになるのでデプロイが楽
↑それらによってCORS関連の問題も基本起きない (はず)

ちなみにURLのパスでserverMiddlewareへのアクセスを判別する形をとります。
今回は example.com/backend/のように/backend/*へのアクセスをFastifyで受けるようにします。

下準備

yarn create nuxt-appでnuxtアプリを作る

普通に作るだけ (必要なものだけ記載してます)

$ yarn create nuxt-app nuxt-fastify-example
  ? Programming language: TypeScript
  ? Rendering mode: Universal (SSR / SSG)
  ? Deployment target: Server (Node.js hosting)

とりあえず、yarn devで動作確認して動くことは確認しておきましょう

FastifyとNuxt.jsを繋ぐ

Fastifyのインストール

普通にFastifyをインストールします。

$ yarn add fastify

serverMiddlewareの作成

プロジェクトのルートディレクトリに server/ディレクトリを作成し、index.tsを作成します

import fastify from 'fastify'

export default function (req: Request, res: Response) {
  const app = fastify({
    ignoreTrailingSlash: true,
    logger: false,
  })

  // 普通にサーバーを立てる場合はこんな感じ
  // app.ready()が呼ばれる前にこの辺の処理を定義しないといけない
  app.get('/', (_request, reply) => {
    reply.send({
      server: true,
      endpoint: '/backend',
    })
  })

  app.ready().then(() => {
    app.server.emit('request', req, res)
  })
}

Fastify関連のコードは基本このファイルが中心となります。

fastify.serverがNodeコアのserverオブジェクトを渡してくれるので、そこでつないであげる感じです。

serverMiddlewareの登録

先ほど作成したserverMiddlewareをnuxt.config.jsに登録します。

export default {
~~ 省略 ~~ 
  serverMiddleware: [{ path: '/backend', handler: '~/server/' }],
}

path: の指定を変更することでアクセスを受けるURLを任意の形に変更できます。
handler: には先ほどのserverMiddlewareを指定すればOKです。

動作確認

再び yarn dev を実行して動作を確認します。

$ yarn dev

http://localhost:3000/に接続するといつも通りのNuxt.jsのチュートリアルが表示されます。

次に先ほど作成したserverMiddlewareのfastifyに接続してみましょう。
http://localhost:3000/backend/

無事にfastifyのレスポンスを取得できました。

終わりに

以上の手順でNuxt.jsとFastifyを組み合わせることができました。
これにより自前のバックエンドサーバーを一つのNode.jsサーバーで統括して管理・デプロイが行えるようになります。
今後タイミングを見てここにAPIサーバーを建てる記事なども追加できたらと思っています。

ではまたいつか！

宣伝等

GUNCY'S (グンシーズ)
株式会社GUNCY'Sでは社内や顧客の要望などを一緒に解決へ導くメンバーを広く募集しています。
興味がある方は是非採用ページをご覧ください！

FRONTL1NE (フロントライン)
FRONTL1NEは日本のデモシーンなどをはじめとしたクリエイティブな活動や、ゲーム、プログラミング、音楽、映像など様々な分野に興味を持つな人が集うWebサイト・コミュニティです。
是非WebサイトやDiscordを覗いてみてください!

Tokyo Demo Fest (東京デモフェスト)
Tokyo Demo Festは日本唯一のデモシーン(メガデモ)イベント = デモパーティです。
デモパーティは、コンピュータを用いたプログラミングとアートに興味のある人々が日本中、世界中から一堂に会し、デモ作品のコンペティション(コンポ)やセミナーなどを行います。また、イベント開催中は集まった様々な人たちとの交流が深められます。
最新の情報はTwitterやWebサイトをご確認ください！