8 gratis React app-hostingtjenester11 min read

Så du byggede en React-app, men du er ikke sikker på, hvordan eller hvor den skal hostes. I denne artikel vil vi lede dig gennem 8 gratis React-hostingtjenester og vise dig, hvordan vi implementerede denne React app ved at bruge hver enkelt, og fortælle dig, hvad vi lærte i processen.

Vi byggede vores app i Figma ved hjælp af Anima plugin, som gjorde det muligt for os at tilføje funktionalitet, responsiv adfærd og rich media eksporter dev-klar React kode for hele brugergrænsefladen. Det tog os en dag at designe og implementere.

Hvor du kan hoste din React-app gratis

Der er et stigende antal serverløse hostingløsninger derude takket være stigningen af ​​komponentbaserede rammer som React. Amazon AWS, Microsoft Azure og Google Cloud er i øjeblikket de dominerende platforme. Der er dog et voksende skift mod dedikerede frontend-hostingtjenester, der kræver mindre indsats og kan få dig i gang på ingen tid – og de fleste inkluderer CI/CD. Her er de 8 gratis React app-hostingtjenester, vi testede:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub sider

6. GitLab-sider

7. Render

8. Surge

Lad os dykke ned i disse gratis React app-hostingtjenester mere detaljeret og demonstrere, hvordan vi implementerede en React-app ved hjælp af hver enkelt. 

Netlify

Baggrund

Netlify blev grundlagt i 2014 og fokuserede fra starten på at hoste statiske hjemmesider. Det tiltrak mange udviklere på grund af dets generøse gratis niveau. Et par år senere voksede Netlify til at være en af ​​de mest populære JAMstack og statiske webstedsværter.

Sådan bruges

1. Ideelt set vil du registrere eller logge ind med GitHub. Dette sikrer, at du kan få adgang til lagrene på din profil og implementere dem hurtigt.
2. Når du er logget ind, skal du klikke på “Tilføj nyt websted” og vælge “Importer et eksisterende projekt.”
3. Klik derefter på GitHub som din udbyder.
4. Vælg “bank-hjemmesiden” eller hvad dit projektnavn er.
5. Finjuster implementeringsindstillingerne (i tilfælde af vores hjemmeside fungerer standardindstillingerne perfekt), og klik derefter på “Deploy site”.
6. Når den er installeret, kan du se den på en offentlig URL, som du kan dele med verden. Yay!

Her er live-appen installeret på Netlify.

Fordele og ulemper

Netlify er let at konfigurere og implementere, for ikke at nævne, at det er en af ​​de hurtigste tjenester, vi testede her. En ulempe er, at hvis du har brug for samarbejdspartnere og/eller et team, skal du opgradere til en betalt plan.

Vercel

Baggrund

Vercel (oprindeligt kendt som Zeit) blev grundlagt i 2015 og steg hurtigt til berømmelse. De er vedligeholdere af Next.js, en populær React-ramme til opbygning af websteder. De tilbyder et gratis niveau til ikke-kommercielle websteder, såvel som måder at bruge deres Edge-netværk til serverløse funktioner.

Sådan bruges

1. Log ind eller tilmeld dig med GitHub.
2. Klik på rullemenuen “Tilføj ny…” og vælg “Projekt”.                                                             
3. Vælg “bank-hjemmesiden” eller dit foretrukne React-projekt.
4. Vi gik med standardindstillingerne for implementeringsindstillinger og klikkede derefter på “Deploy”.
5. Efter noget tid fik vi hjemmesiden implementeret.

Her er live URL.

Fordele og ulemper

Vercel har brug for lidt tid til at cache installationsdelen af ​​installationsprocessen, men derefter er det en af ​​de hurtigste tjenester. Det viser forhåndsvisninger for hver gren, du trykker på, og det gør det hurtigt på grund af caching.

AWS Amplify

Baggrund

AWS er ​​en massiv samling af cloud-produkter, og Amplify annonceres som en nem måde at få fat i nogle af dem. Med AWS Amplify kan du hurtigt bygge, sende og hoste full-stack-applikationer på AWS, med fleksibiliteten til at udnytte bredden af ​​AWS-tjenester, efterhånden som use cases udvikler sig.

Sådan bruges

1. Tilmeld dig eller log ind på AWS, søg derefter efter AWS Amplify og klik på “Kom i gang”.
2. Vælg GitHub og godkend det (jeg tillod det kun for “bank-webstedet”-repoen).
3. Vælg repoen i afsnittet “Senest opdaterede depoter”.
   1. I build-indstillingen bliver vi nødt til at ændre baseDirectory for vores app at være dist sådan: Derefter skulle byggeindstillingerne se sådan ud:
