因為在設定時遇到了許多問題，因此撰寫筆記提醒自己，也希望能夠幫助到其他需要的人！
- 建立 Next.js 專案
確保有一個可正常 build 的專案，在本地可先用npm run build測試 - 安裝 Firebase CLI
npm install -g firebase-tools - 初始化 Firebase 專案
npx firebase loginnpx firebase init
在詢問你使用哪個功能的選單中選擇 App Hosting 選項，並依照指示命名並開通付款帳戶。
√ Are you ready to proceed? Yes
√ Which Firebase features do you want to set up for this
directory? Press Space to select features, then Enter to confirm
your choices. App Hosting: Enable web app deployments with App
Hosting
=== 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:
nextjs-firebase-demo-1 (nextjs-firebase-demo-1)
i Using project nextjs-firebase-demo-1 (nextjs-firebase-demo-1)
=== App Hosting Setup
√ App Hosting compute Service account is ready
i This command links your local project to Firebase App Hosting. You will be able to deploy your web app with `firebase deploy` after setup.
√ Please select an option Create a new backend
i === Set up your backend
√ Select a primary region to host your backend:
asia-east1
+ Location set to asia-east1.
√ Provide a name for your backend [1-30 characters]
nextjs-demo-backend
+ Name set to nextjs-demo-backend
+ Created a new Firebase web app named "nextjs-demo-backend"
√ Successfully created backend!
projects/nextjs-firebase-demo-1/locations/asia-east1/backends/nextjs-demo-backend
i === Deploy local source setup
√ Specify your app's root directory relative to your
firebase.json directory /
+ Wrote configuration info to firebase.json
i Writing default settings to apphosting.yaml...
+ Wrote C:\Users\xxxx\Desktop\nextjs-firebase-demo\apphosting.yaml
+ Firebase initialization complete!
+ Wrote configuration info to firebase.json
+ Wrote project information to .firebaserc
+ Firebase initialization complete!
- 設定 Firebase hosting
npx firebase init hosting
You're about to initialize a Firebase project in this directory:
C:\Users\enip\Desktop\nextjs-firebase-demo
Before we get started, keep in mind:
* You are initializing within an existing Firebase project directory
√ Are you ready to proceed? Yes
=== 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.
i Using project nextjs-firebase-demo-1 (nextjs-firebase-demo-1)
=== Hosting Setup
√ Detected an existing Next.js codebase in the current
directory, should we use this? Yes
√ In which region would you like to host server-side content, if
applicable? asia-east1 (Taiwan)
√ Set up automatic builds and deploys with GitHub? Yes
i Detected a .git folder at C:\Users\enip\Desktop\nextjs-firebase-demo
i Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.
Visit this URL on this device to log in:
Waiting for authentication...
+ Success! Logged into GitHub as enip2473
√ For which GitHub repository would you like to set up a GitHub
workflow? (format: user/repository)
enip2473/nextjs-firebase-demo
+ Created service account github-action-1011280354 with Firebase Hosting admin permissions.
+ Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_NEXTJS_FIREBASE_DEMO_1.
i You can manage your secrets at https://github.com/enip2473/nextjs-firebase-demo/settings/secrets.
√ Set up the workflow to run a build script before every deploy?
Yes
√ What script should be run before every deploy? npm ci && npm
run build
+ Created workflow file C:\Users\enip\Desktop\nextjs-firebase-demo\.github/workflows/firebase-hosting-pull-request.yml
√ Set up automatic deployment to your site's live channel when a
PR is merged? Yes
√ What is the name of the GitHub branch associated with your
site's live channel? main
+ Created workflow file C:\Users\enip\Desktop\nextjs-firebase-demo\.github/workflows/firebase-hosting-merge.yml
i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i Action required: Push any new workflow file(s) to your repo
+ Wrote configuration info to firebase.json
+ Wrote project information to .firebaserc
+ Firebase initialization complete!
有時候會報找不到 service account 錯誤，再執行一次 npx firebase init hosting即可。- 更改 .github/workflows/firebase-hosting-merge.yml，確保在 build_and_deploy 的 job 後面加上 env FIREBASE_CLI_EXPERIMENTS: webframeworks，來啟用 firebase 的測試功能。
如果 FIREBASE_CLI_EXPERIMENTS 已經存在可忽略這一步
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on merge
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_xxxxxx}}
channelId: live
projectId: xxxxxx
env:
FIREBASE_CLI_EXPERIMENTS: webframeworks
- 到 Google Cloud Console 中，找到你新的 project，開啟其 Cloud Billing API 、Cloud Function API、Compute Engine API 、Firebase Extensions API 、EventArc API 功能
- 到 IAM & Admin 中，找到 Github Action 的帳號，點擊右邊的 Edit，給予它以下 role
Cloud Functions Admin、Cloud Functions Developer、Cloud Run Viewer、Cloud RuntimeConfig Admin、Firebase Authentication Admin、Firebase Extensions Viewer、Firebase Hosting Admin、Service Account User - Push 到 Github，等待 Github Workflow 執行
git add . && git commit -m "Initialize Github Action" && git push - 等待五分鐘左右，應該就能看到成功部署，若遇到問題可仔細觀看 Error Log，會顯示缺少的權限名稱。
以上就是完整的教學啦！希望有成功幫助到你！
我提供了一個 github repo 作為 template，裡頭的 github action workflow 以及 commit 紀錄、action 出現的錯誤訊息等都可以作為你的參考。
https://github.com/enip2473/nextjs-firebase-demo
如果覺得有幫助的話，可以追蹤我，了解更多有趣知識！
