⚡️
StorybookをFirebase hostingにデプロイして公開する
TL;DR
Firebase へのホスティングに限らず、CSR のホスティングは基本的に「ビルド → それをサーバーに置く」という流れを踏むだけ。
なので、特段難しいことはなく、ただの手順のメモ的な記事になっています。
前提
- 他のプロダクトを見たりすると何かしらのコンポーネントを作りたくなる時がある
- そういう習作的なコンポーネントを作り、Storybook で管理している
- Storybook を公開しておいて、「こういうコンポーネント作った」というのを外部に公開できる基盤を作りたい
- 基本 master マージで、公開のタイミングも自分でコントロールしたいのでプルリクや master マージ時の自動デプロイは考えない(初期設定でできそうだけど)
Firebase の準備
Firebase コンソールからデプロイ用のプロジェクトを準備したら、ローカルのターミナルで Firebase の確認を進めます。
ログインの確認
firebase login
Firebase プロジェクトの初期化
プロジェクトルートで以下のコマンドを実行
firebase init hosting
以下、ポイント。
? Detected an existing Vite codebase in the current directory, should we use this? No
Vite プロジェクトで構築しているので、Firebase が気を利かせて聞いてくれてる感じです。
が、これを Yes にしてしまうと Vite プロジェクトの方がデプロイされてしまうため、No にします。
? What do you want to use as your public directory? storybook-static
Deploy のターゲットになるのは Storybook の場合storybook-staticとなるので、そう答えてあげます。
Firebase プロジェクトのターゲットを確認
意図したプロジェクトになっていれば OK
firebase target
Storybook のビルド
npm run build-storybook
デプロイ
firebase deploy --only hosting
確認
無事にデプロイされたことを確認できました。
おわりに
単に作ったコンポーネントを見せるだけならこれでいいのですが、Vite で作ったプロジェクトを並行で Firebase で公開する場合にはもう少し踏み込んで凝った設定をする必要がありそう。
あと Firebase、見るたびに便利になっててすごい。
メンバー募集中！
サーバーサイド Kotlin コミュニティを作りました！
Kotlin ユーザーはぜひご参加ください！！
また関西在住のソフトウェア開発者を中心に、関西エンジニアコミュニティを一緒に盛り上げてくださる方を募集しています。
よろしければ Conpass からメンバー登録よろしくお願いいたします。
Discussion