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以外でも何かに使えそうだなと思いました。