Docker + Laravel + Blade環境に Storybook を導入

はじめに

Storybook を利用してシステムのデザイン管理を試してみたかったのですが、
下記の環境での導入方法が調べても見つからなかったので、下記に導入方法をまとめています。

動作環境

• プラットフォーム：Docker
• フレームワーク：PHP7 + Laravel8 + Blade

Laravel+Blade環境でStorybookを動作させる

StorybookはReactやVue.jsと親和性が高く導入が簡単（公式に導入手順があります）になっていますが、Bladeには対応していません。

Blade環境に簡単に導入する方法がないか調べた所、「Blast」というライブラリが見つかりました。

Blast のインストール

BlastはLaravel+Blade環境でStorybook Serverを利用できるライブラリで、composerで簡単にインストールできます。

インストール後は下記のコマンドでBlastが起動します。

Docker環境でBlastを利用するには

Docker環境で利用するためには、Storybook用にポートを開放する必要があります。
Storybook用に必要なポート番号は「6006番」です。（追加で通常の80番も必要です）

下記は、Docker Composeでの設定例です。

最後に.env ファイルに下記の設定を追加することで、Docker環境でも利用できるようになります。

まとめ

Docker環境で利用するのに苦戦したので、紹介させていただきました。
具体的な使い方については、Blast のREADME.md に詳しく書かれているので、そちらをご参照お願いします。