8 kostenlose React-App-Hosting-Dienste11 min read

Sie haben also eine React-App erstellt, sind sich aber nicht sicher, wie und wo Sie sie hosten sollen. In diesem Artikel führen wir Sie durch 8 kostenlose React-Hosting-Dienste und zeigen Ihnen, wie wir sie bereitgestellt haben diese React-App Verwenden Sie jeden einzelnen und erzählen Sie Ihnen, was wir dabei gelernt haben.

Wir haben unsere App in Figma mit erstellt Anima Plugin, das es uns dann ermöglichte, Funktionalität, Reaktionsverhalten und Rich Media hinzuzufügen Exportieren Sie entwicklungsbereiten React-Code für die gesamte Benutzeroberfläche. Für den Entwurf und die Bereitstellung haben wir einen Tag gebraucht.

Wo Sie Ihre React-App kostenlos hosten können

Dank der Verbreitung komponentenbasierter Frameworks wie React gibt es immer mehr serverlose Hosting-Lösungen. Amazon AWS, Microsoft Azure und Google Cloud sind derzeit die dominierenden Plattformen. However, there’s a growing shift towards dedicated frontend hosting services that require less effort, and can get you up and running in no time—and most include CI/CD. Hier sind die 8 kostenlosen React-App-Hosting-Dienste, die wir getestet haben:

1. Netlify

2. Vercel

3. AWS Amplify

4. Feuerbasis

5. GitHub-Seiten

6. GitLab-Seiten

7. Rendern

8. Anstieg

Lassen Sie uns detaillierter auf diese kostenlosen React-App-Hosting-Dienste eingehen und zeigen, wie wir mit jedem einzelnen eine React-App bereitgestellt haben. 

Netlify

Hintergrund

Netlify wurde 2014 gegründet und konzentrierte sich von Anfang an auf das Hosten statischer Websites. Aufgrund seines großzügigen kostenlosen Kontingents zog es viele Entwickler an. Ein paar Jahre später entwickelte sich Netlify zu einem der beliebtesten JAMstack- und statischen Website-Hosts überhaupt.

Wie zu verwenden

1. Idealerweise registrieren oder melden Sie sich mit GitHub an. Dadurch wird sichergestellt, dass Sie auf die Repositorys in Ihrem Profil zugreifen und diese schnell bereitstellen können.
2. Klicken Sie nach der Anmeldung auf „Neue Site hinzufügen“ und wählen Sie „Vorhandenes Projekt importieren“.
3. Klicken Sie dann auf GitHub als Ihren Anbieter.
4. Wählen Sie die „Bank-Website“ oder wie auch immer Ihr Projektname lautet.
5. Passen Sie die Bereitstellungseinstellungen an (im Fall unserer Website funktionieren die Standardeinstellungen einwandfrei) und klicken Sie dann auf „Site bereitstellen“.
6. Nach der Bereitstellung können Sie es auf einem öffentlichen URL anzeigen und mit der Welt teilen. Juhuu!

Hier ist die Live-App, die auf Netlify bereitgestellt wird.

Vor- und Nachteile

Netlify lässt sich einfach einrichten und bereitstellen, ganz zu schweigen davon, dass es einer der schnellsten Dienste ist, die wir hier getestet haben. Ein Nachteil besteht darin, dass Sie auf einen kostenpflichtigen Plan upgraden müssen, wenn Sie Mitarbeiter und/oder ein Team benötigen.

Vercel

Hintergrund

Vercel (ursprünglich bekannt als Zeit) wurde 2015 gegründet und erlangte schnell großen Ruhm. Sie sind die Betreuer von Next.js, einem beliebten React-Framework zum Erstellen von Websites. Sie bieten nichtkommerziellen Websites ein kostenloses Kontingent sowie Möglichkeiten, ihr Edge-Netzwerk für serverlose Funktionen zu nutzen.

Wie zu verwenden

1. Melden Sie sich an oder registrieren Sie sich bei GitHub.
2. Klicken Sie auf das Dropdown-Menü „Neu hinzufügen …“ und wählen Sie „Projekt“ aus.                                                             
3. Wählen Sie die „Bank-Website“ oder Ihr Lieblings-React-Projekt.
4. Wir haben die Standardeinstellungen für die Bereitstellungseinstellungen übernommen und dann auf „Bereitstellen“ geklickt.
5. Nach einiger Zeit konnten wir die Website bereitstellen.

Hier ist der Live-URL.

Vor- und Nachteile

