8 bezplatných hostingových služieb aplikácie React12 min read

Takže ste vytvorili aplikáciu React, ale nie ste si istí, ako alebo kde ju umiestniť. V tomto článku vás prevedieme 8 bezplatnými hostingovými službami React, ukážeme vám, ako sme nasadili túto aplikáciu React pomocou každého z nich a povieme vám, čo sme sa v tomto procese naučili.

Našu aplikáciu sme vytvorili v Figma pomocou Anima plugin, ktorý nám umožnil pridať funkčnosť, responzívne správanie a multimediálne údaje exportujte kód React pripravený pre vývojárov pre celé používateľské rozhranie. Návrh a nasadenie nám trvalo jeden deň.

Kde bezplatne hostiť vašu aplikáciu React

Existuje rastúci počet bezserverových hostingových riešení vďaka vzostupu rámcov založených na komponentoch, ako je React. V súčasnosti sú dominantnými platformami Amazon AWS, Microsoft Azure a Google Cloud. Narastá však posun smerom k vyhradeným frontend hostingovým službám, ktoré si vyžadujú menej úsilia a môžu vás rýchlo spustiť – a väčšina z nich zahŕňa CI/CD. Tu je 8 bezplatných hostingových služieb aplikácie React, ktoré sme testovali:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. Stránky GitHub

6. Stránky GitLab

7. Vykresliť

8. Prepätie

Pozrime sa podrobnejšie na tieto bezplatné služby hostenia aplikácií React a ukážme, ako sme pomocou každej z nich nasadili aplikáciu React. 

Netlify

Pozadie

Spoločnosť Netlify bola založená v roku 2014 a od začiatku sa zameriavala na hosťovanie statických webových stránok. Prilákal veľa vývojárov kvôli svojej veľkorysej bezplatnej úrovni. O pár rokov neskôr sa Netlify stal jedným z najpopulárnejších hostiteľov JAMstack a statických webových stránok.

Ako používať

1. V ideálnom prípade sa zaregistrujete alebo prihlásite pomocou GitHub. Vďaka tomu budete mať prístup k úložiskám vo svojom profile a budete ich môcť rýchlo nasadiť.
2. Po prihlásení kliknite na „Pridať novú stránku“ a vyberte „Importovať existujúci projekt“.
3. Potom kliknite na GitHub ako svojho poskytovateľa.
4. Vyberte si „webovú stránku banky“ alebo ako sa volá váš projekt.
5. Dolaďte nastavenia nasadenia (v prípade našej webovej stránky predvolené nastavenia fungujú perfektne) a potom kliknite na „Nasadiť lokalitu“.
6. Po nasadení si ho môžete prezerať na verejnom URL, ktorý môžete zdieľať so svetom. Hurá!

Tu je živá aplikácia nasadená na Netlify.

Výhody a nevýhody

Netlify je jednoduché nastaviť a nasadiť, nehovoriac o tom, že ide o jednu z najrýchlejších služieb, ktoré sme tu testovali. Jednou nevýhodou je, že ak potrebujete spolupracovníkov a/alebo tím, musíte prejsť na platený plán.

Vercel

Pozadie

Vercel (pôvodne známy ako Zeit) bol založený v roku 2015 a rýchlo sa preslávil. Sú to správcovia Next.js, populárneho rámca React na vytváranie webových stránok. Ponúkajú bezplatnú úroveň pre nekomerčné webové stránky, ako aj spôsoby, ako využiť svoju sieť Edge na funkcie bez servera.

Ako používať

1. Prihláste sa alebo sa zaregistrujte pomocou GitHub.
2. Kliknite na rozbaľovaciu ponuku „Pridať nový…“ a vyberte „Projekt“.                                                             
3. Vyberte si „webovú stránku banky“ alebo svoj obľúbený projekt React.
4. Prešli sme s predvolenými hodnotami pre nastavenia nasadenia a potom sme klikli na „Nasadiť“.
5. Po nejakom čase sme webovú stránku nasadili.

