Eine Website auf Firebase bereitstellen und kostenlos nutzen: Eine Anleitung

Vor nicht allzu langer Zeit habe ich einen Beitrag mit dem Titel „ So verbessern Sie den Website-Performance-Score von 35 auf 100 . „In diesem Beitrag habe ich versprochen, Ihnen zu zeigen, wie Sie Ihr Projekt auf Firebase bereitstellen und kostenlos nutzen können. Ich halte mein Versprechen!

Was ist Firebase?

Wahrscheinlich kennen einige von Ihnen Firebase noch nicht, deshalb möchte ich Ihnen kurz erklären, was es ist.

Feuerbasis ist eine Entwicklungsplattform für Mobil- und Webanwendungen, die eine Reihe von Tools und Diensten bereitstellt, mit denen Entwickler ihre Anwendungen einfacher erstellen und skalieren können.

Es bietet Funktionen wie eine Echtzeitdatenbank, Authentifizierung, Hosting, Cloud-Speicher und mehr. Firebase bietet außerdem Backend-Funktionen und Infrastruktur, sodass sich Entwickler auf die Entwicklung ihrer Apps konzentrieren können, ohne sich um die Serververwaltung oder die Einrichtung einer komplexen Infrastruktur kümmern zu müssen.

Insgesamt vereinfacht Firebase den Entwicklungsprozess und ermöglicht es Entwicklern, schnell hochwertige Anwendungen zu erstellen.

Heute verwenden wir die Funktion „Hosting“, um unser Next.JS-Projekt zu speichern. In diesem Beispiel zeige ich Ihnen, wie Sie die statische Version Ihres Projekts hosten. Als erstes müssen Sie ein Konto registrieren.

So registrieren Sie ein Firebase-Konto

Um ein Konto bei Firebase zu registrieren, öffnen Sie es https://firebase.google.com/ , und klicken Sie auf „Erste Schritte“.

Anschließend müssen Sie ein Google-Konto erstellen oder ein bestehendes verwenden. Sobald Sie mit dem ersten Schritt fertig sind, landen Sie auf dem Firebase-Kontrollfeld. Der nächste Schritt besteht darin, ein Projekt zu erstellen.

So erstellen Sie ein Projekt auf Firebase

Um ein Projekt zu erstellen, müssen Sie drei einfache Schritte ausführen:

1. Klicken Sie auf „Projekt hinzufügen“ und geben Sie ihm im neuen Fenster einen Namen.

2. Aktivieren oder deaktivieren Sie die Google Analytics-Funktionalität für das Projekt und klicken Sie auf „Projekt erstellen“.

Nach ein paar Minuten wird Ihr Projekt erstellt.

So nutzen Sie Firebase kostenlos

Sobald Sie ein Projekt erstellt haben, können Sie es in Ihrem Dashboard sehen. Standardmäßig nutzen Sie den Spark-Plan . Ist dies nicht der Fall, müssen Sie auf den Spark-Plan umstellen.

Der Spark-Plan ist ein kostenloser Plan ohne monatliche Kosten . Es gibt einige Einschränkungen, aber es ist mehr als ausreichend, um Ihr Projekt zu starten, insbesondere wenn Sie planen, es als Hosting-Plattform für Ihre statische Website zu verwenden.

Die vollständige Beschreibung des Plans finden Sie hier Verknüpfung .

Es ist Zeit, Firebase-Hosting einzurichten.

So richten Sie Firebase Hosting ein

Auch das Einrichten des Firebase-Hostings ist recht einfach. Melden Sie sich bei Ihrem Konto an und wählen Sie Ihr Projekt aus. Klicken Sie dann im linken Menü auf „Build“ und wählen Sie im Dropdown-Menü „Hosting“ aus.

Im neuen Fenster sehen Sie einen Begrüßungsbildschirm. Klicken Sie auf „Erste Schritte“.

Um Ihr Projekt zu hosten, müssen Sie zunächst die Firebase-CLI einrichten.

Öffnen Sie Ihr Terminalfenster und geben Sie den folgenden Befehl ein:

 npm install -g firebase-tools

Geben Sie nach Abschluss der Einrichtung Folgendes in Ihr Terminal ein:

 firebase login

Sie gelangen zum Anmeldebildschirm, um den Zugriff zu autorisieren.

Der nächste Schritt besteht darin, im Terminalfenster zu Ihrem Projektordner zu navigieren, in dem Sie Ihre statische Website gespeichert haben.

Führen Sie den folgenden Befehl aus:

 firebase init

Wenn Sie alles richtig gemacht haben, sollte in Ihrem Terminalfenster Folgendes angezeigt werden.

Wählen Sie in der Liste der Optionen „Hosting: Dateien für Firebase Hosting konfigurieren und (optional) GitHub Action Deployments einrichten.“ Verwenden Sie zum Navigieren die Pfeiltasten auf Ihrer Tastatur, drücken Sie zur Auswahl die Leertaste und drücken Sie dann die Eingabetaste.

Wählen Sie als Nächstes ein Konto aus der Liste aus und drücken Sie die Eingabetaste.

Da wir bereits über ein Projekt verfügen, wählen Sie „Vorhandenes Projekt verwenden“ aus der Liste und dann das Projekt aus, das Sie im vorherigen Schritt erstellt haben.

Standardmäßig ist das öffentliche Verzeichnis auf „public“ eingestellt. Wenn Sie ein anderes Verzeichnis angeben möchten, können Sie dies im nächsten Schritt tun. Mein Next.js-Projekt erstellt beispielsweise eine statische Version der Website im Verzeichnis „out“, daher spezifiziere ich sie in diesem Schritt.

Die letzten beiden Konfigurationsfragen beziehen sich auf Ihre Website-Einstellungen.

• „Als Single-Page-App konfigurieren (alle URLs in /index.html umschreiben)“ – Ja

• „Automatische Builds und Bereitstellungen mit GitHub einrichten?“ - Nein

Wir sind mit der Einrichtung fertig. Jetzt ist es an der Zeit, unser Projekt in Firebase bereitzustellen.

So stellen Sie die Website in Firebase bereit

Nachdem Sie alle Konfigurationen abgeschlossen haben, können Sie Ihre Website im Firebase-Hosting bereitstellen.

Geben Sie im Terminalfenster in Ihrem Projektverzeichnis den folgenden Befehl ein:

 firebase deploy --only hosting

Wenn alles gut geht, werden Ihnen die URLs angezeigt, über die Sie auf Ihre Website zugreifen können.

Ich hoffe, Sie fanden diesen Artikel nützlich! Im nächsten Teil zeige ich Ihnen, wie Sie einen benutzerdefinierten Domänennamen für Ihr Firebase-Projekt einrichten.

Bleiben Sie dran!

Auch hier veröffentlicht