Vercel benötigt einige Zeit, um den Installationsteil des Bereitstellungsprozesses zwischenzuspeichern, aber danach ist es einer der schnellsten Dienste. Es zeigt Vorschau-Deployments für jeden Branch an, den Sie pushen, und das dank Caching schnell.

AWS Amplify

Hintergrund

AWS ist eine riesige Sammlung von Cloud-Produkten und Amplify wird als einfache Möglichkeit beworben, an einige davon zu gelangen. Mit AWS Amplify können Sie schnell Full-Stack-Anwendungen auf AWS erstellen, versenden und hosten und haben dabei die Flexibilität, die Breite der AWS-Services zu nutzen, wenn sich die Anwendungsfälle weiterentwickeln.

Wie zu verwenden

1. Registrieren Sie sich oder melden Sie sich bei AWS an, suchen Sie dann nach AWS Amplify und klicken Sie auf „Erste Schritte“.
2. Wählen Sie GitHub und autorisieren Sie es (ich habe es nur für das Repo „Bank-Website“ zugelassen).
3. Wählen Sie das Repo im Abschnitt „Zuletzt aktualisierte Repositorys“ aus.
   1. In der Build-Einstellung müssen wir das ändern Basisverzeichnis damit unsere App sein kann dist etwa so: Dann sollten die Build-Einstellungen so aussehen:
4. Klicken Sie im nächsten Schritt auf „Speichern und bereitstellen“.
5. Nach einiger Zeit wird die Website bereitgestellt und ist einsatzbereit.

Und wir sind live! Hier ist der URL.

Vor- und Nachteile

Sie müssen die bearbeiten Basisverzeichnis in der Bereitstellungsspezifikation – es wird standardmäßig nicht erkannt. Die Benutzeroberfläche fühlt sich etwas klobig an, aber das ist eine persönliche Präferenz. Für AWS Amplify besteht ein enormes Potenzial, da viele andere AWS-Webdienste in greifbarer Nähe sind.

Feuerbasis

Hintergrund

Firebase ist ein Google-Dienst, der vor allem als Echtzeit-Speicherplattform bekannt ist. Es verfügt aber auch über eine Hosting-Option für statische Websites und Express.js-Microservices oder APIs und unterstützt Vorschau-URLs für Zweige, an denen Ihr Team arbeitet. Wie bei Netlify, Vercel und anderen werden die bereitgestellten Inhalte über ein CDN-Netzwerk bereitgestellt.

Wie zu verwenden

1. Installieren Firebase-Tools mit npm install -g firebase-tools.
2. Melden Sie sich mit bei Firebase an Firebase-Login. Sobald Sie sich angemeldet haben, sollten Sie eine Meldung wie diese sehen:
3. In das Projektverzeichnis wechseln und ausführen Firebase-Init, Sie sollten etwa Folgendes sehen: Wählen Sie die Option zum Konfigurieren von Dateien für Firebase Hosting mit optionalen GitHub-Aktionsbereitstellungen. Anschließend können Sie ein Projekt direkt über die CLI erstellen oder die Firebase-Benutzeroberfläche dazu verwenden und es später verbinden. Wir haben das Projekt über die Befehlszeile erstellt und die daraus resultierenden Fragen folgendermaßen beantwortet:                                                                Danach werden einfache Dateien „firebase.json“ und „.firebaserc“ erstellt.
4. Dann lauf Firebase bereitstellen um die Dateien tatsächlich aus dem bereitzustellen distVerzeichnis. Wenn das Verzeichnis fehlt, stellen Sie sicher, dass Sie es ausführen npm run build zuerst, um Dateien zu generieren. Die Firebase bereitstellen Der Befehl sollte eine Ausgabe ähnlich dem folgenden Beispiel generieren:

Jetzt können Sie es Sehen Sie sich die Website an auf dem mitgelieferten URL. Juhuu! 

Vor- und Nachteile

Firebase ist ziemlich einfach, aber wenn Sie es in Ihrem Projekt einrichten, sind die Fragen, die Sie beantworten müssen, etwas verwirrend. Glücklicherweise haben wir sie im obigen Abschnitt für Sie beantwortet, sie erfordern jedoch ein Verständnis der tatsächlichen Firebase-Funktionen, bevor Sie fortfahren können. Darüber hinaus lässt sich Firebase schnell bereitstellen und kann ein URL generieren, in dem Sie eine Vorschau der bereitgestellten Dateien anzeigen können. Sie können es auch einfach mit GitHub Action-Bereitstellungen mit der CLI automatisieren, was praktisch ist.

GitHub-Seiten

Hintergrund