4. I det næste trin skal du klikke på “Gem og implementer”.
5. Efter nogen tid vil hjemmesiden være implementeret og klar til brug.

Og vi er live! Her er URL.

Fordele og ulemper

Du skal redigere baseDirectory i implementeringsspecifikationen – det genkendes ikke ud af boksen. Brugergrænsefladen føles en smule klodset, men dette er en personlig præference. Der er et stort potentiale for AWS Amplify, fordi mange andre AWS-webtjenester er inden for rækkevidde.

Firebase

Baggrund

Firebase er en Google-tjeneste, der er bedst kendt som en realtidslagringsplatform. Men den har også en hostingmulighed for statiske websteder og Express.js-mikrotjenester eller APIs og understøtter preview URLs for grene dit team arbejder på. Som med Netlify, Vercel og andre, serverer den det implementerede indhold over et CDN-netværk.

Sådan bruges

1. Installer firebase-værktøjer med npm installer -g firebase-værktøjer.
2. Log ind på Firebase med firebase login. Når du logger ind, skulle du se en besked som denne:
3. Flyt ind i projektbiblioteket og kør firebase init, bør du se noget som dette: Vælg muligheden for at konfigurere filer til Firebase Hosting med valgfri GitHub Action-implementering. Derefter kan du oprette et projekt direkte fra CLI eller bruge Firebase UI til at gøre det og senere forbinde det. Vi oprettede projektet fra kommandolinjen, og det er sådan, vi besvarede de resulterende spørgsmål:                                                                  Derefter bliver der oprettet simple j `fire og `er.
4. Så løb firebase udrulning for rent faktisk at implementere filerne fra distvejviser. Hvis mappen mangler, skal du sørge for at køre npm køre build først til at generere filer. Den firebase udrulning kommandoen skal generere output svarende til eksemplet nedenfor:

Nu kan du se hjemmesiden på den medfølgende URL. Yay! 

Fordele og ulemper

Firebase er ret simpelt, men når du konfigurerer det inde i dit projekt, er de spørgsmål, du skal besvare, lidt forvirrende. Heldigvis besvarede vi dem for dig i afsnittet ovenfor, men de kræver en forståelse af de faktiske Firebase-funktioner, før du fortsætter. Bortset fra det er Firebase hurtig at implementere og kan generere en URL, hvor du kan forhåndsvise de installerede filer. Du kan også nemt automatisere det med GitHub Action-implementeringer med CLI, hvilket er pænt.

GitHub sider

Baggrund

GitHub Pages har eksisteret i et stykke tid, og det er en nem måde at udgive dokumenter eller en personlig hjemmeside direkte fra GitHub. Det er dejligt til statisk indhold, og mange bruger det til at implementere simple websteder med minimal investering. Det er gratis at bruge, hvis dit projekt er offentligt og er en hurtig og billig måde at hoste et websted på.

Sådan bruges

