5 Wege, eine React-App kostenlos bereitzustellen

In diesem Artikel werden fünf Möglichkeiten vorgestellt, wie Sie Ihre React-App mit Cloud-Plattformen wie Back4app und Netlify kostenlos bereitstellen können.

React hat sich zu einer beliebten Bibliothek für die Erstellung dynamischer Benutzeroberflächen in der modernen Webentwicklung entwickelt.

Der Weg von der Entwicklung bis zum Einsatz gerät jedoch oft an einem kritischen Punkt ins Stocken – den Kosten.

Der Bedarf an erschwinglichen Hosting-Lösungen ist mit der wachsenden Zahl von React-Anwendungen, die täglich entwickelt werden, gewachsen.

Wichtigste Erkenntnisse

• Lernen Sie mehrere Möglichkeiten kennen, eine React-Anwendung bereitzustellen, einschließlich AI, Drag and Drop und über CLI
• Überblick über die Erfahrungen bei der Bereitstellung in verschiedenen Clouds wie Back4app und Vercel
• Vergleichen Sie die Einsatzmöglichkeiten entsprechend Ihren Anforderungen

Überblick über die React-Hosting-Optionen

Stellen Sie Ihre React-App mit dem AI-Agent von Back4app bereit

Back4app ist eine Cloud-Plattform, die den Prozess der Erstellung, Bereitstellung und Verwaltung Ihrer Webanwendungen vereinfacht. Es ist eine großartige Option, um eine React-App zu hosten, und lassen Sie uns beginnen.

Back4app ermöglicht es Nutzern, React kostenlos einzusetzen und bietet verschiedene Dienste an, darunter ein Backend as a Service (BaaS), einen Container as a Service (CaaS) und einen KI-Agenten.

Der BaaS-Service von Back4app ermöglicht es Ihnen, das Backend Ihrer Web- und Mobile-Apps einfach einzurichten. Damit entfällt die Komplexität des Aufbaus und der Wartung der Infrastruktur, die normalerweise mit der Einrichtung eines Backends für Ihre React-Apps von Grund auf verbunden ist.

Der BaaS-Dienst bietet unter anderem Datenbankmanagement und Benutzerauthentifizierung.

Der CaaS-Service ermöglicht Ihnen die Verwaltung und Bereitstellung Ihrer Webanwendung mithilfe von Docker-Containern. Der Service schließt die Lücke zwischen Entwicklung und Produktion, indem er sich wiederholende Aufgaben automatisiert und Ihre serverseitige Infrastruktur verwaltet.

Der Back4app AI-Agent ermöglicht es Ihnen, Prompts für alle Back4app-Dienste zu verwenden und vereinfacht das Hosten einer React-App.

Sie können Code-Repositories verwalten, Anwendungen erstellen und verwalten und Webanwendungen bereitstellen.

Nachfolgend finden Sie eine detaillierte Anleitung, wie Sie Ihre React App mit dem Back4app AI Agent einsetzen können

Um Ihre React-App mithilfe des AI-Agenten und der Back4app-Container bereitzustellen, benötigen Sie einige Dinge:

• Ein Back4app-Konto. Besuchen Sie die Back4app-Website und klicken Sie auf die Schaltfläche ” Anmelden”, um ein Konto zu erstellen.
• Die Back4App Containers GitHub App wird auf Ihrem GitHub-Konto installiert.

Nachdem Sie die Back4app Containers GitHub App installiert haben, müssen Sie der App Zugriff auf das Repository gewähren, das Sie bereitstellen möchten.

Außerdem muss Ihr Repository über ein Dockerfile verfügen. Hier ist ein Beispiel für ein Dockerfile, das Sie Ihrem Repository hinzufügen können:

FROM node:17-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "npm", "run", "dev" ]

Beachten Sie, dass, wenn Ihr React-Projekt mit Vite erstellt wurde. Sie müssen auch die Datei vite.config.ts ändern.

Etwa so:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 8080,
  }
})

Dieser Codeblock konfiguriert den Server so, dass er Verbindungen auf allen Netzwerkschnittstellen akzeptiert und legt den Port fest, auf dem der Entwicklungsserver läuft.

In diesem Fall ist der Server unter http://localhost:8080 erreichbar .

Nachdem Sie Ihre Dockerdatei hinzugefügt und Ihre Vite-Konfigurationsdatei geändert haben, stellen Sie sicher, dass Sie die Änderungen in das GitHub-Repository übertragen.

Loggen Sie sich in Ihr Konto ein und klicken Sie auf die Schaltfläche “AI Agent”, um den Back4app AI Agent aufzurufen.

Dadurch gelangen Sie auf die Seite des Back4app AI-Agenten.