GitHub Pages gibt es schon seit geraumer Zeit und es ist eine einfache Möglichkeit, Dokumente oder eine persönliche Website direkt aus GitHub zu veröffentlichen. Es eignet sich hervorragend für statische Inhalte und viele Leute verwenden es, um einfache Websites mit minimalen Investitionen bereitzustellen. Die Nutzung ist kostenlos, wenn Ihr Projekt öffentlich ist, und bietet eine schnelle und kostengünstige Möglichkeit, eine Website zu hosten.

Wie zu verwenden

Bitte beachten Sie, dass Sie die Datei bearbeiten müssen App.jsx wo wir anrufen Router und hinzufügen Basisname damit es mit dem Repo-Namen übereinstimmt. So geht’s also App.jsx sollte aussehen:                                                                                        Wir müssen das ändern Basisname weil GitHub-Seiten die Website auf einem URL dieser Form „https://GITHUB_USERNAME.gitlab.io/REPO_NAME“ bereitstellen. Ohne den festgelegten Basisnamen funktioniert die Website nicht ordnungsgemäß React-Router-Dom.

1. Nachdem sich der Code geändert hat, müssen wir ihn installieren gh-Seiten Paket mit:
2. Und fügen Sie a hinzu vorab bereitstellen und a einsetzen Skript zu package.json:
3. Dann rennen wir einfach npm ausführen, bereitstellen. Es wird ausgelöst npm run build und es wird verwendet gh-Seiten den Inhalt zu veröffentlichen dist zu einem separaten Zweig auf GitHub namens gh-Seiten.
4. Überprüfen Sie abschließend, ob die gh-Seiten wird für GitHub-Seiten wie folgt verwendet:

Hier ist der Live-URL.

Vor- und Nachteile

Wenn Sie ein Projekt bereitstellen, das sich von Ihrem Benutzernamen unterscheidet, wird es in einem Unterverzeichnis unserer kostenlosen Domain mit GitHub bereitgestellt. Anschließend müssen Sie zusätzlichen Code schreiben, um die Logik zu unterstützen, sich innerhalb eines Unterverzeichnisses zu befinden.

In unserem Anwendungsfall wird die kontinuierliche Bereitstellung nicht standardmäßig unterstützt, Sie können sie jedoch einrichten. Nach der Einrichtung können Änderungen schnell umgesetzt werden.

GitLab-Seiten

Hintergrund

GitLab verfügt wie GitHub über eine eigene Hosting-Lösung, die GitLab Pages genannt wird. Ich muss ihnen sagen, dass es einfacher ist, eine kontinuierliche Bereitstellung für GitLab Pages einzurichten als für GitHub Pages.

Wie zu verwenden

1. Registrieren Sie sich oder melden Sie sich bei GitLab an
2. Fügen Sie ein Repo zu GitLab hinzu, falls Sie es noch nicht dort haben. Du kannst fork den, den ich dort hinzugefügt habe 
   Ähnlich wie bei GitHub-Seiten müssen Sie die bearbeiten App.jsx wo wir anrufen Router und hinzufügen  Basisname damit es mit dem Repo-Namen übereinstimmt. Das ist also die letzte Änderung:                                                               Wir müssen das ändern Basisname weil GitLab-Seiten die Website auf einem URL dieser Form bereitstellen: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Ohne den festgelegten Basisnamen funktioniert die Website nicht ordnungsgemäß React-Router-Dom.
3. Sobald Sie das Projekt bearbeitet und auf GitLab übertragen haben, gehen Sie zu Einstellungen > Seiten und Sie werden mit einem vierstufigen Assistenten zum Bereitstellen des Repositorys auf GitLab Pages begrüßt. 
4. Der erste Schritt im Assistenten besteht darin, das Build-Image einzugeben. Wir verwenden das Node.js LTS.
5. Als nächstes geben wir den Pre-Build-Befehl ein. Der npm ci wird hier genügen.
6. Nun zum Build-Schritt. Wir müssen bestehen — –dist-dir öffentlich weil GitLab Pages davon ausgeht, dass die Website in der erstellt wird öffentlich Verzeichnis. Mit keinem anderen Verzeichnis kommen Sie leider durch.
7. Übernehmen Sie das neu generierte .gitlab-ci.yml Datei, die GitLab mitteilt, wie Ihre Website bereitgestellt werden soll.
8. Gehen Sie nun zum Abschnitt „CI/CD -> Pipelines“ des Repos und beobachten Sie die Leistung der neu hinzugefügten Pipeline.
9. Nach einiger Zeit wird der Pipeline-Job abgeschlossen und die Website wird auf GitLab Pages bereitgestellt.

