8 servicii gratuite de găzduire a aplicației React12 min read

Deci ați creat o aplicație React, dar nu știți sigur cum sau unde să o găzduiți. În acest articol, vă vom prezenta 8 servicii gratuite de găzduire React, vă vom arăta cum am implementat această aplicație React folosind fiecare și să vă spun ce am învățat în acest proces.

Am construit aplicația noastră în Figma folosind Anima plugin, care ne-a permis să adăugăm funcționalitate, comportament receptiv și rich media exportați codul React gata de dezvoltare pentru întreaga interfață de utilizare. Ne-a luat o zi să proiectăm și să implementăm.

Unde să găzduiți gratuit aplicația dvs. React

Există un număr tot mai mare de soluții de găzduire fără server, datorită creșterii cadrelor bazate pe componente precum React. Amazon AWS, Microsoft Azure și Google Cloud sunt în prezent platformele dominante. Cu toate acestea, există o schimbare în creștere către servicii de găzduire frontală dedicate, care necesită mai puțin efort și vă pot pune în funcțiune în cel mai scurt timp – și majoritatea includ CI/CD. Iată cele 8 servicii gratuite de găzduire a aplicației React pe care le-am testat:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub Pagini

6. Pagini GitLab

7. Redați

8. Surge

Să ne aprofundăm mai mult în aceste servicii gratuite de găzduire a aplicației React și să demonstrăm cum am implementat o aplicație React folosind fiecare. 

Netlify

Fundal

Netlify a fost fondată în 2014 și s-a concentrat încă de la început pe găzduirea site-urilor web statice. A atras o mulțime de dezvoltatori datorită nivelului său generos gratuit. Câțiva ani mai târziu, Netlify a devenit una dintre cele mai populare gazde JAMstack și site-uri statice din jur.

Cum se utilizează

1. În mod ideal, vă veți înregistra sau vă conectați cu GitHub. Acest lucru vă asigură că puteți accesa depozitele din profilul dvs. și le puteți implementa rapid.
2. Odată autentificat, faceți clic pe „Adăugați site nou” și alegeți „Importați un proiect existent”.
3. Apoi faceți clic pe GitHub ca furnizor.
4. Alegeți „site-ul bancar” sau oricare ar fi numele proiectului dvs.
5. Ajustați setările de implementare (în cazul site-ului nostru web, setările implicite funcționează perfect), apoi faceți clic pe „Deploy site”.
6. Odată implementat, îl puteți vizualiza pe un URL public pe care îl puteți partaja lumii. Yay!

Iată aplicația live implementată pe Netlify.

Pro și contra

Netlify este ușor de configurat și implementat, ca să nu mai vorbim că este unul dintre cele mai rapide servicii pe care le-am testat aici. Un dezavantaj este că, dacă aveți nevoie de colaboratori și/sau de o echipă, trebuie să faceți upgrade la un plan plătit.

Vercel

Fundal

Vercel (cunoscut inițial ca Zeit) a fost fondat în 2015 și a devenit rapid faimă. Ei sunt menținătorii Next.js, un cadru popular React pentru construirea de site-uri web. Oferă un nivel gratuit pentru site-urile web necomerciale, precum și modalități de a-și folosi rețeaua Edge pentru funcții fără server.

Cum se utilizează

1. Conectați-vă sau înregistrați-vă cu GitHub.
2. Faceți clic pe meniul drop-down „Adăugați nou…” și selectați „Proiect”.                                                             
3. Alegeți „site-ul bancar” sau proiectul preferat React.
4. Am urmat valorile implicite pentru setările de implementare și apoi am făcut clic pe „Deploy”.
5. După ceva timp, am implementat site-ul web.

Iată URL în direct.

Pro și contra

Vercel are nevoie de ceva timp pentru a stoca în cache partea de instalare a procesului de implementare, dar după aceea, este unul dintre cele mai rapide servicii. Afișează implementările de previzualizare pentru fiecare ramură pe care o împingeți și o face rapid datorită stocării în cache.

AWS Amplify

Fundal

AWS este o colecție masivă de produse cloud, iar Amplify este promovat ca o modalitate ușoară de a obține acces la unele dintre ele. Cu AWS Amplify, puteți să construiți, să expediați și să găzduiți rapid aplicații full-stack pe AWS, cu flexibilitatea de a profita de largimea serviciilor AWS pe măsură ce cazurile de utilizare evoluează.

Cum se utilizează

1. Înregistrați-vă sau conectați-vă la AWS, apoi căutați AWS Amplify și faceți clic pe „Începeți”.
2. Alegeți GitHub și autorizați-l (l-am permis doar pentru repo-ul „bank-site”).
3. Selectați depozitul în secțiunea „Arhive actualizate recent”.
   1. În setarea de compilare, va trebui să schimbăm baseDirectory pentru ca aplicația noastră să fie dist asa: Apoi, setările de compilare ar trebui să arate astfel:
