firebase functions next example

Veraltetes neues Beispiel bei Firebase-GCP-Beispielen

---

Next.js SSR -App auf Cloud -Funktionen für Firebase mit Firebase Hosting

Host a Next.js SSR React App für Cloud -Funktionen für Firebase mit Firebase Hosting.

Hier ist der begleitende Medium Post, der ein neuer Beitrag geschrieben wird, um die neue Projektstruktur, die partiellen Bereitstellungen von Firebase, die Unterstützung von Firebase-Unterstützung von Vor-/Post-Deploy-Haken und welche Probleme diese neuen Funktionen lösen.

Warum?

Hosten Sie Ihre SSR Next.js-App in Cloud-Funktionen, die ein kostengünstiges, automatisches SSR-App-Erlebnis ermöglichen und das süße Entwicklererlebnis von Firebase nutzen.

Wie?

Firebase Hosting kann Routen zu einer Cloud-Funktion umschreiben, die unsere serverseitige, die Next.js-App dient. Mit einer Umschreibungsregel, die alle Routen fängt, können wir unsere SSR -App in unserer Firebase -Hosting -URL anstelle der Firebase Cloud -Funktions -URL hosten.

anstatt:

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

Wir können verwenden:

<project-name>.firebaseapp.com/

Als nächstes kann anschließend SSR-Reaktion mit Hot-Module-Neulade-, Server- und clientseitiger Routing, Routen-Code-Splitting, Routenvorabklingern und vielem mehr erreicht werden!

Eine Reihe von Problemen mit der Hosting von SSR in Firebase wurde mit dieser Methode überwunden. Bitte beachten Sie den mittleren Beitrag, bevor Sie hier Probleme erstellen.

Wichtig!

• In diesem Beispiel wird firebase-tools als DevDependenz verwendet, die über yarn aus dem node_modules/.bin/ Ordner ausgeführt wird. Garn wird Skripte entweder aus dem package.json oder binären Skripten aus node_modules/.bin/ ausgeführt. npm run überprüft den .bin Ordner nicht auf ausführbare Produkte. Wenn Sie also npm verwenden, müssen Sie entweder die Skripte ändern, um die firebase -Binärdatei von node_modules/.bin/ oder firebase-tools global zu installieren und aus der DEGDEPS-Liste zu entfernen. Schauen Sie sich das Beispiel des npm .

• Stellen Sie sicher, dass Sie den Knoten 6.11.5 ausführen, da der Funktionsemulator dies erfordert. Ich empfehle ASDF als Versionsmanager und habe eine ASDF .tool-versions Datei hinzugefügt, um die Knoten-Laufzeit zu definieren.

• Wenn Sie _app.js verwenden, erhalten Sie möglicherweise den folgenden Fehler in Ihrer bereitgestellten Cloud -Funktion:

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

  Trotz Next.js mit @babel/runtime als Abhängigkeit müssen Sie diese direkt in diesem Projekt als Abhängigkeit installieren.

Installation

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

Melden Sie sich bei Firebase CLI an

Dies wird als Dev-Abhängigkeit anstelle einer globalen Installation verwendet. Ich habe festgestellt, dass dies eine viel schönere Entwicklererfahrung ist.

yarn fblogin

Weiter.js Entwicklung

Standard-Next.js-Entwicklung mit Hot-Modul-Nachladen usw.

yarn dev

Lokale Tests

yarn serve

Das funktioniert jetzt endlich! Hinweis: Sie müssen eine gültige Firebase -Projekt -ID haben, die in der .firebaserc -Datei definiert ist, da der Befehl serve , überprüft, ob das Projekt existiert. Ich glaube, dies hat damit zu tun, sicherzustellen, dass die relativen Routen mit Ihrer bereitgestellten Anwendung übereinstimmen, da die <project id> in Ihren URLs verwendet wird.

Für diejenigen, die sich tiefer in das befassen wollen, was hier tatsächlich passiert, führen Sie diesen Befehl aus:

yarn serve --debug

In Firebase einsetzen

Sie müssen das Projekt mit Ihrem FireBase -Projekt verbinden. Bearbeiten Sie den Namen in .firebaserc oder führen Sie firebase init aus und wählen Sie keine Dateien überschreiben.

Bereitstellen Sie Hosting -Ressourcen und die Funktion neu auf

yarn deploy-app

Bereitstellen von Funktionen, die nicht für die SSR verwendet werden

Bereiten Sie alle in der Funktionsgruppe angegebenen Funktionen bereit. Bearbeiten Sie dieses Skript, um weitere Funktionsgruppen hinzuzufügen. - Siehe partielle Bereitstellungsdokumente für die Verwendung von Funktionsgruppen.

yarn deploy-funcs

Stellen Sie alles in Firebase ein

yarn deploy-all

Ordner dist sauber machen

yarn clean

Ein Hinweis zur Codekompatibilität

Alles wurde auf Ubuntu 17.04 mit Bash getestet. Dies sollte ohne Änderungen bei Ubuntu unter Windows auf Bash funktionieren. Wenn Sie Windows Native Support wünschen, senden Sie bitte ein Problem, damit wir unter Windows -Kompatibilität arbeiten können. Bitte melden Sie alle MACOS -Fehler, da ich keinen Zugriff auf ein Gerät zum Testen habe. Meine Entwicklungsumgebung ist hier zu finden.