· 3,955 chars · 5 min Updated

部署教學

1\. Fork GitHub repo

1. Fork GitHub repo

步驟操作推薦
1Fork 這個 repo 到自己的 GitHub用要部署的 GitHub 帳號
2確認 repo 有 main / dev 分支之後 push 會觸發 GitHub Actions
3先不要急著 deploy先把 Firebase、GCP、IAM、Secrets 設好

2. 建 Firebase / Google Cloud project

步驟操作推薦
1在 Google Cloud Console 建 projectProject ID 用正式、短、好辨識的名字
2綁定 BillingFunctions / Cloud Build / Artifact Registry 會需要
3到 Firebase Console,把 Firebase 加到同一個 project不要另開不同 project
4建立 Firebase Web App之後要複製 config 到 GitHub Secrets

3. Firebase Console 要自己建立或啟用的項目

項目操作推薦
Authentication啟用 Google providerAuthorized domains 加上正式 Hosting 網域
Firestore Database建 Native mode database台灣使用者建議 asia\-east1
Cloud Storage for Firebase建預設 bucket要 Always Free 選 us\-central1us\-east1us\-west1;要台灣延遲才選亞洲
Hosting啟用 Firebase Hosting用 default site 即可
Functions啟用 Cloud Functions for Firebase跟同一個 Firebase project 綁定

4. Google Cloud Console 要啟用的 API

API


Firebase Management API


Firebase Hosting API


Firebase Rules API


Identity Toolkit API


Cloud Firestore API


Cloud Storage API


Cloud Functions API


Cloud Build API


Artifact Registry API


Cloud Run Admin API


Eventarc API


Pub/Sub API


Cloud Scheduler API


Cloud Tasks API


Secret Manager API


IAM Credentials API


Service Usage API


5. GitHub Actions deploy account

Firebase Hosting GitHub integration 會建立 GitHub Actions 用的 service account,也可以自己手動建一個。這個專案建議直接用同一個 deploy account,然後補下面權限。

權限角色
Firebase 管理roles/firebase\.admin
Hostingroles/firebasehosting\.admin
Firestore rulesroles/firebaserules\.admin
Firestore indexesroles/datastore\.indexAdmin
Storageroles/storage\.admin
Functionsroles/cloudfunctions\.admin
Cloud Runroles/run\.admin
Cloud Buildroles/cloudbuild\.builds\.editor
Artifact Registryroles/artifactregistry\.admin
Eventarcroles/eventarc\.admin
Pub/Subroles/pubsub\.admin
Schedulerroles/cloudscheduler\.admin
Tasksroles/cloudtasks\.admin
Secret Managerroles/secretmanager\.admin
使用 runtime service accountroles/iam\.serviceAccountUser

6. Functions runtime account

到 Cloud Functions 或 Cloud Run 詳情頁確認 runtime service account,然後給它下面權限。

權限角色
Firestoreroles/datastore\.user
Storage objectroles/storage\.objectAdmin
Secret 讀取roles/secretmanager\.secretAccessor
Cloud Tasks enqueueroles/cloudtasks\.enqueuer
清舊 Secret versionsroles/secretmanager\.admin

7. GitHub Secrets

到 GitHub repo 的 Settings -> Secrets and variables -> Actions 新增:

Secret
FIREBASE\_PROJECT\_IDFirebase / GCP project id
FIREBASE\_SERVICE\_ACCOUNTGitHub Actions deploy service account JSON
VITE\_APP\_TITLEApp 標題
VITE\_ALLOWED\_DOMAIN校內 email 網域
VITE\_ADMIN\_EMAILS管理員 email,逗號分隔
VITE\_FIREBASE\_API\_KEYFirebase Web App config
VITE\_FIREBASE\_AUTH\_DOMAINFirebase Web App config
VITE\_FIREBASE\_PROJECT\_IDFirebase Web App config
VITE\_FIREBASE\_APP\_IDFirebase Web App config
VITE\_FIREBASE\_STORAGE\_BUCKETFirebase Web App config
VITE\_FIREBASE\_MESSAGING\_SENDER\_IDFirebase Web App config
NOTION\_DATABASE\_IDNotion database id
NOTION\_TOKENNotion integration token

8. 部署順序

順序操作
1Fork repo
2建 Google Cloud project 並綁 Billing
3加 Firebase project
4建 Firebase Web App
5啟用 Auth、Firestore、Storage、Hosting、Functions
6啟用 Google Cloud API
7建或確認 GitHub Actions deploy service account
8設 IAM
9設 GitHub Secrets
10push 到 devmain,讓 GitHub Actions 部署

官方參考

主題連結
Firebase CLIfirebase.google.com/docs/cli
Hosting GitHub integrationfirebase.google.com/docs/hosting/github-integration
Cloud Storage Always Freecloud.google.com/free/docs/free-cloud-features#cloud-storage
Cloud Functions IAMcloud.google.com/functions/docs/concepts/iam
GitHub Actions Secretsdocs.github.com/…/use-secrets-in-github-actions

相关推荐