Mit etwas zusätzlicher Konfiguration können Sie auf der grundlegenden Framework-fähigen CLI-Funktionalität aufbauen, um die Integrationsunterstützung auf andere Frameworks als Angular und Next.js zu erweitern.
Bevor Sie beginnen
Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, prüfen Sie die folgenden Anforderungen und Optionen:
- Firebase CLI-Version 12.1.0 oder höher. Stellen Sie sicher, dass Sie die CLI mit Ihrer bevorzugten Methode installieren .
- Optional: Abrechnung für Ihr Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR verwenden möchten)
Firebase initialisieren
Initialisieren Sie zunächst Firebase für Ihr Framework-Projekt. Verwenden Sie die Firebase-CLI für ein neues Projekt oder ändern Sie firebase.json
für ein vorhandenes Projekt.
Initialisieren Sie ein neues Projekt
- Aktivieren Sie in der Firebase-CLI die Web-Frameworks-Vorschau:
firebase experiments:enable webframeworks
Führen Sie den Initialisierungsbefehl über die CLI aus und befolgen Sie dann die Anweisungen:
firebase init hosting
Beantworten Sie die Frage „Möchten Sie ein Webframework verwenden? (experimentell)“ mit Ja.
Wählen Sie Ihr Hosting-Quellverzeichnis; Dies könnte eine vorhandene Web-App sein.
Wenn Sie dazu aufgefordert werden, wählen Sie Express.js/custom
Initialisieren Sie ein vorhandenes Projekt
Ändern Sie Ihre Hosting-Konfiguration in firebase.json
so, dass eine source
statt einer public
Option vorhanden ist. Zum Beispiel:
{
"hosting": {
"source": "./path-to-your-express-directory"
}
}
Stellen Sie statische Inhalte bereit
Bevor Sie statische Inhalte bereitstellen, müssen Sie Ihre Anwendung konfigurieren.
Konfigurieren
Um zu wissen, wie Sie Ihre Anwendung bereitstellen, muss die Firebase-CLI sowohl in der Lage sein, Ihre App zu erstellen als auch zu wissen, wo Ihre Tools die für das Hosting bestimmten Assets platzieren. Dies wird mit dem npm-Build-Skript und der CJS-Verzeichnisdirektive in package.json
erreicht.
Angesichts der folgenden package.json:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
Die Firebase-CLI ruft nur Ihr Build-Skript auf, daher müssen Sie sicherstellen, dass Ihr Build-Skript vollständig ist.
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
Wenn Ihr Framework das Pre-Rendering nicht sofort unterstützt, sollten Sie die Verwendung eines Tools wie Rendertron in Betracht ziehen. Mit Rendertron können Sie Headless-Chrome-Anfragen an eine lokale Instanz Ihrer App stellen, sodass Sie den resultierenden HTML-Code speichern können, um ihn beim Hosting bereitzustellen.
Schließlich speichern verschiedene Frameworks und Build-Tools ihre Artefakte an verschiedenen Orten. Verwenden Sie directories.serve
, um der CLI mitzuteilen, wo Ihr Build-Skript die resultierenden Artefakte ausgibt:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
"directories": {
"serve": "dist"
},
…
}
Einsetzen
Nachdem Sie Ihre App konfiguriert haben, können Sie statische Inhalte mit dem Standardbereitstellungsbefehl bereitstellen:
firebase deploy
Dynamische Inhalte bereitstellen
Um Ihre Express-App in Cloud Functions für Firebase bereitzustellen, stellen Sie sicher, dass Ihre Express-App (oder Ihr Express-URL-Handler) so exportiert wird, dass Firebase sie finden kann, nachdem Ihre Bibliothek mit NPM gepackt wurde.
Um dies zu erreichen, stellen Sie sicher, dass Ihre files
alles enthält, was für den Server benötigt wird, und dass Ihr Haupteinstiegspunkt in package.json
korrekt eingerichtet ist:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node tools/prerender.ts"
},
"directories": {
"serve": "dist"
},
"files": ["dist", "server.js"],
"main": "server.js",
...
}
Exportieren Sie Ihre Express-App aus einer Funktion namens app
:
// server.js
export function app() {
const server = express();
…
return server;
}
Oder wenn Sie lieber einen URL-Handler im Express-Stil exportieren möchten, nennen Sie ihn handle
:
export function handle(req, res) {
res.send(‘hello world’);
}
Einsetzen
firebase deploy
Dadurch werden Ihre statischen Inhalte auf Firebase Hosting bereitgestellt und Firebase kann auf Ihre Express-App zurückgreifen, die auf Cloud Functions für Firebase gehostet wird.
Optional: Integration mit Firebase-Authentifizierung
Das Web-Framework-fähige Firebase-Bereitstellungstool hält den Client- und Serverstatus mithilfe von Cookies automatisch synchron. Um auf den Authentifizierungskontext zuzugreifen, enthält das Express- res.locals
Objekt optional eine authentifizierte Firebase-App-Instanz ( firebaseApp
) und den aktuell angemeldeten Benutzer ( currentUser
).