• Erledigen Sie die Anwendungssicherheit auf die richtige Weise! Erkennen, schützen, überwachen, beschleunigen und mehr…
  • Die Bereitstellung von Frontend-Anwendungen war vor einiger Zeit eines der großen Probleme. Aber heute ist es ein Kinderspiel. Sogar ein Neuling kann Anwendungen mit Hilfe von Super-Hosting-Diensten bereitstellen.

    Viele Hosting-Plattformen ermöglichen es uns, Frontend-Anwendungen in wenigen Minuten bereitzustellen. Unsere Website wird in wenigen Minuten öffentlich verfügbar sein.

    Ist es nicht toll?

    Ja, ist es.

    Erfahren Sie, wie Sie Front-End-Anwendungen auf applications bereitstellen Cloudflare-Seiten.

    Frontend Applications

    Bevor wir in den Bereitstellungsteil der Anwendung eintauchen, müssen wir eine Frontend-Anwendung erstellen.

    Wie es geht?

    Selbst du weißt es. Deshalb werden wir hier jetzt nicht darüber diskutieren.

    Wir wissen, dass es viele Bibliotheken und Frameworks für uns gibt Frontend-Anwendungen erstellen. Der Kernteil dieser Bibliotheken oder Frameworks ist jedoch JavaScript. Sie wissen all das, da Sie bereits nach einer Möglichkeit suchen, Ihre Frontend-Anwendung bereitzustellen. Sie können diesen Teil überspringen und zur Bereitstellung springen, wenn Sie nur nach dem Bereitstellungsteil suchen.

    Es gibt Reagieren, Vue, Angular, JavaScript und viele mehr. Man kann Anwendungen basierend auf ihren Anforderungen erstellen.

    Wie wir sehen, gibt es eine Reihe von Optionen zum Erstellen von Frontend-Anwendungen. Was ist mit der Bereitstellung? Ist das Verfahren für alle Frontend-Anwendungen gleich?

    Ja, der Bereitstellungsprozess ist für alle Frontend-Anwendungen gleich. Der Prozess, der Frontend-Anwendungen für die Bereitstellung bereit macht, kann jedoch je nach Bibliotheken und Frameworks variieren.

    Es wird einen Befehl zum Erstellen für die meisten Front-End-Anwendungen geben, die mit Bibliotheken und Frameworks erstellt wurden. Vielleicht wissen Sie schon davon. Wenn Sie nicht wissen, was es ist, müssen Sie es möglicherweise basierend auf Ihrer Frontend-Bibliothek oder Ihrem Framework untersuchen.

    Wir benötigen eine Anwendung zum Bereitstellen. Lassen Sie uns eine einfache Anwendung einrichten. Sie können diesen Teil überspringen, wenn Sie bereits eine Front-End-Anwendung bereitstellen möchten.

    Einrichtung

    Vor der Einrichtung müssen wir uns einer Sache bewusst sein. Der Einstiegspunkt muss sein index.html für unsere Frontend-Anwendung, um sie auf Cloudflare-Seiten bereitzustellen. Sie können die Datei finden index.html (Speicherort kann je nach Bibliothek und Framework variieren) nach dem Build-Prozess.

    Wir erstellen ein einfaches Reagieren Ebene JavaScript Bewerbung für die Demo. Sie können jede andere Bibliothek oder jedes andere Framework auswählen, mit dem Sie vertraut sind. Lass uns einrichten Reagieren Anwendung zuerst.

    Führen Sie den folgenden Befehl aus, um die React-Anwendung zu erstellen.

    npx create-react-app demo

    Aktualisieren Sie die App mit Ihrer Kreativität oder lassen Sie sie so, wie sie ist. Ich werde nur etwas ändern, um sicherzustellen, dass es am Ende richtig bereitgestellt wird.

    Lassen Sie uns nun eine einfache JavaScript-Anwendung erstellen.

    Eine index.html ist für uns Pflicht. Erstellen wir also die Datei mit dem Namen index.html. Jetzt können Sie weitere Dateien wie style.css, script.js, Bilder usw. hinzufügen, damit es schick aussieht. Aber es ist nicht zwingend erforderlich :).

    Unser einfaches Setup für die Bereitstellung ist nun abgeschlossen. Was nun? Es ist Bereitstellungszeit. Tauchen Sie ein.

    Deployment

    Cloudflare-Seiten ermöglichen es uns, unsere Frontend-Anwendung von GitHub bereitzustellen. Der Bereitstellungsprozess besteht also aus zwei Teilen.

    • Zuerst müssen wir unseren Anwendungscode auf GitHub haben.
    • Zweitens die Bereitstellung der Anwendung auf Cloudflare-Seiten.

    Meistens müssen Sie sich nicht um den ersten Teil kümmern, da wir unseren Code vom ersten Tag des Projekts an in Hosting-Plattformen pflegen. Sie können den ersten Teil überspringen und zum Bereitstellungsteil wechseln.

    Wenn Sie Ihren Code nicht an GitHub gepusht haben oder er sich auf anderen Code-Hosting-Plattformen befindet, müssen Sie ihn möglicherweise auf GitHub verschieben, um ihn auf Cloudflare-Seiten bereitzustellen. Sie können die folgenden Schritte ausführen, um Ihren Code auf GitHub zu übertragen, oder dies selbst tun.

    1. Code auf GitHub übertragen

    Haben Sie ein GitHub-Konto? Ja, ich denke in den meisten Fällen. Falls Sie noch keinen haben, erstellen Sie einen hier Ihren Kundenservice-Helpdesk-Kontakt..

    • Gehen Sie zu GitHub und melden Sie sich bei Ihrem Konto an.
    • Erstellen Sie ein Repository mit Ihrem Projektnamen. Hier benennen wir es wie die Demo.

    GitHub-Repository

    • Ein neu erstelltes Repository sieht wie folgt aus. Es zeigt einige git Befehle, um Ihr Repository mit Code zu füllen.

    GitHub-Repository

    Übertragen wir unseren Code in das Repository, das wir gerade erstellt haben. Sie können die folgenden Schritte ausführen oder es selbst tun, wenn Sie damit bereits vertraut sind. Beginnen wir damit, unser Projekt im Terminal oder cmd zu öffnen.

    • Initialisiere das Git mit git init Befehl.
    • Fügen Sie alle Ihre Änderungen zu lokalem Git mit dem Befehl hinzu git add ..
    • Übernehmen Sie die Änderungen mit changes git commit -m "message" Befehl. Ersetze das Nachricht mit einer passenden Nachricht für den Commit.
    • Jetzt müssen wir unser Remote-Repository mit dem lokalen Projekt verbinden.
    • Befehl zum Verbinden ist git remote add origin 'your_repo_path'. Ersetzen dein_repo_pfad mit Ihrem Remote-Repository. Der Repository-Pfad lautet wie folgt [email protected]:username/repo_name. Mein Repository-Pfad für die Demo is [email protected]:hafeezulkareem/demo.
    • Der letzte Schritt besteht darin, den Code in unser Remote-Repository zu übertragen. Wir können es mit dem Befehl tun git push -u origin main.

    Sehen wir uns die Code-Schnappschüsse im GitHub-Repository an.

    GitHub-Repository-Code

    JavaScript-Repository-Code

    Wir sind damit fertig, unseren Code auf Github zu übertragen. Unsere nächste Aufgabe besteht darin, es in den Cloudflare-Seiten. Beginnen wir ohne weiteres mit der Bereitstellung.

    2. Bereitstellung auf Cloudflare-Seiten

    Stellen wir die Site auf Cloudflare-Seiten bereit. Bevor wir fortfahren, müssen wir ein Cloudflare-Konto erstellen. Wenn Sie noch kein Konto in Cloudflare haben, erstellen Sie eines hier Ihren Kundenservice-Helpdesk-Kontakt.. Nachdem Sie das Cloudflare-Konto erstellt haben, können Sie Ihre Site bereitstellen.

    • Gehen Sie zum Cloudflare-Seiten Website.
    • Ins Konto einloggen. Sie sehen das Dashboard wie folgt.

    Cloudflare-Seiten-Dashboard

    • Wenn Sie sich beim . angemeldet haben Cloudflare Website, dann sehen Sie das Dashboard Ihrer Seiten möglicherweise nicht.
    • Navigieren Sie zum Dashboard der Seiten, indem Sie auf das klicken Seiten auf der rechten Seite Ihres Cloudflare-Dashboards. Siehe das Bild unten.
    Cloudflare-Dashboard
    Cloudflare-Dashboard
    • Klicken Sie auf Erstellen Sie ein Projekt Schaltfläche aus dem Dashboard der Seiten.
    Projekt anlegen
    Projekt anlegen
    • Sie navigieren zur folgenden Seite.

    Projekt - Erster Schritt

    • Klicken Sie auf GitHub-Konto verbinden um unser Anwendungs-Repository zu erhalten von GitHub.
    • Sie werden zur Seite mit den GitHub-Apps weitergeleitet, um Cloudflare-Seiten zu autorisieren.

    GitHub Cloudflare-Seiten-Autorisierung

    • Wir können Zugriff auf alle oder ausgewählte Repositories gewähren. Es ist besser, den Zugriff auf die Repositorys zu gewähren, die wir für Cloudflare-Seiten bereitstellen. Sie können auf alle Repositorys zugreifen, wenn Sie möchten.
    • Wählen Sie eine der beiden Optionen aus.
    • Wenn Sie ausgewählt haben Alle Repositorys, ist es nicht erforderlich, das spezifische Repository der Repositorys auszuwählen. Drück den Knopf Installieren und autorisieren.
    • Wenn Sie ausgewählt haben Nur Repositorys auswählen, dann müssen Sie Repositorys aus der Dropdown-Liste auswählen. Klick auf das Repositorys auswählen Dropdown-Liste, die nach der Auswahl des Nur Repositorys auswählen .

    Repository-Dropdown

    • Geben Sie Ihren Repository-Namen wie folgt ein.

    Such-Repository

    • Ihr Repository wird angezeigt, sobald Sie den Namen eingeben. Wählen Sie das Repository aus. Sie können das ausgewählte Repository wie folgt oben in der Liste sehen.

    Ausgewähltes Repository

    • Klicken Sie auf Installieren und autorisieren Taste. Sie werden zur Bereitstellungsseite von Cloudflare Pages weitergeleitet.
    • Sie sehen alle autorisierten Repositorys auf der Seite.

    Autorisierte Repositorys

    • Wählen Sie das Repository aus, das Sie bereitstellen möchten.

    Auswählen des bereitzustellenden Repositorys

    • Nachdem Sie das bereitzustellende Repository ausgewählt haben, klicken Sie auf das Einrichtung starten .

    Einrichtung starten

    • Es führt Sie zu den nächsten Schritten im Bereitstellungsprozess, d. Builds und Bereitstellungen einrichten.

    Builds und Bereitstellungen einrichten

    • Wenn Sie nach unten scrollen, finden Sie einen Abschnitt namens Build-Einstellungen. Wir müssen den passenden Build-Prozess für unsere Frontend-Anwendung auswählen.
    • Wir müssen den Build-Prozess basierend auf dem Framework oder der Bibliothek auswählen, die wir verwenden.
    • Klicken Sie auf die Rahmenvoreinstellung um alle Optionen zu sehen.

    Build - Framework-Voreinstellungsoptionen

    • Hier setzen wir ein Reagieren Einfaches JavaScript um weitere Anwendungsbeispiele zu finden.
    • Wenn Sie a . bereitstellen Reagieren Anwendung, dann wählen Sie React App erstellen aus dem Dropdown.
    • Für ein Einfaches JavaScript Anwendung ohne Pakete, dann wählen Sie Keine.
    React App Build-Konfiguration
    React App Build-Konfiguration

    Einfache JavaScript-Build-Konfiguration

    • Wenn Sie eine andere Front-End-Anwendung bereitstellen, wählen Sie die entsprechende Rahmenvoreinstellung Build-Option.
    • Wir können auswählen Keine und geben Sie den Brauch ein Build-Befehl auch. Wählen Sie es basierend auf Ihrer Anwendung aus.
    • Klicken Sie nach dem Setup der Build-Konfiguration auf das Speichern und bereitstellen Schaltfläche, um unseren Bereitstellungsprozess abzuschließen.
    • Sobald Sie auf die Auswahl speichern und bereitstellen Schaltfläche wird der Bereitstellungsprozess wie folgt gestartet.

    Bereitstellungsprozess

    • Der Vorgang dauert einige Minuten, um unsere Website bereitzustellen. Warten Sie und genießen Sie.
    • Nach Abschluss des Bereitstellungsprozesses wird Ihnen die Site-URL mit einer Erfolgsmeldung angezeigt.

    Bereitstellungserfolg

    • Besuchen Sie die Site mit der angegebenen URL.
    Live-Demo
    Live-Demo

    Live-Demo

    • Wir können die Einstellungen der Site von der Projektseite aus aktualisieren.

    Site-Einstellungen

    • Cloudflare-Seiten stellen die Updates automatisch bereit, wenn wir neuen Code in das Repository übertragen.

    Das ist es. Wir sind mit der Bereitstellung unserer Frontend-Anwendung auf Cloudflare-Seiten fertig.

    Fazit

    Hurra! Wir haben unsere Frontend-Anwendung auf den Cloudflare-Seiten bereitgestellt. Nach der Bereitstellung der Frontend-Anwendung müssen Sie möglicherweise Einstellungen ändern, Dinge aktualisieren usw.; Weitere Informationen finden Sie in der Cloudflare-Dokumentation hier Ihren Kundenservice-Helpdesk-Kontakt.. Wenn Sie die Schritte zum Bereitstellen eines bestimmten Framework-Leitfadens sehen möchten, können Sie zu der Rahmenleitfäden Abschnitt in der Dokumentation.

    Als nächstes, wie wäre es Bereitstellung des Frontends für Netlify?

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

    Viel Spaß beim Bereitstellen 🙂