UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Firebase Hosting】Storybookを最短でホスティングする

StorybookをAppEngineStandardでappspotに公開していたが、使っていないときには落ちるとしてもAppEngineちょっとお高いので

Firebase Hostingを利用することにする

firebase.google.com

Firebase CLIのセットアップ

curl -sL https://firebase.tools | bash

Firebaseにログイン

$ firebase login
Already logged in as xxxxxx@yyyy.com
$ firebase projects:list
✖ Preparing the list of your Firebase projects

Error: Failed to list Firebase projects. See firebase-debug.log for more info.

なんかエラーになった、一度ログアウトしてから再度ログインする

$ firebase logout
$ firebase login

Storybookをビルドする

$ npm run build-storybook

とくに出力先を指定しない場合はstorybook-staticに出力されるので、そこをpublicディレクトリにする

プロジェクトのルートでFirebase initを実行する

$ firebase init hosting

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/uggds/project/my-project/my-application


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: xxxxx (xxxxx)
i  Using project xxxxxx (xxxxx)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? storybook-static
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File storybook-static/index.html already exists. Overwrite? No
i  Skipping write of storybook-static/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

Firebase デプロイする

$ firebase deploy --only hosting

参考

https://firebase.google.com/docs/hosting/?authuser=0#how_does_it_work https://firebase.google.com/docs/hosting/quickstart?authuser=0