Statische Website kostenlos auf Firebase Hosting bereitstellen

Last updated 18. Oktober 2021

Inhalt

Statische Website auf Firebase Hosting bereitstellen

Firebase-Hosting ist ein von Google angebotener Dienst, der statische und dynamische Websites auf sichere Weise hostet. Es ist der beste kostenlose Service für Entwickler. Sie können dem Kunden ein Site-Design und eine Vorproduktionsversion einer Site anzeigen, indem Sie sie auf dem Firebase-Hosting bereitstellen.

Ein Benutzer kann den kostenlosen Tarif von Firebase zum Hosten einer Website verwenden. Der kostenlose Plan beinhaltet Unterstützung für benutzerdefinierte Domains und SSL, 1 GB Speicher. Für kleinere Websites reicht der 1GB-Speicher aus. Um eine Liste aller Funktionen zu erhalten, die in kostenlosen und Premium-Plänen enthalten sind, besuchen Sie die Preisseite.

Obwohl das Firebase-Hosting die Ausführung von Node.js/JavaScript-Code unterstützt, konzentrieren wir uns in diesem Artikel nur auf die Bereitstellung der statischen Website. Zur Bereitstellung einer dynamischen Website auf Firebase werde ich in Zukunft einen weiteren Artikel schreiben.

Einstieg

Um loszulegen, muss Node.js auf Ihrem System installiert sein. Sie können das Node.js-Paket zur Installation auf der offiziellen Website herunterladen.

Sobald Sie Node.js auf Ihrem System installiert haben, gehen Sie zur Firebase-Konsole und erstellen Sie ein Projekt, indem Sie auf das Feld "Projekt hinzufügen" klicken. Füllen Sie alle Informationen nach Aufforderung aus.

Nachdem Sie das Firebase-Projekt erstellt haben, werden Sie zum Projekt-Dashboard weitergeleitet. Klicken Sie in der linken Seitenleiste auf „Hosting” und dann auf „Erste Schritte”. Es öffnet sich eine Seite, auf der Sie Anweisungen zur Bereitstellung finden. Wir werden dies im nächsten Teil des Tutorials durchgehen.

Statische Website auf Firebase Hosting bereitstellen

Nachdem wir ein Projekt auf Firebase erstellt haben, können wir mithilfe einiger Befehle eine statische Website auf dem Firebase-Hosting bereitstellen. Dazu müssen Sie zuerst Firebase CLI installieren und dann lokal konfigurieren.

Firebase-CLI installieren

Für die Bereitstellung müssen Sie zunächst die Firebase-CLI installieren. Sie haben Node.js installiert, verwenden Sie also npm, um CLI zu installieren. Öffnen Sie das Terminal und installieren Sie Firebase CLI mit npm wie folgt:

npm install -g firebase-tools

Beachten Sie, dass wir die Firebase-Tools global mit installieren -g. Auf diese Weise können Sie Firebase-Befehle von jedem Verzeichnis auf Ihrem Computer ausführen. Führen Sie nun vom Terminal aus den nächsten Befehl aus:

firebase login

Es kann Sie auf die Anmeldeseite des Google-Kontos weiterleiten. Folgen Sie einfach den vorgeschlagenen Schritten. Da es sich bei Firebase nur um einen Autorisierungsprozess handelt, wird das Projekt nur in Ihrem Konto bereitgestellt.

Initialisieren und Bereitstellen

Nachdem Sie Ihr Google-Konto mit Firebase CLI autorisiert haben, müssen Sie Firebase im Stammverzeichnis des Projekts initialisieren. Führen Sie dazu den folgenden Befehl in Ihrem Projekt-Root-Verzeichnis aus.

firebase init

Beim Ausführen des obigen Befehls fragt CLI nach einer anderen Option zur Auswahl. Sie sollten die Option ‘Hosting’ auswählen, indem Sie mit einem Pfeil navigieren und dann die Leertaste drücken. Drücken Sie die Eingabetaste, nachdem Sie die Option "Hosting" ausgewählt haben.

Wählen Sie als Nächstes das Projekt aus, das Sie in der Firebase-Konsole erstellt haben. Drücken Sie die Eingabetaste. Die nächste Frage wäre Was möchten Sie als Ihr öffentliches Verzeichnis verwenden? (Öffentlichkeit). Hier muss man nichts machen. Drücken Sie einfach die Eingabetaste.

Für die nächste Frage Als Single-Page-App konfigurieren (alle URLs in /index.html umschreiben)? (J/N), drücken Sie N und drücken Sie die Eingabetaste, da wir keine einseitige Anwendung bereitstellen.

Nach diesem Befehl sehen Sie einige Dateien, die in Ihrem Stammverzeichnis zusammen mit dem publicOrdner erstellt wurden. Dieses publicVerzeichnis dient als Root für die Bereitstellung. In diesem publicVerzeichnis müssen Sie Ihre Projektdateien speichern.

Lassen Sie uns nun statische HTML-Seiten erstellen. Da dieses Tutorial nur zu Demozwecken dient, erstelle ich grundlegende HTML-Seiten.

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is Index Page</h1>
    <a href="index.html">Home</a> | <a href="about.html">About</a>
</body>
</html>

public/about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is About Page</h1>
    <a href="index.html">Home</a> | <a href="about.html">About</a>
</body>
</html>

public/style.css

h1 {
    color: blueviolet;
}

Dies sind unsere statischen Seiten, die wir auf dem Firebase-Hosting bereitstellen werden.

Wenn Sie das Projekt vor der Bereitstellung lokal testen möchten, führen Sie den Befehl serve wie folgt aus:

firebase serve

Es startet Ihren lokalen Server unter http://localhost:5000. Testen Sie Ihr Projekt und wenn alles in Ordnung ist, stellen Sie es mit dem Befehl bereit:

firebase deploy

Nach Abschluss der Bereitstellung sollte die Hosting-URL in der Konsole angezeigt werden.

Führen Sie die Hosting-URL im Browser aus und Sie sollten sehen, dass Ihre Website erfolgreich bereitgestellt wurde. Beachten Sie, dass Sie Ihr Projekt beliebig oft bereitstellen können. Führen Sie nach Ihren Änderungen einfach den Befehl deploy aus und Ihre Site wird mit der neuen Version bereitgestellt.

Rollback Ihrer Version

Firebase verwaltet einen Verlauf aller Ihrer Bereitstellungsversionen. Sie können sogar auf die ältere Version zurücksetzen. Rufen Sie die Firebase-Hosting-Seite auf, auf der Sie eine Rollback-Option finden (vorausgesetzt, Sie haben mehr als eine Version bereitgestellt).

Durch ein Rollback zu den Versionen können Sie direkt zwischen den einzelnen Versionen Ihrer Website wechseln. Es ist einfach und hilfreich während der Design- und Entwicklungsphase.

Ich hoffe, Sie haben die Grundlagen des Bereitstellungsprozesses des Firebase-Hostings kennengelernt. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net