Lento con forza

大学生気分のIT系エンジニアが色々書いてく何か。ブログ名決めました。

StorybookをVercelでホスティングするのが便利すぎる

Webコンポーネントをブラウザでサッと確認するのにStorybookが便利ですね。Storybookは自分で作ったコンポーネントをブラウザ上で一覧できるツールです。以下のようなコンポーネントを表示できるWebページを簡単に作ることができます。

f:id:kouki_dan:20200726113647p:plain

始め方は簡単で、Reactの場合は以下のように始められます。

npx -p @storybook/cli sb init --type=react

これだけでも便利なのですが、Vercelにホスティングすると更に便利になります。Vercelはデベロッパの開発体験にフォーカスしたプラットフォームで、特にフロントエンド開発に重きを置いています。個人用プロジェクトの場合には無料で使うことができます。

Vercelの特徴として、Gitリポジトリとの統合が非常に優秀で、数クリックでリポジトリをインポートするだけで自動的にデプロイが行われます。また、VercelはGitHubでPRを作られたことを検出するとプレビュー用のURLを生成してPRにコメントします。

f:id:kouki_dan:20200726115044p:plain

ここでコメントされたURLにアクセスすると、PRの変更が反映されたStorybookを見ることができます。 f:id:kouki_dan:20200726115128p:plain

StorybookをVercelにデプロイするとこれらの特徴が自動的に使えます。ちょっとした変更であれば、手元でビルドしなくてもPRの差分を簡単に確認できるようになります。しかも、自分で記述しなくてはいけない追加の設定は全くありません。これほどの恩恵が全自動で受けられるのはVercelを使う上でとても便利なことの一つです。開発体験も非常に良いですね。

デプロイも簡単で、https://vercel.com/import からWeb UIに従って入力していくだけで完了します。

まず、リポジトリのURLを入力します。 f:id:kouki_dan:20200726115809p:plain

次に、プロジェクトのディレクトリを設定します。多くの場合はデフォルトでContinueを押して大丈夫でしょう。 f:id:kouki_dan:20200726115847p:plain

最後に、プロジェクトの設定を行います。多くのフロントエンドフレームワークの場合プリセットから自動設定が行われるのですが、Storybookの場合は自分で記述する必要があります。FRAMEWORK PRESETはOtherを選び、Build and Output Settingsを開き、以下のように記述しましょう。 f:id:kouki_dan:20200726115907p:plain

設定
BUILD COMMAND npm run build-storybook
OUTPUT DIRECTORY storybook-static

最初に説明したように、以下のコマンドでStorybookを作成した場合はpackage.jsonにbuild-storybookスクリプトが追加されるので、それを利用するように記述します。もし違う場合は自分のpackage.jsonを確認して適切な値に書き換えましょう。

npx -p @storybook/cli sb init --type=react

Deployボタンを押すと、自動的にデプロイが開始されます。設定が誤っていなければ少し待つとこのような画面になり、設定が完了します。 f:id:kouki_dan:20200726120526p:plain

この例でのデプロイ先はこちらです: https://storybook-vercel.vercel.app/

とても簡単ですね。あとはPRを作るだけで最初に書いた自動的にStorybookプレビューを確認するためのURLをVercelがコメントしてくれます。

github.com