Bemærk venligst, at du skal redigere App.jsx hvor vi ringer Router og tilføje basenavn til det for at matche reponavnet. Så sådan er det App.jsx skal se:                                                                                        Vi er nødt til at ændre basenavn fordi GitHub-sider vil implementere webstedet til en URL med denne form `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Hjemmesiden vil ikke fungere korrekt uden basenavnet indstillet til reagere-router-dom.

1. Efter koden ændres, skal vi installere gh-sider pakke med:
2. Og tilføj en forudinstallation og en indsætte script til package.json:
3. Så løber vi bare npm køre implementering. Det vil udløse npm køre build og det vil bruge gh-sider at offentliggøre indholdet af dist til en separat gren på GitHub kaldet gh-sider.
4. Til sidst skal du kontrollere, om gh-sider bruges til GitHub sider som nedenfor:

Her er live URL.

Fordele og ulemper

Hvis du implementerer et projekt, der adskiller sig fra dit brugernavn, vil det blive implementeret i en undermappe på vores gratis domæne inden for GitHub. Derefter skal du skrive ekstra kode for at understøtte logikken i at være inde i en undermappe.

Det understøtter ikke kontinuerlig implementering direkte fra boksen i vores brugstilfælde, men du kan konfigurere det. Når det er konfigureret, er det hurtigt at implementere ændringer.

GitLab-sider

Baggrund

Ligesom GitHub har GitLab sin egen hostingløsning, og de kalder den GitLab Pages. Jeg er nødt til at give det til dem, det er nemmere at opsætte en kontinuerlig udrulning til GitLab Pages end det er for GitHub Pages.

Sådan bruges

1. Tilmeld dig eller log ind på GitLab
2. Tilføj en repo til GitLab, hvis du ikke allerede har den der. Det kan du gaffel den, jeg tilføjede der 
   I lighed med GitHub-sider skal du redigere App.jsx hvor vi ringer Router og tilføje  basenavn til det for at matche reponavnet. Så dette er den sidste ændring:                                                               Vi er nødt til at ændre basenavn fordi GitLab-sider vil implementere webstedet til en URL i denne form: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Hjemmesiden vil ikke fungere korrekt uden basenavnet indstillet til reagere-router-dom.
3. Når du har redigeret og skubbet projektet til GitLab, skal du gå til Indstillinger > Sider, og du vil blive mødt med en fire-trins guide til at implementere repoen til GitLab Pages. 
4. Det første trin i guiden er at gå ind i build-billedet. Vi bruger Node.js LTS.
5. Dernæst skal vi indtaste pre-build kommandoen. De npm ci vil være tilstrækkeligt her.
6. Nu til byggetrinnet. Vi skal bestå — –dist-dir offentlig fordi GitLab Pages forventer at have hjemmesiden bygget i offentlige vejviser. Du kan ikke slippe afsted med nogen anden mappe, undskyld.
7. Forpligt det nygenererede .gitlab-ci.yml fil, der fortæller GitLab, hvordan dit websted skal implementeres.
8. Gå nu til CI/CD -> Pipelines-sektionen af ​​repoen og observer, at den nyligt tilføjede pipeline fungerer.
9. Efter nogen tid afsluttes pipeline-jobbet, og hjemmesiden vil blive implementeret på GitLab-sider.

Her er resultatet.

Fordele og ulemper

Pakker er langsomme at installere, og du skal tilføje ekstra kode for at få det til at fungere, men guiden er super intuitiv med kun fire trin at implementere.

Render

Baggrund

Render er et nyt barn på blokken, der lanceres i 2019. Det forsøger at forstyrre den måde, folk implementerer deres tjenester på (inklusive statiske websteder). Indtil videre har de det fint og vokser i antal.

Sådan bruges

1. Tilmeld dig eller log ind på Render.
2. Opret et nyt statisk websted ved at trykke på knappen “Ny” og vælge “Statisk websted”.
3. Vælg den repo, du vil implementere.
4. Behold garn; garn opbygget build-kommando i build-indstillingen. Det virker desværre ikke med npm ci; npm køre build ligesom andre tjenester gør. Skift “Udgiv bibliotek” til dist og klik på “Opret statisk websted”.
5. Efter nogen tid vil Render implementere koden.

Her er live URL fra Render.

Fordele og ulemper

Det er virkelig hurtigt, men det fungerer ikke godt til vores projekt med kommandoerne `npm ci` og `npm run build`. Kun `garn` virker tilsyneladende.

Surge

Baggrund

Surge har eksisteret i nogen tid nu. Til højre for flagermusen er deres service nem at bruge, og det kræver kun en eller to kommandoer at implementere dit statiske websted. Det er gratis, men tilbyder en betalt plan på 30 $/måned. Værktøjets stoicisme er det, der får det til at skinne. Ingen kompleks opsætning er nødvendig, bare installer `surge` og kør den med `surge`.

Sådan bruges

1. For at forberede, løb npm køre build at generere statiske filer inde dist vejviser. Den stigning vil bruge dem til implementering.
2. Løb npm install –global surge
3. Så løb stigning.

Et par ting at bemærke:
Hvis det er første gang, du kører det, skal du oprette en konto hos Surge. Bare rolig, det er nemt. Indtast blot din e-mail og den ønskede adgangskode.

Derefter bliver du bedt om at indtaste “projekt”, som skal være vejen til dist vejviser. Du kan bare tilføje dist til den sti, du får, hvis du løb bølge inde i den repo, du implementerer.

Indtast derefter den fremtidige URL på dit websted. Prøv noget unikt, fordi hvad stigning tilbudt virkede ikke for mig.

Efter URL-indgangen vil stigning vil implementere indhold fra dist over til den specificerede URL. Her er hvad jeg fik:

Fordele og ulemper

Det er hurtigt og enkelt og kræver ikke, at du vedtager en separat grænseflade – men den foreslår ikke en tilgængelig URL til din app.

Tid til at implementere for hver hostingtjeneste

Vores top 3 gratis React-hostingtjenester

1. Netlify
2. Vercel
3. Surge

Nøgle takeaways

Efter at have testet hver af disse gratis React app-hosting-tjenester, mener vi, at Netlify er den bedste af flokken. Det giver hurtige implementeringer med masser af funktioner, du muligvis har brug for. Lige efter det er Vercel, som har masser af funktioner og er ret hurtig efter den indledende implementering. Så har vi Surge, som er et minimalt implementeringsværktøj, der kan være ret billigt, hvis du beslutter dig for at opgradere.

Automatiser din frontend-opbygning, og send din app 10 gange hurtigere. Få flere oplysninger.