如何在Firebase專案中加入多個Next.js Web App並部屬在不同網址

 會有這個需求是因為建立一個完整的網站,至少會需要前台與後台,分離兩個在維護上會比較簡單,且可避免在前台App權限給的太多,導致其他問題。


醜話寫在前頭,Firebase專案有幾項功能一個專案只能開一個,所以如果想要開兩個的,就還是得回到建立新的Firebase專案。


前置作業

首先你是已經建立了一個Firebase專案,使用Firebase的Hosting功能部屬了Next.js Web App。而現在想要建立第二組Next.js Web App。

安裝 firebase-tool

請參考官方說明

登入firebase

firebase login


1. 初始化本機目錄

firebase init hosting

因為前面已經提到是已經建立了一個Firebase專案生成多個網站,所以這裡會選擇Use an existing project。然後它就會幫你生成firebase.json, .firebaserc。


2. 想新的Site ID

因為Site ID是網址的主機名稱部份,要符合URL規則,官方文件是建議ID取成 xxx-yyy-hashcode

   a. 必須是合法的主機名稱,不能包含.或_等等字元

   b. 長度需在30字以內

   c. 因為是網址所以是全Firebase共通的,可能會衝突

以下Site ID會用用`mirochiu-next-auth`來舉例


3. 建立新的網站

firebase hosting:sites:create mirochiu-next-auth

確認建立結果

firebase hosting:sites:list


4. 設定新的網站代表的部屬目標

這裡將部屬目標命名為`second`

firebase target:apply hosting second mirochiu-next-auth

它是在.firebaserc中寫入targets屬性如下

"targets": {
"<firebase-project-id>": {
"hosting": {
"second": [
"mirochiu-next-auth"
]
}
}
},

不過我自行嘗試時,發現直接改這個檔案並不會讓firebase指令吃到設定,所以還是要用target指令來設定

如果打錯指令的話,可以用target:clear來清除掉

firebase target:clear hosting 部屬目標


5. 指定目前成為部屬目標

開啟專案檔firebase.json

將你目前的hosting設定加上target屬性,並把值設定為`部屬目標`,舉例如下:

{
"hosting": {
"target": "second",
"source": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"frameworksBackend": {
"region": "asia-east1"
}
}
}


6. 部屬網站

上面有設定好的話只要一行指令部屬

firebase deploy

運行到中間你會看到它建立了一個新的firebase functions,名稱與第一個不同,然後準備部屬這第二個Next.js專案



7. 大功告成,存取你的網站

我們第二個Site ID是mirochiu-next-auth所以就會是

https://mirochiu-next-auth.web.app




疑難雜症

1. 如果在部屬中間遭遇404的錯誤,我只能建議你取一個新的Site ID再部屬。

我自己就遇到這個問題,查了半天,才發現Firebase在刪除Site的時候有提示,說刪除後以後也不能使用者個Site ID了。我部屬過程它跑到Firebase抓site的歷史資料都會直接返回404,導致後面建立firebase functions並上傳部屬的作業都不會跑;然而我只是設定成新的Site ID就直接部屬成功,真的是損失了好幾個小時的時間。

參考資料

留言