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

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

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

こんな感じ。

f:id:kimromi:20200128220843p:plain

f:id:kimromi:20200128221010p:plain

その場合は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 して見てみるとタグとしては相対パスでファイル名が出力されていますが

f:id:kimromi:20200128222936p:plain

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

f:id:kimromi:20200128223341p:plain

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

f:id:kimromi:20200128224435p:plain

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

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