解決部屬到Firebase Hosting SSR遭遇的Credential問題Error: invalid_grant: Invalid grant: account not found
這幾天將Next.js原本遷徙到secret manager來管理，只是一旦部屬Firebase Hosting SSR，遭遇了Credential錯誤問題 Error: invalid_grant: Invalid grant: account not found 究竟該如何解決呢?
發表文章
簡記:解決Firebase部屬Next.js使用pnpm的部屬失敗問題
在本機端檢查與建置都會成功，但是總是在傳到雲端(cloud build)後發生錯誤 索性就安裝這個錯誤訊息所指出的套件 pnpm install @opentelemetry/api@1.9.0 解決這個部屬問題... 拿這個問GPT它會說，這應該是只有使用pnpm時才會發生，因為firebase-tools只使用與npm操作的狀況 另外，每次pnpm run build建置都會顯示的warning也很煩 pnpm install -D esbuild 0.19.2 裝完會寫說有東西需要approve我就確認 pnpm approve-builds 空白鍵選擇 esbuild再按確認，完畢!
解決Firebase部屬失敗HTTP Error: 401, Request had invalid authentication credentials.
這幾天寫了好幾個功能，今天想要部屬到Firebase時發生了401部屬錯誤，完整訊息如下: Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. 該怎麼處理呢?
[Next.js][App router]使用Route Handler處理檔案上傳(Firebase hosting/Cloud functions)
一個會員網站提供上傳個人圖檔是一個很基本的應用。現在如AI解析及互動上也會需要用到圖檔、聲音，甚至是影片來提供服務，所以上傳檔案是一件稀鬆平常的事情。 當然，firebase中，可以透過使用Firebase storage的前端套件來快速的完成這件事情，不需要額外思考檔案上傳背後的問題。然而，當你沒有使用Firebase Auth來作會員登入系統，你馬上就面臨資料隱私的兩難問題。 你的Firebase storage存取規則無法檢驗存取的是否為用戶，且無法依照會員角色來區分存取權限。直到最後你只能妥協，將storage存取權限完全開放，使得上傳功能與用戶資料完全裸奔在網際網路上。在App router中透過Route Handler，我們可以管控會員是否有上傳與存取的權利。
!危險網站!解決Firebase上部屬Next.js網站使用NextAuth.js整合LINE登入遭遇的問題
相信許多人使用Firebase部屬網站，都會遇到這個危險網站的問題。本機電腦開發時都沒有問題，但是部屬後網站，只要點擊登入頁就會被Chrome標記成危險網站，使用者要登入都沒辦法。這到底該怎麼解決呢?
設定基礎Next.js+MUI開發環境與部屬firebase
這裡使用範例MUI本身示範例，因為有時寫一寫會忘記一些步驟，乾脆就會整成一篇。以下整理成10點內容 1. 使用範例專案 pnpm create next-app {你喜歡的專案目錄名稱} --example https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts 這裡使用MUI官方提供的Next.js的typescript範例，程式碼 請參考這裡 使用到的主要技術堆疊如下 a. MUI v5 b. Next.js v14 - App router c. typescript v5
如何在Firebase專案中加入多個Next.js Web App並部屬在不同網址
會有這個需求是因為建立一個完整的網站，至少會需要前台與後台，分離兩個在維護上會比較簡單，且可避免在前台App權限給的太多，導致其他問題。
如何從Firebase專案中移除已部屬的App Hosting服務
在前面提到我有嘗試依照 Google官方針對Next.js整合到firebase推出的codelabs教學 ，部屬了一個App Hosting的服務。因為我不想增加gcp的使用額度，打算把它移除。進入Firebase主控台卻發現沒有提供移除App Hosting的按鈕，只好用firebase CLI來處理它。 上圖使用 Copilot設計工具 創造
Google官方針對Next.js整合到firebase推出的codelabs教學
這幾天照著 這個codelabs教學 跑了一下，遭遇滿多小問題的，不過拿來當實作得參考程式碼是不錯的。 上圖使用 Coplit設計工具 生成 https://firebase.google.com/codelabs/firebase-nextjs 上面這篇教學是使用Next.js並推廣firebase app hosting和github整合，當然也沒有缺少AI的部份(Gemini API)，不過所佔篇幅只有一個小節。使用到得服務有: Firebase authentication 使用者的Google整合登入 Firebase storage 儲存上傳圖片 Firestore 儲存/存取使用者評論與評分等 Gemini API Cloud Secret Manager 儲存密鑰
在Next.js中firebase套件初始化與開發模式該如何處理
firebase的javascript函數庫有兩個firebase和firebase-admin 這篇分享一下firebase套件得初始化與開發模式初始化該如何作
使用firebase-admin上傳檔案到Firebase storage
近期使用較多的Firebase服務，在參考使用Firebase提供的Node.js的函數庫一段時間後，才意識到Firebase是有兩組不同的操作。 就算透過AI詢求幫助時，也總是會混合著解兩者的回應。所以個人就試錯後，將方法整理成一個簡短的使用範例。以下就針對Firebase的firebase-admin函數庫，來上傳檔案到Firebase storage。
firebase functions v2(javascript)如何設定部屬區域(deploy region)
在code裡面引用setGlobalOptions 函數來設定 const { setGlobalOptions } = require ( "firebase-functions/v2" ); setGlobalOptions ({ region : "asia-east1" });
解決Firebase整合Next.js部屬(deploy)的permission問題
這是在轉移之前寫的next.js功能到其他firebase專案時發生的權限問題 摘要錯誤訊息如下: i functions: creating Node.js 18 (2nd Gen) function firebase-frameworks-***:ssr***(asia-east1)... Unable to retrieve the repository metadata for projects/ *** /locations/asia-east1/repositories/gcf-artifacts. Ensure that the Cloud Functions service account has 'artifactregistry.repositories.list' and 'artifactregistry.repositories.get' permissions. You can add the permissions by granting the role 'roles/artifactregistry.reader'. Functions deploy had errors with the following functions: firebase-frameworks- *** :ssr***(asia-east1)