💿

Remix に msw（node）をセットアップする手順

2024/05/05に公開

msw 公式のセットアップ手順を確認する

このサンプルコードの内容に従い msw のセットアップを行うための手順を確認する。
なお、本ポストでは Remix や msw について、それぞれの詳しい機能や使い方については言及しない。

Remix は /app ディレクトリ配下にあるファイルの変更を自動的に検知する。
そのため msw のモックサーバーを変更した際 Remix にその変更を伝えたい場合は /app ディレクトリ配下に handler 関数を定義する必要がある。

公式のセットアップ手順では以下のコマンドを実行し mocks ディレクトリを作成している。

mkdir ./app/mocks

msw はクライアントサイド・サーバーサイド、それぞれの環境毎でモックアップが動作するためにエントリーポイントの設定を行う必要がある。

Remix では、クライアントサイド・サーバーサイドのそれぞれで、アプリケーションの動作を細かく制御するためにエントリーモジュールを作成することが出来る。

このエントリーモジュールはクライアント向け（entry.client.tsx）をとサーバー向け（entry.server.tsx）に分かれている。
これらのエントリーモジュール上で msw のエントリーポイントを設定する。

エントリーモジュールはデフォルトでは作成されていないが npx remix reveal コマンドを実行することで作成することが出来る。

msw では API エンドポイントのモックとなる実装をハンドラーファイルに記述する。

公式のサンプルでは mocks/handler.ts ファイルがある。

このハンドラーを使い、クライアント向けのセットアップモジュール（browser.ts）とサーバー向けのセットアップモジュール（node.ts）をそれぞれ作成する。

セットアップモジュールは両方作成されている必要はなく、使いたい方だけ作成されていれば良い。

なお、クライアントサイドの場合 public ディレクトリに Service Worker のセットアップスクリプトを作成する手順が必要になるが、サーバーサイドでのみ msw を使用したい場合この手順は不要となる。

作成した msw のセットアップモジュールは、それぞれ対応する Remix エントリーモジュール上に設定する。

上記の手順に従ってセットアップが完了したら npx remix vite:dev（デフォルトでは npm run dev）コマンドを実行し Remix の開発用サーバーを立ち上げると、エントリーモジュールを通じて msw が実行される。