StorybookをAppEngineStandardでappspotに公開していたが、使っていないときには落ちるとしてもAppEngineちょっとお高いので
Firebase Hostingを利用することにする
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