Als Nächstes fordern Sie die KI auf, “meine Web-App von GitHub aus bereitzustellen“.

Der Agent antwortet mit einer Liste von Dingen, mit denen Sie den Bereitstellungsprozess beginnen können, z. B. dem GitHub-Repository der App, die Sie bereitstellen möchten.

Geben Sie der KI die URL Ihres GitHub-Repositorys mit der Aufforderung “Here’s the URL to the GitHub Repository: <Your_GitHub_URL>” oder ähnlich.

Beantworten Sie alle weiteren Fragen, die der Agent Ihnen stellt, wie z. B. “die zu verteilende Verzweigung”, um den Verteilungsprozess zu starten.

Wie in der Abbildung oben zu sehen ist, stellt der KI-Agent gerade Ihre React-App bereit. Nach einer Weile sollte die Bereitstellung erfolgreich sein und die vom KI-Agenten bereitgestellte URL sollte funktionieren.

Wenn die Bereitstellung fehlschlägt, bietet der KI-Agent Optionen zur Fehlerbehebung und mögliche Korrekturen, um sicherzustellen, dass Ihre Anwendung erfolgreich bereitgestellt wird.

Um festzustellen, ob Ihre Bereitstellung abgeschlossen ist, können Sie den KI-Agenten nach dem aktuellen Bereitstellungsstatus Ihrer Anwendung fragen.

Stellen Sie Ihre React-App mit Netlify’s Drag-and-Drop bereit

Netlify ist eine Cloud-Computing-Plattform, die eine Reihe von Tools für die Webentwicklung, die Bereitstellung und das Hosting bietet.

Es ist eine beliebte Wahl für Entwickler und Unternehmen, die moderne Webanwendungen erstellen und bereitstellen möchten, ohne sich um die Verwaltung der Infrastruktur kümmern zu müssen.

Netlify kann Ihre Webanwendung aus jedem Quellcode-Repository erstellen, einschließlich GitHub, GitLab und Bitbucket. Es unterstützt viele statische Website-Generatoren und Frameworks wie React, Vue.js und Angular.

Mit Netlify können Sie Ihre Webanwendung auf einem globalen Netzwerk von Servern bereitstellen und kostenlos hosten.

Netlify bietet auch eine Reihe von kostenpflichtigen Tarifen an, die zusätzliche Funktionen wie benutzerdefinierte Domains, private Bereitstellungen und Teamzusammenarbeit umfassen.

Nachfolgend finden Sie eine detaillierte Anleitung, wie Sie Ihre React App mit Netlify’s Drag-and-Drop bereitstellen

Um Ihre App mit Netlify bereitzustellen, besuchen Sie die Website von Netlify und melden Sie sich bei Ihrem bestehenden Netlify-Konto an. Wenn Sie neu bei Netlify sind, klicken Sie auf die Schaltfläche “Anmelden”, um ein Konto zu erstellen.

Navigieren Sie zu Ihrem Konto-Dashboard und klicken Sie auf das Dropdown-Menü “Neue Website hinzufügen”. Wählen Sie in der Dropdown-Liste die Option “Manuell bereitstellen”.

Die Option “Manuell bereitstellen” führt Sie zu einer Seite, auf der Sie die Build-Dateien Ihrer React-App per Drag & Drop ablegen können.

Sie können die Build-Dateien Ihres React-Projekts abrufen, indem Sie den folgenden Befehl ausführen:

npm run build

Der obige Befehl erzeugt einen dist-Ordner in Ihrem Projekt. Ziehen Sie den dist-Ordner per Drag & Drop auf die Netlify-Seite. Dadurch wird der Bereitstellungsprozess gestartet.

Hinweis: Wenn Ihr Projekt mit create-react-app erstellt wurde, erzeugt der Befehl stattdessen einen Build-Ordner.

Nach erfolgreicher Bereitstellung leitet Netlify Sie zum Dashboard Ihrer Anwendung weiter, wo Sie die URL Ihrer bereitgestellten Anwendung finden.

Stellen Sie Ihre statische React-App mit GitHub Pages bereit

GitHub Pages ist ein Hosting-Service für statische Websites, der von GitHub, einer Plattform für Versionskontrolle und Codezusammenarbeit, angeboten wird.

Es ermöglicht Ihnen, Ihre Website direkt von Ihrem GitHub-Repository aus zu hosten und ist für das Hosting statischer Websites konzipiert, die keine serverseitige Verarbeitung erfordern.

Im Folgenden finden Sie eine Anleitung, wie Sie Ihre React-App mit GitHub Pages bereitstellen können

Um Ihre React-Anwendung mit GitHub Pages bereitzustellen, muss Ihr Projekt über ein GitHub-Repository verfügen.

