MSWを使ってStorybookにダミーデータを表示しようとしてS3ホスティングでハマった話

はじめに

ホワイトヘルスケア エンジニアの林です。

今回はReact開発で便利なモックサーバーツール「MSW（Mock Service Worker）」を使っていて、StorybookをS3でホスティングしたときに発生した問題とその対処法について共有します。

---

🧪 背景：開発中はMSWでモックデータを表示

普段のReact開発では、以下のような構成で進めていました。

• React + Vite でフロントエンドを構築
• APIのモックには MSW
• コンポーネントのドキュメントには Storybook
• Storybookでも実データではなく MSWでモックデータ表示

ローカルでは、storybook とMSWを組み合わせて、MSWで返すダミーデータを表示するようにしていました。具体的には、以下のように preview.js で MSW を有効化していました。

// .storybook/preview.js

import { initialize, mswLoader } from "msw-storybook-addon";

initialize(
  // ...
  // 中略
  // ...
  // mockServiceWorker.jsは/public以下に配置
  serviceWorker: {
    url: "/mockServiceWorker.js",
  },
});

const preview: Preview = {
  parameters: {
    // 一部略
    msw: {
      handlers,
    },
  },
  loaders: [mswLoader],
};

また、handlersは以下のような定義になっていました。

// src/mocks/handlers.ts

export const hadlers = [
  http.get("モックするURL",
    () => {
      return HttpResponse.json({
       xxx: [
          {
            id: 1,
            name: "name1",
          },
          {
            id: 2,
            name: "name2",
          },
        ],
      });
    },
  ),
];

---

🌐 問題：S3にStorybookをホスティングしたら動かない

社内では、コード管理をGitHubで行なっており、機能変更、取り込みはプルリクエストを用いて行なっています。また、frontendの変更を伴うプルリクエスト時には、StoryBookをAWS S3にホスティングし、UIの変更をブラウザ上から確認できるような設定にしていました。

しかし、以下のようなエラーが発生しMSWが動かない状況になりました。

[MSW] Failed to register a ServiceWorker for scope ('https://s3-region.amazonaws.com/bucket-name/...') with script ('https://s3-region.amazonaws.com/bucket-name/mockServiceWorker.js'): ServiceWorker script does not support cross-origin requests.

---

🧩 原因：Service Workerのパスがローカルとホスティングで異なっていた

エラーログとしてはCORSでしたが、実際は参照するmockServiceWorker.jsの配置が想定と異なっていることが原因でした。

mockServiceWorker.jsが存在しているはずのURLにブラウザから直接アクセスしたところ、ファイルがなかったことから判明しました。

---

✅ 対処法：ローカル開発とホスティング時のパスの統一

今回は、StorybookのS3ホスティング時の問題だったので、mockServiceWorker.jsの配置を以下のように実際のパスを参照するように変更しました。

// preview.js

// mockServiceWorker.jsのパスをローカル、ホスティングに関わらず参照できるようにする
const getWorkerPath = () => {
  const pathname = window.location.pathname;
  const base = pathname.replace(/\/[^/]*$/, "/"); // 最後のファイル名を除く
  return `${base}mockServiceWorker.js`;
};

initialize(
  // ...
  // 中略
  // ...
  // mockServiceWorker.jsは/public以下に配置
  serviceWorker: {
    url: getWorkerPath(),  // 変更
  },
});

---

📝 まとめ

• MSWはローカル開発では非常に便利
• Storybookでも簡単にダミーデータを表示できる
• S3やCloudFrontにホスティングしたときのService Worker制約には注意

---

採用情報

ホワイトヘルスケアでは、100年先でも国民が質の高い医療を適正負担で受けられる社会の実現を目指しています。 少しでも気になった方は、ぜひお気軽にお問い合わせください！

採用情報詳細

hrmos.co