mswでサブディレクトリ配下でもMockを動かす

Last updated at 2025-10-12Posted at 2025-10-12

はじめに

自宅の趣味システムが3つに増えたので、ポートの割り当てを考えるのが手間になってきたので、サブディレクトリを切ることにしました。

http://XXX.XXX.XXX.XXX/hc
http://XXX.XXX.XXX.XXX/hms
http://XXX.XXX.XXX.XXX/hb

とか。

Next.jsで作っていたチャットも「/」から「/hc」に変えてみました。
簡単に変えられるかと思ったら、本当に色々大変だったので、残します。

動かし方が３パターンあったので、分割して残していこうかと。

前提

自宅のチャットアプリは、Next.jsのサーバサイド機能を利用していないので、Dockerの場合、静的コンテンツとしてエクスポートしてnginx上で動かしている。

ので、大きく3種類の動かし方がある。

１）node.js + mswのモック OR API（Docker Or IDE）
２）serve（ローカルでDocker相当の動きの確認用）

３）nginx（Dockerで自宅運用）

実際は、３）nginx（Docker）だけ対応してもよかったのですが、よく考えず全部対応していました。

node.js + mswのモック OR API（Docker Or IDE）

１）next.config.ts に「basePath」を追加

const nextConfig: NextConfig = {
  basePath: "/hc",
  env: {
    BACK_APP_ENV: backAppEnv,
    ...selectedConfig,
  },

２）mockServiceWorker.jsのパスを変更

デフォルトだと、MSWのモックは「/mockServiceWorker.js」を読み込み、ブラウザの「ServiceWorker」機能を利用してモック化している。

今回、basePathに「/hc」としたので、パスも「/hc/mockServiceWorker.js」に変更する必要がある。

指定方法は、「worker.start」時に指定可能とのこと。

        await worker.start({
          serviceWorker: {
            url: "/hc/mockServiceWorker.js"
          },
        });

これだけだと、エラーなってしまう。色々調べていると以下のサイトに辿り着く。

どうやら、スコープが「/hc」に狭まっているから、スコープを「/」（ルート）に拡張する必要があるらしい。

まず、optionsでscopeを指定する。

        await worker.start({
          serviceWorker: {
            url: "/hc/mockServiceWorker.js",
            options: {
              scope: "/",
            },
          },
        });

さらに、headers で「Service-Worker-Allowed」を指定する。

const nextConfig: NextConfig = {
  basePath: "/hc",
  env: {
    BACK_APP_ENV: backAppEnv,
    ...selectedConfig,
  },
  ～ 中略 ～
  async headers() {
    return [
      {
        // Service Workerのパス
        source: "/(.*)",
        headers: [
          {
            key: "Service-Worker-Allowed",
            value: "/",
          },
        ],
      },
    ];
  },

理由はまだ勉強不足でわかっていないけど、イケた！

振り返り

後日談として、serviceWorkerのスコープについて読んでみたところ、

サービスワーカーの最大スコープはワーカーの位置です（言い換えれば、スクリプト sw.js が /js/sw.js にある場合、既定では /js/ 以下の URL しか制御できません）。サービスワーカーの最大スコープのリストは Service-Worker-Allowed ヘッダーで指定することができます。

とのこと。上記より、デフォルトだと「/hc/」配下までしかワーカーが動かないけど、「Service-Worker-Allowed」で指定すると範囲を拡大できるとのこと。

そうすると、「options」で指定している「scope」って何だろう。と疑問に思ったので、Geminiに聞いてみると、

「options」の「scope」は、要求（この範囲を使いたい）
「Service-Worker-Allowed」は、許可（実際に使える範囲）

Geminiの回答なので、合っているかどうかはさておき、なんとなく腑に落ちた。

さらなる疑問として「/hc」にしたので、サービスワーカーの範囲も「/hc」で良いはず。
ワーカーのJSは、「/hc/mockServiceWorker.js」なので、デフォルトのスコープも「/hc」なので特に問題ないはず。

ですが、「scope」と「Service-Worker-Allowed」に「/」を指定しないと動かず。

この疑問は解消されずのまま。

ソース

次回は、以下２つを「/hc」対応した時の内容を残します。

２）serve（ローカルでDocker相当の動きの確認用）