Wenn Ihre Anwendung kein GitHub-Repository hat, müssen Sie eines erstellen, den Code Ihrer Anwendung hinzufügen, ihn committen und in das Repository pushen.

Als nächstes müssen Sie das Paket gh-pages in Ihrer Anwendung installieren. Sie werden dieses Paket verwenden, um einen Produktions-Build Ihrer Anwendung zu erstellen und ihn in den gh-pages-Zweig Ihres Repositorys zu verschieben.

Um das Paket gh-pages in Ihrem Projekt zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install gh-pages --save-dev

Fügen Sie nach der Installation des Pakets eine Homepage-Eigenschaft und ein Redeploy- und Deploy-Skript zu Ihrer package.json-Datei hinzu, wie im folgenden Codeblock gezeigt.

{
	"homepage": "http://<github-username>.github.io/<your-repository-name>",
	// other fields
}
"scripts": {
	"redeploy": "npm run build",
	"deploy": "gh-pages -d build",
	//other scripts  
}

Die Eigenschaft homepage sollte der Link zu Ihrem Repository sein. Ersetzen Sie github-username und your-repository-name im Codeblock durch Ihren GitHub-Benutzernamen und den Namen Ihres Repositorys.

Übertragen Sie die Änderungen in Ihr GitHub-Repository und führen Sie das Bereitstellungsskript in Ihrem Terminal aus.

Etwa so:

npm run deploy

Nachdem Sie den obigen Befehl ausgeführt haben, wird GitHub Pages Ihre Anwendung hosten. Sie können dies überprüfen, indem Sie über Ihren Webbrowser auf das Repository Ihrer Anwendung zugreifen.

Wenn Sie die Zweige im Repository überprüfen, finden Sie einen Zweig “gh-pages”.

Wählen Sie dann die Schaltfläche “Einstellungen” in der Navigationsleiste.

Wählen Sie auf der Seite “Einstellungen” die Option “Seiten” in der Seitenleiste. Auf der Registerkarte ” Seiten” finden Sie die URL Ihrer Anwendung.

Um Ihre Anwendung anzuzeigen, navigieren Sie in Ihrem Webbrowser zu der angegebenen URL. Beachten Sie außerdem, dass Sie jedes Mal, wenn Sie Änderungen an Ihrer Anwendung vornehmen, npm run deploy erneut ausführen müssen, um Ihre GitHub Pages-Seite zu aktualisieren.

Stellen Sie Ihre React-App mit Vercels CLI bereit

Vercel ist eine Cloud-Plattform, mit der Sie Webanwendungen und -dienste einfach bereitstellen und hosten können.

Es ist perfekt für die modernen Web-Frameworks, die Sie vielleicht verwenden, wie Next.js, React, Angular, Vue.js und mehr.

Vercel bietet eine Reihe von Funktionen, darunter Skalierbarkeit, serverlose Funktionen, globale Edge-Netzwerke usw., die den Entwicklungs- und Bereitstellungsprozess rationalisieren. Es bietet eine benutzerfreundliche Lösung für die Bereitstellung und Skalierung Ihrer Front-End-Anwendungen und statischen Websites.

Nachfolgend finden Sie eine Anleitung, wie Sie Ihre React App mit dem Vercel CLI bereitstellen können.

Um Ihre React-App mit Vercel bereitzustellen, müssen Sie ein Vercel-Konto haben. Wenn Sie noch keines haben, können Sie sich auf der Website von Vercel anmelden.

Sie können sich mit Ihrem GitHub-, GitLab- oder Bitbucket-Konto anmelden.

Als Nächstes müssen Sie die Vercel CLI auf Ihrem lokalen Rechner installieren, indem Sie den unten stehenden Befehl in Ihrem Terminal ausführen:

npm i -g vercel

Nach der Installation der CLI melden Sie sich bei Ihrem Vercel-Konto auf Ihrem Rechner an, um Ihre Anwendung bereitzustellen.

Führen Sie dazu den folgenden Befehl im Anwendungsverzeichnis der React-App aus, die Sie bereitstellen möchten:

vercel

Die CLI bietet Ihnen einige Optionen für die Anmeldung bei Vercel.

Sie können in diesem Abschnitt die Option auswählen, die Sie für die Anmeldung bei Vercel verwendet haben. Nachdem Sie sich erfolgreich angemeldet haben, können Sie Ihre Anwendung bereitstellen.

Geben Sie “Y” ein, um Ihre Anwendung bereitzustellen. Die Vercel-Befehlszeilenschnittstelle (CLI) bietet einige Eingabeaufforderungen, um Ihnen bei der Konfiguration der Bereitstellung zu helfen.

