3 Möglichkeiten, eine React-Anwendung auf Netlify bereitzustellen

React ist eine beliebte JavaScript-Bibliothek zum Erstellen funktionaler Benutzeroberflächen in dynamischen Webanwendungen. Vielleicht haben Sie viele Stunden damit verbracht, React-Code zu debuggen, um das nächste Instagram oder Airbnb zu bauen.

Unabhängig davon, was Sie bauen, ist das Endziel immer, Ihre Arbeit der Welt zu präsentieren. Hier kommen Hosting-Plattformen wie Netlify ins Spiel. Sie bieten eine Reihe von Tools, die den Bereitstellungsprozess rationalisieren.

Folgen Sie den Anweisungen, um zu erfahren, wie Sie Ihre React-Anwendungen mit den benutzerfreundlichen Bereitstellungstools von Netlify bereitstellen.

Was ist Netlify?

Netlify ist eine Cloud-basierte Entwicklungsplattform mit Funktionen, die das Hosten und Bereitstellen von Anwendungen im Web erheblich vereinfachen. Einfach ausgedrückt bietet es eine Reihe von Tools und Diensten, die den Prozess rationalisieren und vereinfachen, sodass Sie eine Webanwendung innerhalb von Sekunden bereitstellen und hosten können.

Die Hauptfunktionen von Netlify

Netlify verfügt über eine Reihe von Funktionen, die den Bereitstellungsprozess vereinfachen.

• Es bietet grundlegende Zugriffs- und Versionskontrollfunktionen, damit Entwicklungsteams effizient und effektiv an Projekten zusammenarbeiten können.
• Es bietet sichere Hosting-Services, die Sie an Ihre Bedürfnisse anpassen können. Darüber hinaus bietet es automatische Backups im Falle eines Datenverlusts.
• Es lässt sich nahtlos in beliebte Cloud-Entwicklungsdienste wie GitHub, GitLab und Bitbucket integrieren.
• Es bietet Funktionen, die das Einrichten und Konfigurieren einer benutzerdefinierten Domänen-URL und eines SSL-Zertifikats für Ihre Anwendung vereinfachen.

Erstellen Sie eine Demo-React-Anwendung

1. Um loszulegen, müssen Sie zuerst Erstellen Sie eine Demo-React-Anwendung die Sie schließlich auf Netlify bereitstellen werden. Führen Sie den folgenden Befehl auf Ihrem Terminal aus, um eine React-Anwendung zu erstellen:

   npx create-react-app demo-react-netlify-app

2. Führen Sie als Nächstes diesen Terminalbefehl aus, um den Entwicklungsserver hochzufahren:

   npm starten

   Fahren Sie fort und sehen Sie sich die Ergebnisse in Ihrem Browser an http://localhost: 3000.
3. Führen Sie abschließend diesen Befehl aus, um eine produktionsbereite Version Ihrer Anwendung zu erstellen:

   npm-Run-Build

   Dieser Befehl generiert die erforderlichen Produktionsdateien und Assets in einem neuen Ordner im Stammverzeichnis mit dem Namen build. Der Build-Ordner erfasst eine minimierte Version der gesamten Anwendung, die alles enthält, was zum Bereitstellen der Anwendung erforderlich ist.

Stellen Sie die React-Anwendung auf Netlify bereit

Netlify bietet drei Methoden, mit denen Sie Ihre React-Anwendung bereitstellen können. Du kannst:

• Importieren Sie Ihr Projekt von einem Git-Repository-Host wie GitHub.
• Verwenden Sie die Drag-and-Drop-Funktion.
• Verwenden Sie das Befehlszeilentool, die CLI von Netlify.

Bereitstellen mithilfe der GitHub-Importfunktion

1. Beginnen Sie mit Erstellen eines Repositorys auf GitHub um Ihre React-Anwendungsprojektdateien zu speichern. Alternativ können Sie Ihre Projektdateien auch auf jedem anderen unterstützten Git-Anbieter wie GitLab, Bitbucket oder Azure DevOps hosten.
2. Als nächstes melden Sie sich für ein Konto an Netlify. Navigieren Sie nach der Anmeldung zu Ihrem Konto-Dashboard und wählen Sie die aus Websites Tab.
3. Klick auf das Aus Git importieren Taste.
4. Wählen Sie Ihre bevorzugte Git-Anbieterplattform aus. Netlify fordert Sie auf, sich bei Ihrem Git-Anbieter zu authentifizieren, um ihm Zugriff auf Ihr Konto und Ihre Repositories zu gewähren.
5. Sobald Sie dies getan haben, zeigt Netlify eine Liste mit Repositories auf Ihrem Git-Provider an. Wählen Sie das React-Projekt-Repository aus, das Sie ursprünglich an Ihren Git-Anbieter gepusht haben.
6. Nachdem Sie das Repository ausgewählt haben, müssen Sie angeben, wie Netlify den Bereitstellungsprozess handhaben soll. Normalerweise müssen Sie für statische Websites keine Änderungen vornehmen, aber für dynamische Websites wie React-Anwendungen müssen Sie die Build-Einstellungen festlegen. Glücklicherweise erkennt Netlify standardmäßig automatisch das zum Erstellen der Anwendung verwendete Framework und füllt die Felder mit den erforderlichen Build-Einstellungen aus.
7. Abschließend klicken Website bereitstellen um den Vorgang abzuschließen.

