【GitBook】 CLI版のドキュメントをFirebase Hosting にデプロイする

Firebaseの準備

1. Firebase のプロジェクトを作成

https://firebase.google.com/ のコンソールにアクセスして、ドキュメントをホスティングするためのプロジェクトを作成しておく

2. Firebase CLI インストール

こちらを参考に Firebase CLI をインストール

$ npm install -g firebase-tools

3. Firebase ログイン

$ firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI usage and error reporting information? (Y/n) 

「FirebaseがCLIの使用状況とエラー報告情報を収集することを許可しますか?」と聞かれてるのでとりあず「Y」を選択。

するとデフォルトブラウザで下記の画面が開くのでFirebase で使用しているアカウントを選択

スクリーンショット 2020-05-15 15.05.31

続いて以下も「許可」を選択

スクリーンショット 2020-05-15 15.05.50

ログインに成功すると以下のような表示に

スクリーンショット 2020-05-15 15.06.05

ターミナル側では以下のようなメッセージが表示されるはず。

Success! Logged in as start.rec.g@gmail.com

これでとりあずFirebaseの準備は完了。

Gitbookドキュメントのビルド

HTMLで出力するために build コマンドを実行する

$ gitbook build

以下のようなメッセージが表示され、_book フォルダにHTMLが書き出される

info: 10 plugins are installed 
info: 9 explicitly listed 
info: loading plugin "mermaid"... OK 
info: loading plugin "collapsible-chapters"... OK 
info: loading plugin "hints"... OK 
info: loading plugin "highlight"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK 
info: found 10 pages 
info: found 29 asset files 
info: >> generation finished with success in 1.2s ! 

Firebase にデプロイ

まずはデプロイ先のプロジェクトを確認するために以下のコマンドを実行

$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬────────────┬──────────────────────┐
│ Project Display Name │ Project ID │ Resource Location ID │
├──────────────────────┼────────────┼──────────────────────┤
│ xxx-dev              │ xxx-dev    │ [Not specified]      │
├──────────────────────┼────────────┼──────────────────────┤
│ test                 │ test-58477 │ us-central           │
└──────────────────────┴────────────┴──────────────────────┘

プロジェクト一覧が表示されるのでそれを引数にデプロイする

$ firebase deploy --project xxx-dev
=== Deploying to 'xxx-dev'...
i  deploying hosting
i  hosting[jkm-dev]: beginning deploy...
i  hosting[jkm-dev]: found 66 files in _book
✔  hosting[jkm-dev]: file upload complete
i  hosting[jkm-dev]: finalizing version...
✔  hosting[jkm-dev]: version finalized
i  hosting[jkm-dev]: releasing new version...
✔  hosting[jkm-dev]: release complete
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/xxx-dev/overview
Hosting URL: https://xxx-dev.firebaseapp.com

Hosting URL にアクセスすることでデプロイ内容を確認できる


おわり

この記事が気に入ったらサポートをしてみませんか?