Hier ist das Ergebnis.

Vor- und Nachteile

Die Installation von Paketen ist langsam und Sie müssen zusätzlichen Code hinzufügen, damit es funktioniert. Der Assistent ist jedoch sehr intuitiv und erfordert nur vier Schritte zur Bereitstellung.

Rendern

Hintergrund

Render ist ein Neuling auf dem Markt und wird 2019 eingeführt. Es versucht, die Art und Weise zu stören, wie Benutzer ihre Dienste bereitstellen (einschließlich statischer Websites). Bisher geht es ihnen gut und ihre Zahl nimmt zu.

Wie zu verwenden

1. Registrieren Sie sich oder melden Sie sich bei Render an.
2. Erstellen Sie eine neue statische Website, indem Sie auf die Schaltfläche „Neu“ klicken und „Statische Website“ auswählen.
3. Wählen Sie das Repo aus, das Sie bereitstellen möchten.
4. Behalten Sie die Garn; Garnaufbau Build-Befehl in der Build-Einstellung. Leider funktioniert es nicht mit npm ci; npm run build wie andere Dienste auch. Ändern Sie das „Veröffentlichungsverzeichnis“ in dist und klicken Sie auf „Statische Site erstellen“.
5. Nach einiger Zeit stellt Render den Code bereit.

Hier ist der Live-URL von Render.

Vor- und Nachteile

Es ist wirklich schnell, funktioniert aber für unser Projekt mit den Befehlen „npm ci“ und „npm run build“ nicht gut. Nur „Garn“ scheint zu funktionieren.

Anstieg

Hintergrund

Surge gibt es schon seit einiger Zeit. Auf den ersten Blick ist ihr Dienst einfach zu bedienen und es sind nur ein oder zwei Befehle erforderlich, um Ihre statische Website bereitzustellen. Es ist kostenlos, bietet aber einen kostenpflichtigen Plan von 30 $/Monat. Der Stoizismus des Werkzeugs ist es, was es zum Leuchten bringt. Es ist keine komplexe Einrichtung erforderlich. Installieren Sie einfach „surge“ und führen Sie es mit „surge“ aus.

Wie zu verwenden

1. Zur Vorbereitung ausführen npm run build um darin statische Dateien zu generieren dist Verzeichnis. Die Anstieg Ich werde diese für die Bereitstellung verwenden.
2. Lauf npm install –globalwelle
3. Dann lauf Anstieg.

Ein paar Dinge zu beachten:
Wenn Sie es zum ersten Mal ausführen, müssen Sie ein Konto bei Surge erstellen. Keine Sorge, es ist ganz einfach. Geben Sie einfach Ihre E-Mail-Adresse und das gewünschte Passwort ein.

Anschließend werden Sie aufgefordert, „Projekt“ einzugeben. Dies sollte der Pfad zum sein dist Verzeichnis. Sie können einfach anhängen dist zu dem Pfad, den Sie erhalten, wenn Sie „surge“ in dem von Ihnen bereitgestellten Repo ausgeführt haben.

Geben Sie dann den zukünftigen URL Ihrer Website ein. Probieren Sie etwas Einzigartiges aus, denn was? Anstieg angeboten hat bei mir nicht funktioniert.

Nach der URL-Eingabe wird die Anstieg wird Inhalte bereitstellen von dist an den angegebenen URL übergeben. Folgendes habe ich bekommen:

Vor- und Nachteile

Es ist schnell und einfach und erfordert keine separate Schnittstelle. Es wird jedoch kein verfügbarer URL für Ihre App vorgeschlagen.

Zeit für die Bereitstellung jedes Hosting-Dienstes

Unsere Top 3 der kostenlosen React-Hosting-Dienste

1. Netlify
2. Vercel
3. Anstieg

Wichtige Erkenntnisse

Nachdem wir jeden dieser kostenlosen React-App-Hosting-Dienste getestet haben, sind wir der Meinung, dass Netlify der beste Anbieter ist. Es bietet schnelle Bereitstellungen mit vielen Funktionen, die Sie möglicherweise benötigen. Direkt danach folgt Vercel, das viele Funktionen bietet und nach der ersten Bereitstellung recht schnell ist. Dann haben wir Surge, ein minimales Bereitstellungstool, das recht günstig sein kann, wenn Sie sich für ein Upgrade entscheiden.

Automatisieren Sie Ihren Frontend-Build und liefern Sie Ihre App 10x schneller. Erfahren Sie mehr.