4. În pasul următor, faceți clic pe „Salvați și implementați”.
5. După ceva timp, site-ul web va fi implementat și gata de utilizare.

Și suntem în direct! Iată URL.

Pro și contra

Trebuie să editați baseDirectory în specificația de implementare — nu este recunoscut imediat. Interfața de utilizare se simte puțin neplăcută, dar aceasta este o preferință personală. Există un potențial imens pentru AWS Amplify, deoarece multe alte servicii web AWS sunt la îndemână.

Firebase

Fundal

Firebase este un serviciu Google care este cel mai bine cunoscut ca platformă de stocare în timp real. Dar are și o opțiune de găzduire pentru site-uri web statice și microservicii Express.js sau API și acceptă previzualizarea URL pentru sucursalele la care lucrează echipa ta. Ca și în cazul Netlify, Vercel și alții, deservește conținutul implementat printr-o rețea CDN.

Cum se utilizează

1. Instalați firebase-instrumente cu npm install -g firebase-tools.
2. Conectați-vă la Firebase cu autentificare firebase. După ce te-ai autentificat, ar trebui să vezi un mesaj ca acesta:
3. Mutați-vă în directorul de proiect și rulați firebase init, ar trebui să vezi ceva de genul acesta: Alegeți opțiunea de a configura fișiere pentru Firebase Hosting cu implementări opționale GitHub Action. Apoi, puteți crea un proiect direct din CLI sau puteți utiliza Firebase UI pentru a-l face și mai târziu să îl conectați. Am creat proiectul din linia de comandă și așa am răspuns la întrebările rezultate:                                                                                                                                                                                          .
4. Apoi, fugi implementare firebase pentru a implementa efectiv fișierele din distdirector. Dacă directorul lipsește, asigurați-vă că rulați npm run build primul care generează fișiere. The implementare firebase comanda ar trebui să genereze rezultate similare cu exemplul de mai jos:

Acum poți vizualiza site-ul pe URL furnizat. Yay! 

Pro și contra

Firebase este destul de simplu, dar atunci când îl configurați în cadrul proiectului dvs., întrebările la care trebuie să răspundeți sunt puțin confuze. Din fericire, le-am răspuns pentru dvs. în secțiunea de mai sus, dar necesită o înțelegere a caracteristicilor reale Firebase înainte de a continua. În afară de asta, Firebase se implementează rapid și poate genera un URL unde puteți previzualiza fișierele implementate. De asemenea, îl puteți automatiza cu ușurință cu implementările GitHub Action cu CLI, care este perfect.

GitHub Pagini

Fundal

GitHub Pages există de ceva timp și este o modalitate ușoară de a publica documente sau un site web personal direct de la GitHub. Este minunat pentru conținutul static și mulți oameni îl folosesc pentru a implementa site-uri simple cu investiții minime. Este gratuit de utilizat dacă proiectul dvs. este public și este o modalitate rapidă și ieftină de a găzdui un site web.

Cum se utilizează