Tu je živý URL.

Výhody a nevýhody

Vercel potrebuje nejaký čas na uloženie do vyrovnávacej pamäte inštalačnej časti procesu nasadenia, ale potom je to jedna z najrýchlejších služieb. Zobrazuje ukážkové nasadenia pre každú vetvu, ktorú tlačíte, a robí to rýchlo vďaka ukladaniu do vyrovnávacej pamäte.

AWS Amplify

Pozadie

AWS je rozsiahla zbierka cloudových produktov a Amplify je propagovaný ako jednoduchý spôsob, ako získať niektoré z nich. S AWS Amplify môžete rýchlo vytvárať, odosielať a hostiť kompletné aplikácie na AWS s flexibilitou na využitie šírky služieb AWS podľa vývoja prípadov použitia.

Ako používať

1. Zaregistrujte sa alebo sa prihláste do AWS, potom vyhľadajte AWS Amplify a kliknite na „Začať“.
2. Vyberte GitHub a autorizujte ho (povolil som to len pre repo „web-stránka banky“).
3. Vyberte úložisko v časti „Nedávno aktualizované úložiská“.
   1. V nastavení zostavy budeme musieť zmeniť baseDirectory aby bola naša aplikácia dist takto: Potom by nastavenia zostavy mali vyzerať takto:
4. V ďalšom kroku kliknite na „Uložiť a nasadiť“.
5. Po určitom čase bude web nasadený a pripravený na použitie.

A sme naživo! Tu je URL.

Výhody a nevýhody

Musíte upraviť baseDirectory v špecifikácii nasadenia – nerozpozná sa hneď po vybalení. Používateľské rozhranie je trochu neohrabané, ale toto je osobná preferencia. AWS Amplify má obrovský potenciál, pretože mnoho ďalších webových služieb AWS je na dosah ruky.

Firebase

Pozadie

Firebase je služba Google, ktorá je najznámejšia ako platforma úložiska v reálnom čase. Má však aj možnosť hosťovania pre statické webové stránky a mikroslužby Express.js alebo API a podporuje ukážkové URL pre pobočky, na ktorých pracuje váš tím. Rovnako ako v prípade Netlify, Vercel a ďalších, poskytuje nasadený obsah cez sieť CDN.

Ako používať

1. Inštalovať Firebase-tools s npm install -g firebase-tools.
2. Prihláste sa do Firebase pomocou prihlásenie do firebase. Po prihlásení by sa vám mala zobraziť správa podobná tejto:
3. Presuňte sa do adresára projektu a spustite inicializácia firebase, mali by ste vidieť niečo takéto: Vyberte možnosť konfigurácie súborov pre Firebase Hosting s voliteľným nasadením akcie GitHub. Potom môžete vytvoriť projekt priamo z CLI alebo na to použiť používateľské rozhranie Firebase a neskôr ho pripojiť. Projekt sme vytvorili z príkazového riadku a takto sme odpovedali na výsledné otázky:                                                                    Potom sa vytvoria jednoduché súbory `firebase` a `firebase`.
4. Potom bežte nasadenie firebase skutočne nasadiť súbory z distadresár. Ak adresár chýba, nezabudnite ho spustiť npm spustiť zostavenie najprv vygenerujte súbory. The nasadenie firebase príkaz by mal generovať výstup podobný príkladu nižšie:

Teraz môžete zobraziť webovú stránku na dodanom URL. Hurá! 

Výhody a nevýhody

Firebase je pomerne jednoduchý, ale keď ho nastavíte vo svojom projekte, otázky, na ktoré musíte odpovedať, sú trochu mätúce. Našťastie sme na ne odpovedali v sekcii vyššie, ale pred pokračovaním si vyžadujú pochopenie skutočných funkcií Firebase. Okrem toho sa Firebase rýchlo nasadzuje a dokáže vygenerovať URL, kde si môžete prezrieť nasadené súbory. Môžete to tiež ľahko automatizovať pomocou nasadenia GitHub Action s CLI, čo je elegantné.

