• Erledigen Sie die Anwendungssicherheit auf die richtige Weise! Erkennen, schützen, überwachen, beschleunigen und mehr…
  • Die Bereitstellung von Frontend-Anwendungen ist heute keine große Sache. Wir können eine Site innerhalb von Minuten mit modernen Technologien und Hosting-Plattformen bereitstellen. Es gibt viele Hosting-Plattformen da draußen. Für diesen Artikel interessieren wir uns jedoch für Netlify.

    Lassen Sie uns unsere Frontend-Anwendung bereitstellen, um Netlify.

    Frontend Applications

    Es gibt verschiedene Arten von Frontend-Bibliotheken und Frameworks wie Reagieren, Vue, Angular, etc.. Und die gute Nachricht ist, dass all diese den gleichen Paketpacker verwenden. Die Bereitstellung für alle Frontend-Anwendungen, die mit verschiedenen Bibliotheken und Frameworks erstellt wurden, ist ähnlich. Wir sind also gut für jede dieser Bibliotheken und Frameworks geeignet.

    Wir können auch Frontend-Anwendungen ohne Bibliotheken oder Frameworks erstellen. Dies ist die traditionelle Art, Frontend-Anwendungen einmal zu erstellen. Aber es ändert sich jetzt viel. So können wir Frontend-Anwendungen auf unterschiedliche Weise erstellen. Der Bereitstellungsprozess ist jedoch für alle diese verschiedenen Arten von Front-End-Anwendungen gleich.

    Wir werden sehen, wie wir einen bereitstellen Frontend-Anwendung erstellt mit einer Bibliothek und einer anderen ohne Bibliothek oder Framework. Lassen Sie uns minimale Front-End-Anwendungen für die Bereitstellung erstellen mit ReagierenEbene JavaScript.

    Einrichtung

    Für die Deployment-Demonstration erstellen wir einfache React- und JavaScript-Anwendungen. Sie erstellen sie auch, um sie zu verfolgen. Wenn Sie bereits über Front-End-Anwendungen verfügen, fahren Sie mit dem Abschnitt zur Bereitstellung fort.

    Wir müssen uns daran erinnern, dass der Einstiegspunkt jeder Frontend-Anwendung application index.html während der Bereitstellung zu Netlify.

    Wenn wir Anwendungen mit einer beliebigen Bibliothek oder einem Framework erstellt haben, müssen wir uns darüber keine Gedanken machen. Standardmäßig erstellen die Bibliotheken und Frameworks index.html Datei in der Build-Prozess für uns. Aber wenn wir einfache JavaScript-Anwendungen haben, müssen wir eine index.html Datei als Eintrag für unsere Bewerbung.

    Anwendung reagieren

    Führen Sie den folgenden Befehl aus, um eine React-App zu erstellen.

    npx create-react-app demo

    Sie können die App vor der Bereitstellung nach Belieben aktualisieren. Ich habe gerade eine Textzeile auf der Startseite aktualisiert. Aber egal :).

    Einfache JavaScript-Anwendung

    Führen Sie die folgenden Schritte aus, um eine einfache JavaScript-Anwendung zu erstellen.

    • Erstellen Sie einen Ordner mit dem Namen Demo.
    • Erstellen Sie drei Dateien namens index.html, styles.cssund Skripte.js.
    • Hier index.html ist der Einstiegspunkt für unsere Bewerbung.

    Lassen Sie Ihrer Kreativität freien Lauf und aktualisieren Sie die App. Ich füge der Anwendung nur einfache Dinge hinzu.

    Deploying

    Was die Bereitstellung von Frontend-Anwendungen für Netlify angeht, haben wir zwei Möglichkeiten. Wir können Anwendungen von GitHub, GitLab, BitBucket usw. direkt auf Netlify bereitstellen. Oder wir können die Bereitstellung mithilfe der Netlify CLI (Befehlszeilenschnittstelle). Es ist nicht zwingend erforderlich, alle zu kennen, um unsere Anwendungen bereitzustellen. Aber es ist gut an den verschiedenen Optionen, die wir für die Bereitstellung haben.

    Lassen Sie uns jeden von ihnen einzeln untersuchen.

    GitHub

    Wir verwenden GitHub, um unseren Code zu hosten. Sie müssen es nicht verwenden, da es nicht obligatorisch ist. Sie können nach Belieben andere Plattformen verwenden.

    Es gibt zwei Arten von Anwendungen, die wir bereitstellen können. Aber der Prozess sieht bei beiden ähnlich aus. Obwohl ich Ihnen beide zeigen werde. Es gibt hauptsächlich zwei Schritte darin. Sie sind

    • Übertragen Sie den Code auf GitHub.
    • Stellen Sie die Anwendung von GitHub mit Netlify bereit.

    Der erste Teil ist für beide gemeinsam Reagieren JavaScript Anwendungen. Beginnen wir den Bereitstellungsprozess mit dem ersten Schritt.

    Wir gehen davon aus, dass Sie Ihren Code nicht auf GitHub hatten. Wenn Sie Ihren Code auf GitHub haben, können Sie den Push-Code-Teil überspringen. Du brauchst git Werkzeug. Wenn Sie nicht haben git auf Ihrem Computer installiert ist, dann sollten Sie es installieren, bevor Sie fortfahren.

    #1. Übertragen von Code auf GitHub

    • Gehen Sie zu Ihrem GitHub-Konto und erstellen Sie ein Repo namens Demo.

    GitHub-Repository erstellen

    • Sie können das Repository wie folgt sehen, nachdem es erstellt wurde.

    GitHub-Repository

    Jetzt müssen wir unseren Code in das oben erstellte Repository verschieben. Um den Code zu pushen, können Sie den Befehlen im Repository oder den folgenden Befehlen folgen.

    • Terminal öffnen oder cmd.
    • Gehen Sie in Ihr Projektverzeichnis.
    • Initialisiere das Git mit git init
    • Fügen Sie die Änderungen zum lokalen git . hinzu git add .
    • Übernehmen Sie die Änderungen mit einer Nachricht git commit -m 'Completed application'
    • Verbinden Sie das Remote-Repository mit unserem lokalen Repository git remote add origin 'your_repo_path'. Ersetzen your_repo_path mit Ihrem Remote-Repository. Sie finden es im Repository ähnlich wie bei mir [email protected]:hafeezulkareem/demo.git
    • Drücken Sie jetzt den Code git push -u origin main
    • Das ist es; Wir haben unseren Code auf GitHub gepusht.

    Sie können den Code wie folgt in Ihrem Repository sehen.

    GitHub-Repository-Code

    Wir sind mit dem ersten Schritt des Pushens unseres Codes auf GitHub fertig. Wenn Sie eine Ebene bereitstellen JavaScript Anwendung, dann kann Ihr Code wie folgt aussehen.

    JavaScript-Repository

    Kommen wir zum nächsten Schritt und stellen unsere Anwendung auf Netlify bereit.

    #2. Bereitstellen von GitHub-Code auf Netlify

    Wenn Sie kein Konto in Netlify haben, erstellen Sie eines.

    • Gehen Sie zum Netlify Webseite.
    • Ins Konto einloggen.
    • Sie sehen eine Schaltfläche namens Neue Seite von Git, wie unten gezeigt.

    Netlify-Schaltfläche für neue Site

    • Klicken Sie auf die Schaltfläche, um mit der Bereitstellung zu beginnen.
    • Sie navigieren zu der Bereitstellungsseite, die wie folgt aussieht.

    Netlify-Bereitstellungsseite

    • Sie können auf der Seite verschiedene Code-Hosting-Plattformen verwenden. Wir verwenden GitHub. Klicken Sie also darauf.
    • Es öffnet sich ein neues Fenster, um sich wie folgt bei unserem GitHub-Konto anzumelden.

    Netlify GitHub-Authentifizierung

    • Melden Sie sich für die Netlify-Autorisierung bei Ihrem GitHub-Konto an.
    • Sobald Sie sich bei Ihrem GitHub-Konto anmelden, schließt sich das Fenster mit der Meldung Zugelassen.
    • Suchen Sie nun in der angegebenen Suchleiste nach Ihrem Repository-Namen.

    Netlify-Such-Repository

    • Wenn Sie nach dem Repository suchen, wird es nicht angezeigt, da wir unserem Repository keinen Zugriff auf Netlify gewährt haben. Sie sehen eine Schaltfläche namens Konfigurieren Sie Netlify auf GitHub.

    Repository konfigurieren

    • Klicken Sie auf die Schaltfläche und geben Sie Ihr GitHub-Kontokennwort ein, um den Zugriff zu bestätigen.

    GitHub Zugriff bestätigen

    • Sie navigieren zu einer Access-Seite, die wie folgt aussieht.

    Netlify GitHub-Zugangsseite

    • Scrollen Sie nach unten und Sie sehen einen Abschnitt namens Repository-Zugriff.

    Repository-Zugriff

    • Es gibt zwei Möglichkeiten. Wir können Zugriff auf alle unsere Repositorys gewähren oder auf einige davon, die dies erfordern. Es ist besser, Zugriff auf die Repositorys zu gewähren, die wir bereitstellen, und nicht auf alle.
    • Wähle aus Nur Repositorys auswählen Möglichkeit wie folgt.

    Repository-Option auswählen

    • Klicken Sie auf das Dropdown-Menü unten und suchen Sie nach dem Repository, das Sie bereitstellen möchten. Wählen Sie es aus.

    Ausgewähltes Repository

    • Klicken Sie auf Auswahl speichern .
    • Es wird umgeleitet zu Netlify Seite bereitstellen. Und Sie können das neue Repository sehen.

    Repository bereitstellen

    • Klicken Sie auf das Repository.
    • Es werden verschiedene Details wie ein bereitzustellender Zweig, ein Befehl zum Installieren von Paketen usw. angezeigt.

    Repository-Details

    • Wenn Sie den vollständigen Code in einem anderen Zweig als . haben Master, aktualisieren Sie es, indem Sie den Zweig aus der Dropdown-Liste auswählen.
    • Klicken Sie abschließend auf Site bereitstellen Taste. Es leitet Sie zum Dashboard weiter.
    • Die Bereitstellung der Site wird einige Zeit in Anspruch nehmen.

    Fortschritt der Site-Bereitstellung

    • Sie sehen die veröffentlichte Site, sobald sie bereitgestellt wurde.

    Veröffentlichte Site

    Das ist es.

    Wir haben unsere Site erfolgreich auf Netlify bereitgestellt. Sie können auf die Site-URL klicken, um sie live zu sehen.

    Demo-Site-URL

    Live-Demo

    Wir können die Site- und Domain-Einstellungen nach Belieben aktualisieren. Aber wir werden es hier nicht behandeln, da es ein weiteres vollständiges Thema darstellt, über das man sprechen kann. Unten sehen Sie die einfache JavaScript-Anwendung nach der Bereitstellung.

    Live-Demo

    Es gibt keinen Unterschied im Bereitstellungsprozess. Denken Sie jedoch daran, den Einstiegspunkt der Anwendung nicht zu vergessen, d. index.html.

    Jetzt ist es an der Zeit, eine andere Methode zur Bereitstellung unserer Frontend-Anwendung kennenzulernen.

    #3. Bereitstellen von Code mit Netlify CLI

    Die Netlify-CLI ist eine Befehlszeilenschnittstelle zum Bereitstellen von Frontend-Anwendungen über das Terminal oder die Befehlszeile. Dies ist nützlich, wenn Sie nicht einige zusätzliche Schritte ausführen möchten (obige Methode). Wie bei der obigen Methode können wir bereitstellen Reagieren (beliebige Bibliothek oder Framework) oder JavaScript um weitere Anwendungsbeispiele zu finden.

    Sie können die vollständige Dokumentation von Netlify-CLI hier Ihren Kundenservice-Helpdesk-Kontakt.. Es ist jedoch nicht erforderlich, eine Anwendung bereitzustellen. Sie können sich darauf beziehen, wenn Sie zum fortgeschrittenen Niveau wechseln.

    Sehen wir uns an, wie Sie die Netlify-CLI bereitstellen.

    Zuerst müssen wir es auf unserer Maschine installieren. Es ist als Knotenpaket verfügbar. Wir können es also mit dem installieren npm. Lassen Sie es uns mit dem folgenden Befehl installieren.

    npm install netlify-cli -g

    Die Flagge -g besteht darin, das Paket global zu installieren, damit wir von überall darauf zugreifen können. Sie sehen etwas Ähnliches wie im folgenden Bild.

    Netlify CLI-Installation

    Sehen wir uns die Schritte zur Bereitstellung an Reagieren und schlicht JavaScript Anwendungen, die Netlify CLI verwenden.

    • Führen Sie den Build-Befehl von React (oder einer anderen Bibliothek oder Framework)-Anwendung aus. Im Fall einer einfachen JavaScript-Anwendung müssen wir keine Befehle ausführen.
    npm run build
    • Der Build-Befehl kann je nach verwendeter Bibliothek oder Framework variieren.
    • Sie sehen einen Build-Ordner wie folgt.

    Bauen

    • Ändere dein Verzeichnis zu bauen Ordner bei React-Anwendung oder Projektordner bei JavaScript-Anwendung.

    Build reagieren

    Einfache JavaScript-Anwendung

    • Bevor wir mit den nächsten Schritten fortfahren, müssen wir a Netlify Konto. Gehe zu Netlify und erstellen Sie ein Konto und fahren Sie mit den nächsten Schritten fort.
    • Jetzt müssen wir uns über die CLI anmelden. Lassen Sie uns den folgenden Befehl ausführen, um sich anzumelden.
    netlify login
    • Der obige Befehl öffnet eine neue Registerkarte im Standardbrowser, um sich beim Netlify-Konto anzumelden. Sie gelangen zur Netlify-Site.
    • Geben Sie Ihre Zugangsdaten ein und melden Sie sich an. Sie werden aufgefordert, Autorisieren die CLI, nachdem Sie sich angemeldet haben.

    Netlify CLI-Autorisierung

    • Klicken Sie auf Autorisieren um sich zu authentifizieren. Danach sehen Sie eine Erfolgsmeldung.

    Erfolg bei der Netlify CLI-Autorisierung

    Erfolg bei der Netlify CLI-Autorisierung

    • Jetzt ist es an der Zeit, unsere Anwendung bereitzustellen. Führen Sie den folgenden Bereitstellungsbefehl aus.
    netlify deploy
    • Sie werden aufgefordert, die vorhandene Site auszuwählen oder eine neue zu erstellen. Wählen Sie (verwenden Sie Ihre Auf- und Abwärtspfeile) die Erstellen und konfigurieren Sie eine neue Site und schlagen Weiter.

    Netlify CLI-Bereitstellung - Erstellen

    •  Es wird sich dann zeigen Team um auszuwählen, verwenden Sie Ihre Pfeile, um auszuwählen, und drücken Sie Weiter.

    Netlify CLI-Bereitstellungsteam

    • Jetzt können Sie die Subdomain für Ihre Site eingeben. Es ist jedoch nicht obligatorisch. Netlify wird einen zufälligen für uns auswählen, wenn wir ihn verlassen. Wir können es später ändern, wenn wir wollen. Ich lasse es vorerst leer.

    Netlify CLI Deploy Subdomain

    • Es fordert uns auf, das Verzeichnis einzugeben, das wir bereitstellen möchten. Wir sind bereits zum Zielverzeichnis navigiert. Lass uns einfach zuschlagen Weiter. Sie können auch andere Verzeichnisse eingeben. Aber es ist nicht einfach. Daher ist es besser, zuerst zum Zielverzeichnis zu navigieren und dann bereitzustellen.

    Netlify CLI-Bereitstellungsverzeichnis

    • Es wird unsere Website für einen URL-Entwurf wie folgt bereitstellen.

    Netlify CLI-Bereitstellungsentwurf

    • Sie können Ihre Website anhand des URL-Entwurfs überprüfen und sicherstellen, dass alles korrekt ist.
    • Nachdem wir die Site überprüft haben, können wir sie mit dem folgenden Befehl in der Produktion bereitstellen.
    netlify deploy --prod

    Netlify CLI-Bereitstellung der Produktion

    • Es wird nur nach dem Verzeichnis gefragt. Geben Sie das Verzeichnis ein. Wenn wir uns im selben Verzeichnis befinden, dann drücke einfach Weiter.
    • Das ist es. Die Bereitstellung der Website ist abgeschlossen. Sie können die Website besuchen, um sie zu überprüfen.

    Netlify CLI-Bereitstellung der Produktion

    • Und hier ist das Ergebnis.

    Live-Demo

    Wir sind fertig mit der Bereitstellung unserer Website für Netlify mit Netlify-CLI. Sie können die Einstellungen der Site in Ihrem Netlify-Dashboard aktualisieren.

    Fazit

    Puh! Es ist ein langer. Sie benötigen keine weitere Anleitung, um Ihre Frontend-Anwendung auf Netlify bereitzustellen, nachdem Sie dies vollständig gelesen haben.

    Es gibt zwei Methoden, um unsere Anwendung auf Netlify bereitzustellen. Welcher folgen? Es gibt einen kleinen Vorteil, die erste Methode zu verwenden. Netlify aktualisiert den Build, wenn wir neuen Code in unser Site-Repository übertragen. Bei der CLI-Methode müssen wir dies jedoch manuell tun.

    Je nach Situation, in der wir uns befinden, ziehen wir immer eine Methode den anderen vor. Wie auch immer, Sie kennen beide Bereitstellungsmethoden. Um die Methode brauchen wir uns also keine Gedanken zu machen. Wählen Sie diejenige aus, die am besten zu Ihnen passt.

    Hinweis: Die im Artikel gezeigten Demo-Sites sind möglicherweise nach einiger Zeit nicht mehr öffentlich verfügbar.

    Brauchen Sie eine Alternative zu Netlify? Schau dir diese an beste statische Site-Hosting-Plattformen.

    Viel Spaß beim Bereitstellen 🙂