如何在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就直接部屬成功，真的是損失了好幾個小時的時間。
留言