Stránky GitHub

Pozadie

Stránky GitHub existujú už nejaký čas a je to jednoduchý spôsob, ako publikovať dokumenty alebo osobné webové stránky priamo zo GitHub. Je to skvelé pre statický obsah a veľa ľudí ho používa na nasadenie jednoduchých stránok s minimálnymi investíciami. Je zadarmo na použitie, ak je váš projekt verejný a je to rýchly a lacný spôsob hostenia webovej stránky.

Ako používať

Upozorňujeme, že musíte upraviť App.jsx kam voláme Smerovač a pridať základné meno aby sa zhodoval s názvom repo. Takže takto App.jsx by mal vyzerať:                                                                                        Musíme zmeniť základné meno pretože stránky GitHub nasadia web do URL v tomto tvare „https://GITHUB_USERNAME.gitlab.io/REPO_NAME“. Webová stránka nebude správne fungovať bez základného názvu nastaveného pre reagovať-smerovač-dom.

1. Po zmene kódu musíme nainštalovať gh-stránky balík s:
2. A pridajte a prednasadiť a a nasadiť napísať na package.json:
3. Potom už jednoducho bežíme npm spustiť nasadiť. Spustí sa to npm spustiť zostavenie a použije sa gh-stránky zverejniť obsah dist do samostatnej pobočky na GitHub tzv gh-stránky.
4. Nakoniec skontrolujte, či je gh-stránky sa používa pre stránky GitHub, ako je uvedené nižšie:

Tu je živý URL.

Výhody a nevýhody

Ak nasadzujete projekt, ktorý sa líši od vášho používateľského mena, bude nasadený v podadresári na našej bezplatnej doméne v rámci GitHub. Potom musíte napísať dodatočný kód na podporu logiky toho, že sa nachádzate v podadresári.

V našom prípade použitia nepodporuje nepretržité nasadenie hneď po vybalení, ale môžete ho nastaviť. Po nastavení je rýchle nasadenie zmien.

Stránky GitLab

Pozadie

Rovnako ako GitHub, aj GitLab má svoje vlastné hostingové riešenie a nazývajú ho GitLab Pages. Musím im to dať, je jednoduchšie nastaviť kontinuálne nasadenie na stránky GitLab ako na stránky GitHub.

Ako používať

1. Zaregistrujte sa alebo sa prihláste do GitLab
2. Pridajte repozitár do GitLabu, ak ho tam ešte nemáte. Môžete vidličku, ktorú som tam pridal 
   Podobne ako pri stránkach GitHub musíte upraviť App.jsx kam voláme Smerovač a pridať  základné meno aby sa zhodoval s názvom repo. Takže toto je posledná zmena:                                                               Musíme zmeniť základné meno pretože stránky GitLab nasadia web do URL tohto formulára: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Webová stránka nebude správne fungovať bez základného názvu nastaveného pre reagovať-smerovač-dom.
3. Po úprave a odoslaní projektu do GitLab prejdite do Nastavenia > Stránky a privíta vás štvorkrokový sprievodca na nasadenie repozitára na stránky GitLab. 
4. Prvým krokom v sprievodcovi je zadanie obrazu zostavy. Použijeme Node.js LTS.
5. Ďalej zadáme príkaz pre-build. The npm ci tu bude stačiť.
6. Teraz pre krok budovania. Musíme prejsť — –dist-dir public pretože GitLab Pages očakávajú, že web bude zabudovaný v verejnosti adresár. Ľutujeme, nemôžete sa dostať preč so žiadnym iným adresárom.
7. Potvrdiť novo vygenerované .gitlab-ci.yml súbor, ktorý GitLab povie, ako nasadiť váš web.
8. Teraz prejdite do časti CI/CD -> Pipelines v repo a sledujte výkon novo pridaného potrubia.
9. Po určitom čase sa úloha potrubia dokončí a web bude nasadený na stránkach GitLab.

