Storybookから出力したHTMLファイルをサブディレクトリで公開するにはbaseタグを使う

Storybookは build-storybook コマンドを利用すると静的なHTML、JSファイルとして出力できるので、どこか静的ファイルを公開できるところにホスティングするとすぐに公開することができます。
(参考: https://storybook.js.org/docs/basics/exporting-storybook/)

ただ、 https://example.com/storybook/ のようなサブディレクトリにおいた場合にHTMLに入っているJSのリンクがファイル名のみになっていて、サブディレクトリを参照してくれないため404になってしまいます。

こんな感じ。

その場合はHTMLのbaseタグのhrefを使うと解決できます。 developer.mozilla.org

baseタグはaタグのhrefやimgタグのsrcなどのURLを指定する部分を相対パスで書いたときにベースになるURLを指定することができるタグです。(<img src="/hoge.png">のように絶対パスで書くと適用されません）

Storybookの設定ファイルを置くディレクトリ(通常は.storybook/)にmanager-head.htmlというファイルを置くと、Storybookを起動した際のheadタグにカスタムタグを追加することができます(参照)。これを利用しmanager-head.htmlに以下を記載します。

<base href="/storybook/">

こんなコマンドでどうぞ。

$ echo '<base href="/storybook/">' >> .storybook/manager-head.html

再度 build-storybook して見てみるとタグとしては相対パスでファイル名が出力されていますが

HTTPリクエストとしては /storybook/ をベースにしてリクエストされているためファイルが取得できページが見れるようになります。

JSでいう document.baseURL が今見ているURLではなくbaseタグで指定したURLになっています。

実はここにヒントがかいてありました。 Absolute versus relative paths https://storybook.js.org/docs/configurations/serving-static-files/#absolute-versus-relative-paths

baseタグ知らなかったのでStorybook以外でも何かに使えそうだなと思いました。