Nach der Konfiguration stellt die Befehlszeilenschnittstelle Ihre Anwendung bereit und zeigt eine URl an, mit der Sie über Ihren Webbrowser auf Ihre Anwendung zugreifen können.

Bereitstellen Ihrer React-App mit Firebase Hosting

Firebase ist eine von Google entwickelte Cloud-basierte Entwicklungsplattform, die eine Reihe von Tools und Diensten für die Erstellung und Verwaltung von mobilen und Web-Anwendungen bietet.

Es handelt sich um eine funktionsreiche Plattform, die verschiedene Tools und Dienste bietet, darunter eine Datenbank namens Firestore, Hosting und mehr. Firestore ist eine flexible, skalierbare Datenbank, die es Ihnen ermöglicht, Daten für die Entwicklung von Mobil-, Web- und Serveranwendungen zu speichern.

Firebase Hosting ist ein schneller und sicherer Webhosting-Service. Er bietet eine einfache Bereitstellung von Webanwendungen und statischen Inhalten mit einem globalen CDN, SSL-Zertifikaten für sichere Verbindungen und eine nahtlose Integration mit anderen Firebase-Diensten.

Nachfolgend finden Sie eine Anleitung, wie Sie Ihre React App mit Firebase Hosting bereitstellen können

Um auf die Funktionen von Firebase Hosting zugreifen zu können, müssen Sie ein Firebase-Konto besitzen. Wenn Sie noch keinen haben, besuchen Sie die Website von Firebase, um einen zu erstellen.

Sobald Sie angemeldet sind, klicken Sie auf die Schaltfläche “Zur Konsole gehen”, die Sie im oberen rechten Bereich finden. Erstellen Sie auf der Konsolenseite ein Projekt, indem Sie auf die Schaltfläche “Projekt hinzufügen” klicken.

Wenn Sie auf die Schaltfläche “Projekt hinzufügen” klicken, gelangen Sie auf eine neue Seite, auf der Sie Ihrem Projekt einen Namen geben können.

Nachdem Sie Ihrem Projekt einen Namen gegeben haben, klicken Sie auf die Schaltfläche “Weiter”. Auf der nächsten Seite können Sie nun das Projekt erstellen.

Nachdem Sie das Projekt erstellt haben, werden Sie zum Dashboard Ihres Projekts weitergeleitet. Navigieren Sie dort zum Dropdown-Menü “Erstellen” und wählen Sie “Hosting”. Daraufhin werden Sie auf eine andere Seite weitergeleitet.

Klicken Sie auf die Schaltfläche “Starten”.

Wenn Sie auf die Schaltfläche “Erste Schritte” klicken, werden Sie auf eine andere Seite weitergeleitet, auf der die Schritte für das Hosting Ihrer Anwendung mit Firebase beschrieben sind.

Der erste Schritt ist die Installation der Firebase CLI. Führen Sie dazu den folgenden Befehl in Ihrem Terminal aus:

npm install -g firebase-tools

Melden Sie sich dann bei Ihrem Firebase-Konto an, indem Sie den folgenden Befehl ausführen:

firebase login

Als nächstes initialisieren Sie ein Firebase-Projekt im Stammverzeichnis Ihrer Anwendung, indem Sie den folgenden Befehl ausführen:

firebase init

Dieser Befehl hilft Ihnen bei der Konfiguration und Vorbereitung Ihres Projekts für die Bereitstellung, indem er Sie durch eine Reihe von Eingabeaufforderungen führt, wie in der folgenden Abbildung gezeigt.

Nachdem Sie Ihr Projekt konfiguriert haben, führen Sie den folgenden Befehl aus, um Ihre Anwendung zu erstellen:

npm run build

Führen Sie abschließend den folgenden Befehl aus, um Ihre Anwendung bereitzustellen:

firebase deploy

Der obige Befehl wird Ihre Anwendung bereitstellen und eine URL bereitstellen, mit der Sie über einen Webbrowser auf die Anwendung zugreifen können.

Sie können auch über das Dashboard Ihres Projekts auf der Firebase-Website auf die URL der Anwendung zugreifen, wie in der folgenden Abbildung dargestellt.

Schlussfolgerung

Das Navigieren in der Deployment-Landschaft für React-Anwendungen muss nicht mit einem hohen Preis verbunden sein.

Die in diesem Artikel vorgestellten Bereitstellungsmethoden bieten praktische und kostenlose Alternativen für die Bereitstellung Ihrer React-App.

Wenn Ihre Anwendungen jedoch sehr viele Ressourcen verbrauchen, sollten Sie zu einem der budgetfreundlichen kostenpflichtigen Tarife wechseln.