Statische Webseiten mit Firebase hosten

Wir gehen davon aus, dass die fertige «statische» Webseite lokal in einem Verzeichnis gespeichert ist. Mit «statische» ist eine Webseite gemeint, die nur aus HTML, CSS und Javascript aufgebaut ist. Ziel ist es, diese online zur Verfügung zu stellen.

Wo hosten?

Es gibt verschiedenste Anbieter um eine statische Seite zu hosten. Als Gmail-Nutzer denkt man zuerst an Google Cloud Storage. Dort ist das Einrichten und Hochladen einer Seite zwar einfach, dafür ist aber die Bereitstellung eines SSL-Zertifikates recht umständlich. Auf SSL sollte aber heutzutage nicht verzichtet werden, weshalb nach etwas Recherche, schlussendlich Firebase als Kandidat ausgewählt wurde (was eigentlich auch ein Google Hosting Service ist).

Firebase bietet einen kostenfreien Basisplan (Spark Plan). Ein weiterer Vorteil ist die automatische und ebenfalls kostenlose Integration des SSL-Zertifikats und die praktische Versionierung von Veröffentlichungen.

Veröffentlichen

Voraussetzungen für die Einrichtung sind ein Google Account, die Installation von node.js und das Firebase CLI. Nach der Installation von node.js kann man mit nachfolgender Befehlszeile die Firebase-Tools installieren:

npm install -g firebase-tools

Anschließend erstellt man auf firebase.google.com ein Projekt. Es ist ratsam ein Test-Projekt und ein Live-Projekt zu erstellen. Bei größeren Anpassungen spielt man die Version zunächst in die Test-Domain. Nach erfolgreichem Test der Webseite, kann die Version dann in das Live-Projekt übertragen werden. Das Kostenmodell kann pro Projekt gewählt werden.

Wie bereits erwähnt, gehen wir davon aus, dass die komplette statische Webseite lokal in einem Verzeichnis abgelegt ist. Für die Veröffentlichung auf Firebase wechselt man zunächst in dieses Projekt-Verzeichnis und macht den Login für Firebase (das muss nur beim ersten mal gemacht werden):

firebase login

Nach der Bestätigung, muss das Projekt initialisiert werden. Wir befinden uns immer noch im Verzeichnis, in dem unsere statische Webseite abgelegt ist.

firebase init

Bei der Auswahl der Services wählt man in unserem Anwendungsfall «Hosting» aus. Wir wollen unsere Files hosten und brauchen im Moment keine anderen Funktionen.

Danach muss die Verbindung zwischen dem lokalen Verzeichnis und dem Firebase-Projekt hinterlegt werden. Firebase will wissen, in welches Projekt diese Files veröffentlich werden sollen. Wir wählen unser Test-Projekt aus.

Die nächste Frage bezieht sich auf das Verzeichnis, indem unsere Webseite lokal liegt. Falls wir uns direkt im Root-Verzeichnis befinden, muss hier “.” angegeben werden (anstatt public). Bei der Frage ob die Datei index.html überschrieben werden soll, wählen wir “N”, da diese bereits durch die eigene Webseite vorhanden ist und daher nicht überschrieben werden darf. Auch die restlichen Fragen werden mit “N” beantwortet, da alle Files bereits vorhanden sind (z.B. 404-Error-Seite).

Soweit wäre alles vorbereitet. Man hat jetzt noch die Möglichkeit, die Seite (vor der Veröffentlichung) zu testen. Sie wird lokal mit dem Port 5000 (http://localhost:5000) zur Verfügung gestellt und wie folgt aufgerufen werden:

firebase serve

Wenn alles in Ordnung ist, kann die Seite veröffentlicht werden:

firebase deploy

Nach der Veröffentlichung erhält man einen direkten Link zum Projekt ({Projekt-Name}.firebaseapp.com).

Eigene Domain verknüpfen

Anschliessend kann das Projekt mit einem eigenen Domainnamen verknüpft werden. Für diesen Schritt muss man Firebase beweisen, dass man Zugriff auf die Domain hat. Dazu trägt man den TXT-Eintrag, den man von Firebase zur Verifikation erhalten hat, beim DNS-Server ein.

War die Verifikation erfolgreich, erhält man die nötigen A-Einträge. Diese müssen ebenfalls am DNS-Server hinterlegt werden. Der ganze Vorgang, bis alle DNS-Einträge synchronisiert sind, kann mehrerer Stunden dauern. Das SSL-Zertifikat wird von firebase nach erfolgreicher Live-Schaltung automatisch eingerichtet.