Klicken Sie auf die bereitgestellte URL, um die Anwendung in Ihrem Browser anzuzeigen. Wenn Sie eine benutzerdefinierte Domain-URL haben, können Sie Netlify anweisen, sie mit Ihrer Website zu verwenden, indem Sie die URL in den Einstellungen der Website aktualisieren.

Bereitstellen mit der Drag-and-Drop-Funktion

Dies ist die einfachste Methode, um Ihre React-Anwendung auf Netlify bereitzustellen. Sie müssen nur den Build-Ordner per Drag-and-Drop in die Drag-and-Drop-Benutzeroberfläche von Netlify ziehen.

1. Wählen Sie auf dem Dashboard von Netlify die aus Grundstück Tab. Klicken Sie anschließend auf Neue Website hinzufügen und dann auswählen Manuell bereitstellen aus den Dropdown-Menüoptionen.
2. Wählen Sie auf der Drag-and-Drop-Funktionsseite den Ordner mit den React-Build-Dateien aus und legen Sie ihn in dieser Benutzeroberfläche ab. Das Projekt wird sofort auf Netlify bereitgestellt. Alternativ können Sie auf klicken Zum Hochladen durchsuchen, um Ihren Build-Ordner aus dem Dateisystem auszuwählen.

Bereitstellung über die Befehlszeilenschnittstelle von Netlify

Mit der Befehlszeilenschnittstelle (CLI) von Netlify können Sie Ihre React-Anwendung direkt von einem Terminal aus bereitstellen. Darüber hinaus können Sie mit der CLI von Netlify die kontinuierliche Bereitstellung so konfigurieren, dass neue Updates automatisch bereitgestellt werden, wenn Sie sie in Ihr Git-Repository übertragen und übertragen.

1. Führen Sie den folgenden Befehl auf Ihrem Terminal aus, um die CLI von Netlify zu installieren:

   npm Installieren netlify-cli-g

2. Führen Sie nun den folgenden Befehl aus, um Ihre Anwendung bereitzustellen. Stellen Sie vor der Bereitstellung sicher, dass Sie sich im Arbeitsverzeichnis des Projekts befinden.

   Netlify bereitstellen

   Die CLI von Netlify fordert Sie auf, Änderungen an Ihrem Konto zuzulassen. Nachdem Sie die Erlaubnis erteilt haben, geben Sie den Namen des Teamkontos an, den Sie bei der Anmeldung angegeben haben. Wählen Sie dann, ob Sie das Verzeichnis der App mit einer bestehenden Website verknüpfen oder eine neue erstellen und konfigurieren möchten eins. Schließen Sie ab, indem Sie einen benutzerdefinierten Website-Namen und den Namen Ihres Build-Ordners angeben.
3. Die CLI stellt eine Entwurfsversion Ihrer Anwendung bereit. Überprüfen Sie, ob alles wie erwartet funktioniert.
4. Führen Sie abschließend den folgenden Befehl aus, um Ihre Anwendung für die Produktion bereitzustellen.

   Netlify bereitstellen --prod

Vergleich der drei Bereitstellungsmethoden

Die GitHub-Importmethode ist die effizienteste für die Bereitstellung von Produktions-Apps, da Sie damit eine Verknüpfung herstellen können Ihr Git-Repository direkt zu Netlify und halten Sie Ihren Code mit der Live-Website oder -Anwendung synchron. Wenn Sie Änderungen an Ihr Git-Repository übertragen und übertragen, aktualisiert Netlify die Website automatisch.

Die Drag-and-Drop-Methode ist einfacher für die Bereitstellung statischer Websites, da sie keine Programmierung oder Einrichtung erfordert. Es erlaubt jedoch keine automatischen Aktualisierungen, wenn Sie Änderungen an Ihrem Repository vornehmen.

Die CLI-Methode ist die umfassendste, da sie Ihnen die volle Kontrolle über den Bereitstellungsprozess gibt und benutzerdefinierte Konfigurationen ermöglicht. Diese Methode eignet sich am besten, wenn Sie Netlify bereits gut verstehen und mit der Befehlszeile arbeiten können.

Alle drei Methoden sind nützlich, um Apps auf Netlify bereitzustellen. Letztendlich hängt die Wahl, welche verwendet werden soll, von den Anforderungen jedes einzelnen Projekts ab.

Verwenden von Netlify zum Bereitstellen anderer Anwendungen

Netlify ist ein leistungsstarkes und vielseitiges Tool, mit dem Sie andere Anwendungen als nur React bereitstellen können. Sie können damit statische Websites und dynamische Anwendungen bereitstellen und hosten, die mit verschiedenen Frameworks wie Angular erstellt wurden.

Die benutzerfreundliche Oberfläche erleichtert die Konfiguration, Verwaltung und Bereitstellung Ihrer APIs.