なつねこメモ

2022/07/31

Mock Service Worker を ASP.NET Core + Vite な環境でも使いたい

Mock サーバーを立てなくても Service Worker で働いてくれる API Mock ライブラリーである Mock Service Worker を、 ASP.NET Core + Vite な環境で使う方法についてのメモ。
といってもやり方は簡単で、わたしがとった方法は単純に mockServiceWorker.js を wwwroot に配置する方法です。

例えば、

• ASP.NET Core (API サーバー兼 HTML 生成) ... https://localhost:1234
• Vite (Static Assets サーバー) ... https://localhost:1235

といった感じで動作している場合、通常のフロントエンド開発を行う場合は Vite サーバーの方に mockServiceWorker.js を置くことになりますが、その場合、
Service Worker の Cross Origin 制限を受けてしまいます。

今回はそれを避けるために、 ASP.NET Core で配信される wwwroot に配置することによって、 Cross Origin 制限を避けています。
あとは、フロントエンドコードのエントリーポイントから、 Service Worker をスタートさせるだけです。

import React from "react";
import { createRoot } from "react-dom/client";
 
const run = () => {
  return new Promise((resolve) => {
    if (import.meta.env.DEV) {
      (async () => {
        const { worker } = await import("./mocks/browser");
        worker.start().then(resolve);
      })();
    }
  });
};
 
run().then(() => {
  const container = document.querySelector("#app");
  if (container) {
    const root = createRoot(container);
    root.render(<div />);
  }
});

あとは、 ./mocks/browser.ts に通常通りの msw のコードを記述すれば、 Vite でホストしている JS からのリクエストが Mock されます。
ということで、メモでした。