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

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

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

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

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

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

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

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

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

サーバーを立てる手順

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

必要なパッケージを追加

Terminal window
$ 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を作成します。

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の起動コマンドを置きます。

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

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

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

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

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

Related Posts

Collaborative Innovation
for Your Growth

合同会社コードコネクトはフロントエンドを中心としたWeb開発を得意としています。
このようなシステム開発にご興味のある方、またはお困りの方はお気軽にお問い合わせください。

  • JamstackをベースとしたWebサイトの構築
  • Reactなどを用いたアプリケーションの開発
  • 運用に耐えられるメンテナンス性を考慮したプロダクト開発
  • モダンで運用可能な開発環境の構築