Viteで快適！MSWサーバーを個別に建てる

今回はMSWを単独のサーバーとしてViteで立ち上げたときのお話をします。

MSWは個別にサーバーを立てる必要がありませんが、場合によってはMSWのサーバーを立てないといけないシチュエーションもあります。

シチュエーションの1つがNext.jsでApp Routerを使っている場合です。
以前、App Routerを使ったNext.jsでMSWを使う方法を紹介しましたが、今回はその記事の続編です。

Next.js13でMSWを使うためにmswjs/http-middlewareで対応した話

みなさんはMSW使っていますか？ 弊社ではモックデータの扱いにMSWはなくてはならない存在となりました。 しかし、Next.js 13だとMSWがうまく動作しません（2023年10月25日現在）。 storybook、テストにもMSWを使っているのに、Next.jsで使えないのはまずい。 ...

ViteでMSWのサーバーを立てるメリット

前回はMSWをts-nodeで立ち上げる方法を紹介しましたが、 TypeScriptのimportやファイル変更時のサーバー再起動など考える材料が多くあります。

それがViteを使うことによりラクラクセットアップで快適な開発環境を作ることができます。
Viteを使うメリットは下記です。

• TypeScriptでファイル分割できる
• ファイルを変更してサーバーを再起動は自動的に行われる
• 静的ファイルの配信も簡単
• 構成などViteの作りにのせられる

サーバーを立てる手順

早速Viteを使ってMSWサーバーを立てる手順を紹介していきます。

必要なパッケージを追加

$ yarn add -D vite vite-plugin-node vite-tsconfig-paths @mswjs/http-middleware express cors

viteのインストールはもちろんですが、vite-plugin-nodeを使うことによりViteでnodeサーバーを立てることを可能にしています。 expressの中でMSWを動かすので関連パッケージも合わせてインストールしています。

Viteの設定

下記の内容でvite.config.tsを作成します。

import { defineConfig, loadEnv } from 'vite'
import { VitePluginNode } from 'vite-plugin-node'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    publicDir: 'src/mocks/public',
    server: {
      port: parseInt(env.MOCK_API_PORT as string, 10) || 3000,
    },
    plugins: [
      ...VitePluginNode({
        adapter: 'express',
        appPath: 'src/mocks/server.ts',
      }),
      tsconfigPaths(), // tsconfig.jsonのpathからaliasを反映できる
    ],
  }
})

プロジェクト内であればmsw関連のファイルの配置場所に制限はありませんが、弊社ではsrc/mocks配下に配置することが多いです。

• src/mocks/public：静的ファイル
• src/mocks/server.ts：viteのメインファイル

Viteのメインファイルを作成

次にViteのメインファイルを作成します。

import { createMiddleware } from '@mswjs/http-middleware'
import express from 'express'
import cors from 'cors'
import { handlers } from './handlers' // MSWのhandlers

const getApp = () => {
  const app = express()

  app.use(cors())
  app.use(express.json())
  app.use(createMiddleware(...handlers))

  return app
}

export const viteNodeApp = getApp()

expressではapp.listen()でサーバーを立てることができますが、MSWは開発環境でしか使わないので今回は使いません。

Viteを起動

必要なファイルは用意できたので最後にpackage.jsonにViteの起動コマンドを置きます。

"scripts": {
  "msw": "vite --host --mode development",
}

これでコマンドを実行すればViteを使ったMSWサーバーの立ち上げが完了です！

Nodeのサーバーを立てるならViteが快適

今回ViteでNodeのサーバーを初めて立ててみました。

vite + vite-plugin-nodeで快適な開発体験が得られました。
今回はMSWサーバーを立てるのに使いましたが、プロダクションとして利用する以外にもViteが優秀で改めてVite良いなって思いました。