Obwohl das Firebase-Hosting die Ausf\u00fchrung von Node.js\/JavaScript-Code unterst\u00fctzt, 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.<\/p>\n
Einstieg<\/h3>\n
Um loszulegen, muss Node.js auf Ihrem System installiert sein. Sie k\u00f6nnen das Node.js-Paket zur Installation auf der offiziellen Website herunterladen<\/a>.<\/p>\n Sobald Sie Node.js auf Ihrem System installiert haben, gehen Sie zur Firebase-Konsole<\/a> und erstellen Sie ein Projekt, indem Sie auf das Feld "Projekt hinzuf\u00fcgen" klicken. F\u00fcllen Sie alle Informationen nach Aufforderung aus.<\/p>\n Nachdem Sie das Firebase-Projekt erstellt haben, werden Sie zum Projekt-Dashboard weitergeleitet. Klicken Sie in der linken Seitenleiste auf \u201eHosting“ und dann auf \u201eErste Schritte“. Es \u00f6ffnet sich eine Seite, auf der Sie Anweisungen zur Bereitstellung finden. Wir werden dies im n\u00e4chsten Teil des Tutorials durchgehen.<\/p>\n Nachdem wir ein Projekt auf Firebase erstellt haben, k\u00f6nnen wir mithilfe einiger Befehle eine statische Website auf dem Firebase-Hosting bereitstellen. Dazu m\u00fcssen Sie zuerst Firebase CLI installieren und dann lokal konfigurieren.<\/p>\n F\u00fcr die Bereitstellung m\u00fcssen Sie zun\u00e4chst die Firebase-CLI installieren. Sie haben Node.js installiert, verwenden Sie also npm, um CLI zu installieren. \u00d6ffnen Sie das Terminal und installieren Sie Firebase CLI mit npm wie folgt:<\/p>\n Beachten Sie, dass wir die Firebase-Tools global mit installieren 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.<\/p>\n Nachdem Sie Ihr Google-Konto mit Firebase CLI autorisiert haben, m\u00fcssen Sie Firebase im Stammverzeichnis des Projekts initialisieren. F\u00fchren Sie dazu den folgenden Befehl in Ihrem Projekt-Root-Verzeichnis aus.<\/p>\n Beim Ausf\u00fchren des obigen Befehls fragt CLI nach einer anderen Option zur Auswahl. Sie sollten die Option ‚Hosting‘ ausw\u00e4hlen, indem Sie mit einem Pfeil navigieren und dann die Leertaste dr\u00fccken. Dr\u00fccken Sie die Eingabetaste, nachdem Sie die Option "Hosting" ausgew\u00e4hlt haben.<\/p>\n W\u00e4hlen Sie als N\u00e4chstes das Projekt aus, das Sie in der Firebase-Konsole erstellt haben. Dr\u00fccken Sie die Eingabetaste. Die n\u00e4chste Frage w\u00e4re Was m\u00f6chten Sie als Ihr \u00f6ffentliches Verzeichnis verwenden? (\u00d6ffentlichkeit). Hier muss man nichts machen. Dr\u00fccken Sie einfach die Eingabetaste.<\/p>\n F\u00fcr die n\u00e4chste Frage Als Single-Page-App konfigurieren (alle URLs in \/index.html umschreiben)? (J\/N), dr\u00fccken Sie N und dr\u00fccken Sie die Eingabetaste, da wir keine einseitige Anwendung bereitstellen.<\/p>\n Nach diesem Befehl sehen Sie einige Dateien, die in Ihrem Stammverzeichnis zusammen mit dem Lassen Sie uns nun statische HTML-Seiten erstellen. Da dieses Tutorial nur zu Demozwecken dient, erstelle ich grundlegende HTML-Seiten.<\/p>\n public\/index.html<\/strong><\/p>\n public\/about.html<\/strong><\/p>\n public\/style.css<\/strong><\/p>\n Dies sind unsere statischen Seiten, die wir auf dem Firebase-Hosting bereitstellen werden.<\/p>\n Wenn Sie das Projekt vor der Bereitstellung lokal testen m\u00f6chten, f\u00fchren Sie den Befehl serve wie folgt aus:<\/p>\n Es startet Ihren lokalen Server unter http:\/\/localhost:5000<\/a>. Testen Sie Ihr Projekt und wenn alles in Ordnung ist, stellen Sie es mit dem Befehl bereit:<\/p>\n Nach Abschluss der Bereitstellung sollte die Hosting-URL in der Konsole angezeigt werden.<\/p>\nStatische Website auf Firebase Hosting bereitstellen<\/h3>\n
Firebase-CLI installieren<\/h4>\n
npm install -g firebase-tools<\/code><\/pre>\n-g<\/code>. Auf diese Weise k\u00f6nnen Sie Firebase-Befehle von jedem Verzeichnis auf Ihrem Computer ausf\u00fchren. F\u00fchren Sie nun vom Terminal aus den n\u00e4chsten Befehl aus:<\/p>\nfirebase login<\/code><\/pre>\nInitialisieren und Bereitstellen<\/h4>\n
firebase init<\/code><\/pre>\n![\"Statische](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20272-6081d60826c88.png\")
<\/a><\/p>\npublic<\/code>Ordner erstellt wurden. Dieses public<\/code>Verzeichnis dient als Root f\u00fcr die Bereitstellung. In diesem public<\/code>Verzeichnis m\u00fcssen Sie Ihre Projektdateien speichern.<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is Index Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is About Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\nh1 {\n\u00a0\u00a0\u00a0\u00a0color: blueviolet;\n}<\/code><\/pre>\nfirebase serve<\/code><\/pre>\nfirebase deploy<\/code><\/pre>\n