建立 Firebase 專案#

登入 Firebase Dashboard 建立新專案。

雖然常聽到有人說 Firebase 就是 Google Cloud 套殼，但不得不說這個殼是真的好看。如果 GCP 能夠設計的這麼美觀且直覺的話，大概也沒人想用 AWS 或其他雲服務了吧😅

Init Firebase Project#

接下來到網站的程式資料夾去 init 專案，利用 npm install -g firebase-tools 安裝 firebase 工具，接著跑 init 流程。

1
firebase login
2
firebase init

架站會用到的是 Hosting (注意不是 App Hosting)，把它用空白鍵選取，按 Enter。

接下來基本就 Enter 過去就沒啥問題，需要注意的是 Hosting Setup

• 我使用的專案輸出資料夾是 dist 所以要特別指定
• 第二個選項是建 SPA 用的，讓網域內所有網址都導到 index (不會有 404)。我有用到 routing 所以不能勾。
• 第三個選項會幫忙建好 Github Actions，之後每次 push 到 main branch 或 PR Merge 都會自動觸發 build 並且 deploy。
  • 這點對於沒在寫 Actions 的是很方便，但這份 yml 預設是用 npm 跑，我在這個專案用 pnpm ，所以建立好之後需要改裡面內容。

驗證網域#

Firebase 會給 xxx.web.app 跟 xxx.firebaseapp.com 兩個網域，但我原本是用 custom domain，這裡也一併轉移過來。

依照 Firebase 的指示在 DNS 加上 CNAME 或 TXT record 就搞定了。如果跟我一樣用 Cloudflare 管 DNS 的，要記得把 Proxy 關掉，不然驗證不會過。

驗證完之後 Firebase 還會自動幫你把 SSL setup 好，非常貼心。

後記#

以 Deploy 網站或 app 的舒適度來說，Firebase 絕對是我用過的第一名，而且可以很明顯的感受到他們也特別為沒有程式基礎的人來設計，只要有動到程式的部分，每一個步驟都會 step-by-step 解釋的很詳盡。

更好的是，Firebase 整合了各種在開發網頁或是 app 的工具或服務，可以在一個網站就去設定資料庫、使用者登入、GA 分析、Testing 等等，雖然說真的就是 GCP 套殼，可是使用起來就真的很舒服。

要是每個雲服務都能做的這麼貼心就好了。