Vă rugăm să rețineți că trebuie să editați App.jsx unde sunăm Router si adauga nume de bază pentru a se potrivi cu numele repo. Deci așa este App.jsx ar trebui sa arate:                                                                                        Trebuie să schimbăm nume de bază deoarece paginile GitHub vor implementa site-ul web pe un URL de acest formular `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Site-ul web nu va funcționa corect fără numele de bază setat pentru reacţionează-router-dom.

1. După modificarea codului, trebuie să instalăm gh-pagini pachet cu:
2. Și, adăugați un preinstalare si a disloca scenariul pentru pachet.json:
3. Apoi, pur și simplu alergăm npm run deploy. Se va declanșa npm run build si va folosi gh-pagini pentru a publica conținutul dist la o ramură separată de pe GitHub apelată gh-pagini.
4. În cele din urmă, verificați dacă gh-pagini este folosit pentru paginile GitHub ca mai jos:

Iată URL în direct.

Pro și contra

Dacă implementați un proiect care diferă de numele dvs. de utilizator, acesta va fi implementat într-un subdirector pe domeniul nostru gratuit cu GitHub. Apoi, trebuie să scrieți cod suplimentar pentru a sprijini logica de a fi în interiorul unui subdirector.

Nu acceptă implementarea continuă imediată în cazul nostru de utilizare, dar o puteți configura. Odată configurat, este rapid să implementați modificări.

Pagini GitLab

Fundal

La fel ca GitHub, GitLab are propria sa soluție de găzduire și o numesc GitLab Pages. Trebuie să le dau, este mai ușor să configurați o implementare continuă în GitLab Pages decât pentru GitHub Pages.

Cum se utilizează

1. Înscrieți-vă sau conectați-vă la GitLab
2. Adăugați un repo la GitLab dacă nu îl aveți deja acolo. Poți bifurca cea pe care am adaugat-o acolo 
   Similar cu paginile GitHub, trebuie să editați App.jsx unde sunăm Router si adauga  nume de bază pentru a se potrivi cu numele repo. Deci aceasta este modificarea finală:                                                               Trebuie să schimbăm nume de bază deoarece paginile GitLab vor implementa site-ul web pe un URL de această formă: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Site-ul web nu va funcționa corect fără numele de bază setat pentru reacţionează-router-dom.
3. Odată ce ați editat și ați trimis proiectul în GitLab, accesați Setări > Pagini și veți fi întâmpinat cu un vrăjitor în patru pași pentru a implementa repo-ul în Paginile GitLab. 
4. Primul pas în asistent este să introduceți imaginea de construcție. Vom folosi LTS Node.js.
5. În continuare, vom introduce comanda pre-build. The npm ci va fi suficient aici.
6. Acum pentru pasul de construire. Trebuie să trecem – –dist-dir public deoarece Paginile GitLab se așteaptă să aibă site-ul web construit în public director. Nu poți scăpa cu niciun alt director, îmi pare rău.
7. Angajați noul generat .gitlab-ci.yml fișier care îi spune lui GitLab cum să vă implementeze site-ul web.
8. Acum, accesați CI/CD -> secțiunea Pipelines din repo și observați performanța conductei nou adăugate.
9. După ceva timp, lucrarea pipeline se va termina, iar site-ul web va fi implementat pe paginile GitLab.

Iată Rezultatul.

Pro și contra

Pachetele se instalează lent și trebuie să adăugați cod suplimentar pentru ca acesta să funcționeze, dar vrăjitorul este super intuitiv, cu doar patru pași de implementat.

Redați

Fundal

Render este un copil nou în bloc, fiind lansat în 2019. Încearcă să perturbe modul în care oamenii își implementează serviciile (inclusiv site-urile web statice). Până acum, se descurcă bine și cresc în număr.

Cum se utilizează

1. Înscrieți-vă sau conectați-vă la Render.
2. Creați un nou site web static apăsând butonul „Nou” și selectând „Site static”.
3. Alegeți depozitul pe care doriți să îl implementați.
4. Păstrați fire; construirea firelor comanda build în setarea build. Din păcate, nu funcționează cu npm ci; npm run build cum fac alte servicii. Schimbați „Directorul Publicați” în dist și faceți clic pe „Creați site static”.
5. După ceva timp, Render va implementa codul.

Iată URL live de la Render.

Pro și contra

Este foarte rapid, dar nu funcționează bine pentru proiectul nostru cu comenzile `npm ci` și `npm run build`. Doar „fir” pare să funcționeze.

Surge

Fundal

Surge există de ceva timp. De drept, serviciul lor este simplu de utilizat și este nevoie doar de una sau două comenzi pentru a vă implementa site-ul static. Este gratuit, dar oferă un plan plătit de 30$/lună. Stoicismul instrumentului este ceea ce îl face să strălucească. Nu este nevoie de o configurare complexă, instalați doar `surge` și rulați-l cu `surge`.

Cum se utilizează

1. Pentru a pregăti, alergați npm run build pentru a genera fișiere statice în interior dist director. The val le va folosi pentru implementare.
2. Fugi npm install –global surge
3. Apoi, fugi val.

Câteva lucruri de reținut:
Dacă este prima dată când îl rulați, va trebui să vă creați un cont cu Surge. Nu-ți face griji, este ușor. Doar introduceți adresa de e-mail și parola dorită.

Apoi, vi se va cere să introduceți „proiect”, care ar trebui să fie calea către dist director. Puteți doar să atașați dist către calea care vi se oferă dacă ați rulat surge în interiorul depozitului pe care îl desfășurați.

Apoi, introduceți viitorul URL al site-ului dvs. web. Încearcă ceva unic pentru că ce val oferit nu a funcționat pentru mine.

După intrarea URL, val va implementa conținut de la dist la URL specificat. Iată ce am primit:

Pro și contra

Este rapid și simplu și nu necesită adoptarea unei interfețe separate, dar nu reușește să sugereze un URL disponibil pentru aplicația dvs.

Timp de implementare pentru fiecare serviciu de găzduire

Cele mai bune 3 servicii gratuite de găzduire React

1. Netlify
2. Vercel
3. Surge

Recomandări cheie

După ce am testat fiecare dintre aceste servicii gratuite de găzduire a aplicației React, credem că Netlify este cel mai bun din grup. Oferă implementări rapide cu o mulțime de funcții de care ai putea avea nevoie. Imediat după aceea este Vercel care are o mulțime de caracteristici și este destul de rapid după implementarea inițială. Apoi, avem Surge, care este un instrument de implementare minimă care poate fi destul de ieftin dacă decideți să faceți upgrade.

Automatizează-ți construirea frontend-ului și expediază-ți aplicația de 10 ori mai rapid. Află mai multe.