前提条件
- storybook 7.0.2
- storybookやVercelの使い方の解説はしません。
- 筆者はNext.jsでStorybookを使っていますが、フレームワーク関係なくデプロイできます（多分）
基本的には以下のドキュメントのハンズオンです。
注意
特にこだわりがなくStorybookをホスティングするだけならchromaticがオススメです。
何らかの理由でVercelでホスティングしたい方向けの記事になります。
ローカルでのチェック
以下の2つのコマンドがローカルで動くか先に試して下さい。
$ npm run storybook
> your-project@0.1.0 storybook
> storybook dev -p 6006
@storybook/cli v7.0.2
| Storybook 7.0.2 for nextjs started │
│ 337 ms for manager and 20 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://xxx.xxx.x.xxx:6006/ │
$ npm run build-storybook
> your-project@0.1.0 build-storybook
> storybook build
@storybook/cli v7.0.2
info => Output directory: /path/to/your-project/storybook-static
Vercelの設定
settingsで以下のように設定して下さい。
| 項目 | 値 |
|---|---|
| Framework Preset | Other |
| Build Command | npm run build-storybook |
| Output Directory | storybook-static |
| Install Command | そのまま |
| Development Command | npm run storybook |
デプロイ
deploymentsでRedeployしましょう。
デプロイが終わり以下のような画面がVercelのURLで確認できます。
おまけ
Basic認証も付けれるようです。