firebase functions next example

Firebase-GCP審查的棄用新示例

---

next.js ssr應用程序在雲功能上用於firebase the Firebase Hosting

託管next.js ssr react應用程序在firebase託管的雲功能上的雲功能上。

這是隨附的媒體帖子，正在寫一篇新帖子，以描述新的項目結構，Firebase部分部署，對前/deploy掛鉤的Firebase支持以及這些新功能解決的問題。

為什麼？

在雲功能上託管您的SSR Next.js應用程序，可以實現低成本，自動縮放的SSR應用程序體驗，以利用Firebase的Sweet Developer Experience。

如何？

Firebase Hosting可以將路由重寫為為我們的服務器端渲染的雲功能。 JS應用程序。使用一個重寫規則，該規則可以捕獲所有路線，然後我們可以在託管URL而不是firebase雲功能URL上託管我們的SSR應用程序。

而不是：

https://us-central1-<project-name>.cloudfunctions.net/<function-name>

我們可以使用：

<project-name>.firebaseapp.com/

然後，可以使用Next.js來實現SSR與熱模塊重新裝載，服務器和客戶端路由，路由級別代碼 - 拆分，路由預取更多的反應！

通過這種方法克服了在火箱上託管SSR的許多問題。在此處創建問題之前，請參考媒體帖子。

重要的！

• 該示例使用firebase-tools作為DevDepentency，該示例是通過yarn從node_modules/.bin/ Folder運行的。 YARN將從node_modules/.bin/的package.json或二進制腳本中運行腳本。 npm run不會檢查.bin文件夾中是否有可執行文件，因此，如果使用npm ，則必須更改腳本以從node_modules/.bin/或安裝全球範圍內將firebase二進制運行，否則將其從firebase-tools列表中刪除。請查看下一個。 JSRepo的示例，以建議我如何使用npm 。

• 確保您正在運行節點6.11.5 ，因為函數模擬器需要此操作。我建議ASDF作為版本管理器，並添加ASDF .tool-versions文件以定義節點運行時。

• 如果使用_app.js ，您可以在部署的雲功能上收到以下錯誤：

   { Error: Cannot find module '@babel/runtime/regenerator'...
  

  儘管Next.js將@babel/runtime作為依賴關係，但您必須將其直接作為依賴項安裝在此項目中。

安裝

git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install

登錄到Firebase CLI

這用作DEV依賴性，而不是全局安裝。我發現這是一個更好的開發經驗。

yarn fblogin

Next.js開發

標準Next.js開髮帶有熱模塊的重新裝載等

yarn dev

本地測試

yarn serve

這終於現在起作用了！注意：您必須在.firebaserc文件中定義了有效的firebase項目ID，因為serve命令確實檢查了項目是否存在。我相信這與確保相對路線與您部署的應用程序保持一致，因為您的URL中使用了<project id> 。

對於那些想深入研究實際發生的事情的人，請運行此命令：

yarn serve --debug

部署到firebase

您需要將項目連接到您的Firebase項目。在.firebaserc或運行firebase init中編輯名稱，然後選擇不覆蓋任何文件。

部署託管資源和重寫雲功能

yarn deploy-app

部署功能不用於SSR

部署功能組中指定的所有功能。編輯此腳本以添加更多功能組。 - 有關如何使用功能組，請參見部分部署文檔。

yarn deploy-funcs

將所有東西都部署到firebase

yarn deploy-all

清潔dist文件夾

yarn clean

代碼兼容性的註釋

一切都在Ubuntu 17.04的Bash上進行了測試。這應該在Windows上的Ubuntu上的bash上起作用，而無需任何更改。如果您希望獲得Windows Native支持，請提交問題，以便我們可以兼容Windows。請報告任何MACOS錯誤，因為我無法訪問設備進行測試。我的開發環境可以在這裡找到。