Storybookをnngn.devで見られるようにした

このサイトのStorybookは、これまでローカルでだけ見ていた。

bun run storybook

それでも開発中は十分だが、外から確認したいときには少し面倒だった。なので、Astroの本体ビルドと同じdistにStorybookも入れて、https://nngn.dev/storybook/で見られるようにした。

やったことは小さい。bun run buildの最後でStorybookの静的ビルドも走らせる。

{
  "build": "ASTRO_TELEMETRY_DISABLED=1 astro check && ASTRO_TELEMETRY_DISABLED=1 astro build && pagefind --site dist --force-language ja && bun run build-storybook",
  "build-storybook": "CI=1 STORYBOOK_DISABLE_TELEMETRY=1 storybook build --output-dir dist/storybook && rm -f dist/storybook/_headers"
}

Cloudflare Pagesはdistをそのまま配信しているので、dist/storybook/index.htmlができれば、そのまま/storybook/になる。別のPages projectを作るほどでもないし、このサイトのコンポーネント確認用なので同じドメインに置くほうが扱いやすい。

ひとつだけ引っかかったのはHTTP headerだった。

このサイトでは全体にX-Frame-Options: DENYを付けている。StorybookはCanvasの中でpreviewをiframe表示するので、これが残っているとStorybook本体は開いても、肝心のコンポーネント表示が止まる。

そこで/storybook/*だけは同一オリジンのiframeを許可する。

/storybook/*
  ! X-Frame-Options
  X-Frame-Options: SAMEORIGIN
  X-Robots-Tag: noindex

X-Robots-Tag: noindexも付けた。Storybookは公開されていてもよいが、検索結果に出したいページではない。

ビルド後は、Cloudflare Pagesのローカルプレビューで確認した。

bun run build
bunx wrangler pages dev dist --port 8788

/storybook/と/storybook/iframeがどちらも200で返り、headerもStorybook配下だけSAMEORIGINになっていることを見た。最後にChrome headlessで/storybook/?path=/story/blog-blogcard--defaultを開いて、BlogCardのstoryがCanvas内に描画されるところまで確認した。

これで、記事やコンポーネントを触ったあとに「この状態、外でも見える？」を確認しやすくなった。