Tu je výsledok.

Výhody a nevýhody

Balíky sa inštalujú pomaly a musíte pridať ďalší kód, aby to fungovalo, ale sprievodca je super intuitívny a nasadenie má iba štyri kroky.

Vykresliť

Pozadie

Render je novým dieťaťom v bloku, ktorý sa spustí v roku 2019. Snaží sa narušiť spôsob, akým ľudia nasadzujú svoje služby (vrátane statických webových stránok). Zatiaľ sa im darí a ich počet rastie.

Ako používať

1. Zaregistrujte sa alebo sa prihláste do Render.
2. Vytvorte novú statickú webovú lokalitu stlačením tlačidla „Nová“ a výberom položky „Statická lokalita“.
3. Vyberte repo, ktoré chcete nasadiť.
4. Ponechajte si priadza; stavať priadzu príkaz build v nastavení build. Bohužiaľ to nefunguje s npm ci; npm spustiť zostavenie ako to robia iné služby. Zmeňte „Publikovať adresár“ na dist a kliknite na „Vytvoriť statickú stránku“.
5. Po určitom čase Render nasadí kód.

Tu je živý URL od Render.

Výhody a nevýhody

Je to naozaj rýchle, ale pre náš projekt s príkazmi `npm ci` a `npm run build` to nefunguje dobre. Zdá sa, že funguje iba „priadza“.

Prepätie

Pozadie

Surge je tu už nejaký ten piatok. Ich služba sa jednoducho používa a na nasadenie vašej statickej webovej stránky stačí jeden alebo dva príkazy. Je to zadarmo, ale ponúka platený plán 30 $ mesačne. Stoicizmus nástroja je to, vďaka čomu žiari. Nie je potrebné žiadne zložité nastavenie, stačí nainštalovať `surge` a spustiť ho pomocou `surge`.

Ako používať

1. Ak sa chcete pripraviť, utekajte npm spustiť zostavenie na generovanie statických súborov vo vnútri dist adresár. The prepätia použije ich na nasadenie.
2. Bežať npm install –globálny nárast
3. Potom bežte prepätia.

Je potrebné poznamenať niekoľko vecí:
Ak ho spúšťate prvýkrát, budete si musieť vytvoriť účet v Surge. Nebojte sa, je to jednoduché. Stačí zadať váš email a požadované heslo.

Potom sa zobrazí výzva na zadanie „projektu“, čo by mala byť cesta k súboru dist adresár. Môžete len pridať dist na cestu, ktorú ste dostali, ak ste spustili prudký nárast vo vnútri repo, ktoré nasadzujete.

Potom zadajte budúce URL svojej webovej stránky. Skúste niečo jedinečné, pretože čo prepätia ponúknutá pre mňa nefungovala.

Po vstupe URL sa prepätia nasadí obsah z dist na špecifikovaný URL. Tu je to, čo som dostal:

Výhody a nevýhody

Je to rýchle a jednoduché a nevyžaduje, aby ste si osvojili samostatné rozhranie – ale nedokáže vám navrhnúť dostupný URL pre vašu aplikáciu.

Čas na nasadenie pre každú službu hostingu

Naše top 3 bezplatné hostingové služby React

1. Netlify
2. Vercel
3. Prepätie

Kľúčové veci

Po otestovaní každej z týchto bezplatných služieb hostenia aplikácií React si myslíme, že Netlify je to najlepšie zo všetkých. Poskytuje rýchle nasadenie s množstvom funkcií, ktoré by ste mohli potrebovať. Hneď potom je Vercel, ktorý má veľa funkcií a je pomerne rýchly po prvom nasadení. Potom máme Surge, čo je minimálny nástroj na nasadenie, ktorý môže byť pomerne lacný, ak sa rozhodnete inovovať.

Automatizujte zostavovanie svojho frontendu a odosielajte svoju aplikáciu 10x rýchlejšie. Zistite viac.