主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2022/07/31
Mock サーバーを立てなくても Service Worker で働いてくれる API Mock ライブラリーである Mock Service Worker を、 ASP.NET Core + Vite な環境で使う方法についてのメモ。
といってもやり方は簡単で、わたしがとった方法は単純に mockServiceWorker.js
を wwwroot
に配置する方法です。
例えば、
といった感じで動作している場合、通常のフロントエンド開発を行う場合は 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 されます。
ということで、メモでした。