Firebase-Tools

簡稱 CLI。

簡述

如果想要在本地端設定 Firebase 的規則，或者是部署到 Firebase 上，都會需要透過「Firebase-tools」這個 CLI 工具來幫忙，所以這篇就簡單介紹一些流程。

懶人包

附註：這邊用 Mac 可能會遇到權限問題，我的解法是到 ~/.config/configstore 把所有 firebase 相關的檔案都開啟「讀寫」權限，這樣就不會一直彈出權限問題了。

1. 安裝 firebase-tools (global)

npm install -g firebase-tools

2. 登入

firebase login

3. 初始化

選擇要使用的 firebase 功能：

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to c
onfirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
ance
 ◉ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products

選擇初始化方案：

? Please select an option:
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

你要用 firebase 上的哪個專案？

? Select a default Firebase project for this directory:
  cooking-peanu (Cooking PeaNu)
❯ mymoney-2a81c (myMoney)
  uber-eats-clone-112b1 (uber-eats-clone)

你要用哪個檔案來設定 Rules？我們沒有所以直接 Enter 讓他自動建立：

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

你要用哪個檔案來設定 indexs？我們沒有所以直接 Enter 讓他自動建立：

? What file should be used for Firestore indexes? firestore.indexes.json

要 public 出去的資料夾名稱？這邊就要自行輸入了，因為 React 打包後會放到 build，所以這邊輸入 build：

What do you want to use as your public directory? (public) 輸入 build

要設定成 SPA 嗎？（統一指向 index.html）

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

要不要自動部署到 Github 上？這裡看個人，我是選「N」

? Set up automatic builds and deploys with GitHub? (y/N)

部署

1. 建立 bundle 後的檔案

npm run build

2. 下指令

firebase deploy

就是這麼簡單。

另外，如果只是要部署一些 Firebase 的設定檔可以這樣做：

// firestore
firebase deploy --only firestore
// storgae
firebase deploy --only storage

以上就是基本的使用方式。