8 bezplatných hostingových služeb aplikace React12 min read

Takže jste vytvořili aplikaci React, ale nejste si jisti, jak nebo kde ji hostit. V tomto článku vás provedeme 8 bezplatnými hostingovými službami React a ukážeme vám, jak jsme nasadili tuto aplikaci React pomocí každého z nich a sdělíme vám, co jsme se v tomto procesu naučili.

Vytvořili jsme naši aplikaci v Figma pomocí Anima plugin, který nám umožnil přidat funkčnost, responzivní chování a multimédia export dev-ready React kódu pro celé uživatelské rozhraní. Návrh a nasazení nám zabralo den.

Kde zdarma hostovat aplikaci React

Existuje rostoucí počet bezserverových hostingových řešení díky vzestupu rámců založených na komponentách, jako je React. V současnosti jsou dominantními platformami Amazon AWS, Microsoft Azure a Google Cloud. Stále však dochází k posunu směrem k vyhrazeným frontendovým hostingovým službám, které vyžadují méně úsilí a mohou vás rychle zprovoznit – a většina z nich zahrnuje CI/CD. Zde je 8 bezplatných hostingových služeb aplikace React, které jsme testovali:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. Stránky GitHub

6. Stránky GitLab

7. Vykreslit

8. Přepětí

Pojďme se ponořit do těchto bezplatných hostingových služeb React podrobněji a ukázat, jak jsme pomocí každé z nich nasadili aplikaci React. 

Netlify

Pozadí

Netlify bylo založeno v roce 2014 a od začátku se soustředilo na hostování statických webů. Přilákal mnoho vývojářů díky své velkorysé bezplatné úrovni. O několik let později se Netlify stal jedním z nejpopulárnějších hostitelů JAMstack a statických webových stránek.

Jak používat

1. V ideálním případě se zaregistrujete nebo přihlásíte pomocí GitHub. Díky tomu budete mít přístup k úložištím ve svém profilu a rychle je nasadit.
2. Po přihlášení klikněte na „Přidat nový web“ a vyberte „Importovat existující projekt“.
3. Poté klikněte na GitHub jako na svého poskytovatele.
4. Vyberte si „webovou stránku banky“ nebo jaký je název vašeho projektu.
5. Dolaďte nastavení nasazení (v případě našeho webu výchozí nastavení fungují perfektně) a poté klikněte na „Nasadit web“.
6. Po nasazení si jej můžete prohlédnout na veřejném URL, který můžete sdílet se světem. Hurá!

Zde je živá aplikace nasazená na Netlify.

Pro a proti

Netlify se snadno nastavuje a nasazuje, nemluvě o tom, že je to jedna z nejrychlejších služeb, které jsme zde testovali. Jednou nevýhodou je, že pokud potřebujete spolupracovníky a/nebo tým, musíte upgradovat na placený plán.

Vercel

Pozadí

Vercel (původně známý jako Zeit) byl založen v roce 2015 a rychle se proslavil. Jsou správci Next.js, oblíbeného frameworku React pro vytváření webových stránek. Nabízejí bezplatnou úroveň pro nekomerční weby a také způsoby, jak využít svou síť Edge pro funkce bez serveru.

Jak používat

1. Přihlaste se nebo se zaregistrujte u GitHub.
2. Klikněte na rozbalovací nabídku „Přidat nový…“ a vyberte „Projekt“.                                                             
3. Vyberte si „webovou stránku banky“ nebo svůj oblíbený projekt React.
4. Použili jsme výchozí nastavení pro nastavení nasazení a poté jsme klikli na „Nasadit“.
5. Po nějaké době jsme web zprovoznili.

Zde je živý URL.

Pro a proti

Vercel potřebuje nějaký čas na vyrovnávací paměť instalační části procesu nasazení, ale poté je to jedna z nejrychlejších služeb. Zobrazuje náhled nasazení pro každou větev, kterou pushujete, a dělá to rychle díky ukládání do mezipaměti.

AWS Amplify

Pozadí

AWS je rozsáhlá kolekce cloudových produktů a Amplify je inzerováno jako snadný způsob, jak získat některé z nich. S AWS Amplify můžete rychle vytvářet, dodávat a hostovat full-stack aplikace na AWS s flexibilitou pro využití šíře služeb AWS, jak se vyvíjejí případy použití.

Jak používat

1. Zaregistrujte se nebo se přihlaste do AWS, vyhledejte AWS Amplify a klikněte na „Začít“.
2. Vyberte GitHub a autorizujte jej (povolil jsem to pouze pro repo „bankovní webové stránky“).
3. Vyberte úložiště v části „Nedávno aktualizované úložiště“.
   1. V nastavení sestavení budeme muset změnit baseDirectory aby naše aplikace byla dist takhle: Potom by nastavení sestavení mělo vypadat takto:
4. V dalším kroku klikněte na „Uložit a nasadit“.
5. Po nějaké době bude web nasazen a připraven k použití.

A jsme živí! Zde je URL.

Pro a proti

Musíte upravit baseDirectory ve specifikaci nasazení – po vybalení není rozpoznán. Uživatelské rozhraní působí trochu neohrabaně, ale toto je osobní preference. AWS Amplify má obrovský potenciál, protože mnoho dalších webových služeb AWS je na dosah ruky.

Firebase

Pozadí

Firebase je služba Google, která je nejlépe známá jako platforma úložiště v reálném čase. Má však také možnost hostování pro statické webové stránky a mikroslužby Express.js nebo API a podporuje náhled URL pro pobočky, na kterých váš tým pracuje. Stejně jako u Netlify, Vercel a dalších obsluhuje nasazený obsah přes síť CDN.

Jak používat

1. Instalovat Firebase-tools s npm install -g firebase-tools.
2. Přihlaste se do Firebase pomocí přihlášení k firebase. Po přihlášení by se vám měla zobrazit zpráva podobná této:
3. Přesuňte se do adresáře projektu a spusťte Firebase init, měli byste vidět něco takového: Vyberte možnost konfigurace souborů pro Firebase Hosting s volitelným nasazením GitHub Action. Poté můžete vytvořit projekt přímo z CLI nebo k tomu použít Firebase UI a později jej připojit. Projekt jsme vytvořili z příkazového řádku a takto jsme zodpověděli výsledné otázky:                                                                    Poté budou vytvořeny jednoduché soubory „firebase“ a „firebase“.
4. Pak běžte nasazení firebase skutečně nasadit soubory z distadresář. Pokud adresář chybí, spusťte jej npm spustit sestavení nejprve vygenerovat soubory. The nasazení firebase příkaz by měl generovat výstup podobný příkladu níže:

Nyní můžete zobrazit webovou stránku na dodaném URL. Hurá! 

Pro a proti

Firebase je poměrně jednoduchá, ale když ji nastavíte v projektu, otázky, na které musíte odpovědět, jsou trochu matoucí. Naštěstí jsme vám na ně odpověděli ve výše uvedené části, ale než budete pokračovat, vyžadují pochopení skutečných funkcí Firebase. Kromě toho se Firebase rychle nasazuje a dokáže vygenerovat URL, kde si můžete prohlédnout nasazené soubory. Můžete to také snadno automatizovat pomocí nasazení GitHub Action s CLI, což je elegantní.

Stránky GitHub

Pozadí

Stránky GitHub existují již nějakou dobu a je to snadný způsob, jak publikovat dokumenty nebo osobní web přímo ze GitHub. Je to skvělé pro statický obsah a mnoho lidí jej používá k nasazení jednoduchých webů s minimálními investicemi. Je to zdarma, pokud je váš projekt veřejný a je to rychlý a levný způsob hostování webových stránek.

Jak používat

Vezměte prosím na vědomí, že musíte upravit App.jsx kam voláme Směrovač a přidat základní jméno aby odpovídal názvu repo. Takže takhle App.jsx by měl vypadat:                                                                                        Musíme změnit základní jméno protože stránky GitHub nasadí web do URL tohoto tvaru `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Web nebude správně fungovat bez základního názvu nastaveného pro reagovat-router-dom.

1. Po změně kódu musíme nainstalovat gh-stránky balíček s:
2. A přidejte a přednasadit a a nasadit skript do package.json:
3. Pak už prostě běžíme npm spustit nasazení. Spustí se to npm spustit sestavení a bude používat gh-stránky zveřejnit obsah dist do samostatné pobočky na GitHub tzv gh-stránky.
4. Nakonec zkontrolujte, zda je gh-stránky se používá pro stránky GitHub jako níže:

Zde je živý URL.

Pro a proti

Pokud nasazujete projekt, který se liší od vašeho uživatelského jména, bude nasazen v podadresáři na naší bezplatné doméně v rámci GitHub. Potom musíte napsat další kód pro podporu logiky toho, že jste uvnitř podadresáře.

V našem případě použití nepodporuje průběžné nasazování ihned po vybalení, ale můžete jej nastavit. Po nastavení je rychlé nasazení změn.

Stránky GitLab

Pozadí

Stejně jako GitHub má GitLab své vlastní hostingové řešení a nazývají ho GitLab Pages. Musím jim to dát, je jednodušší nastavit průběžné nasazení na stránky GitLab než na stránky GitHub.

Jak používat

1. Zaregistrujte se nebo se přihlaste do GitLab
2. Přidejte repo do GitLabu, pokud jej tam ještě nemáte. Můžete vidlička, kterou jsem tam přidal 
   Podobně jako u stránek GitHub musíte upravit App.jsx kam voláme Směrovač a přidat  základní jméno aby odpovídal názvu repo. Takže toto je poslední změna:                                                               Musíme změnit základní jméno protože stránky GitLab nasadí web do URL tohoto formuláře: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Web nebude správně fungovat bez základního názvu nastaveného pro reagovat-router-dom.
3. Jakmile projekt upravíte a odešlete do GitLab, přejděte do Nastavení > Stránky a budete uvítáni čtyřkrokovým průvodcem, který nasadí repozitář na stránky GitLab. 
4. Prvním krokem v průvodci je zadání obrazu sestavení. Použijeme Node.js LTS.
5. Dále zadáme příkaz pre-build. The npm ci zde bude stačit.
6. Nyní ke kroku sestavení. Musíme projít — –dist-dir public protože GitLab Pages očekávají, že budou mít web zabudovaný v veřejné adresář. Nemůžete se dostat pryč s žádným jiným adresářem, omlouvám se.
7. Potvrdit nově vygenerované .gitlab-ci.yml soubor, který GitLabu řekne, jak nasadit váš web.
8. Nyní přejděte do sekce CI/CD -> Pipelines repo a sledujte výkon nově přidaného potrubí.
9. Po nějaké době se úloha potrubí dokončí a web bude nasazen na stránky GitLab.

Tady je výsledek.

Pro a proti

Balíčky se instalují pomalu a je potřeba přidat další kód, aby fungovaly, ale průvodce je super intuitivní a jeho nasazení stačí jen čtyři kroky.

Vykreslit

Pozadí

Render je nové dítě na bloku, který byl spuštěn v roce 2019. Snaží se narušit způsob, jakým lidé nasazují své služby (včetně statických webů). Zatím se jim daří dobře a jejich počet přibývá.

Jak používat

1. Zaregistrujte se nebo se přihlaste do Render.
2. Vytvořte nový statický web stisknutím tlačítka „Nový“ a výběrem „Statický web“.
3. Vyberte repozitář, který chcete nasadit.
4. Udržujte příze; stavět příze příkaz build v nastavení sestavení. Bohužel to nejde s npm ci; npm spustit sestavení stejně jako ostatní služby. Změňte „Publikovat adresář“ na dist and click „Create Static Site.“
5. Po nějaké době Render nasadí kód.

Zde je živý URL od Render.

Pro a proti

Je to opravdu rychlé, ale pro náš projekt s příkazy `npm ci` a `npm run build` to nefunguje dobře. Zdá se, že funguje pouze „příze“.

Přepětí

Pozadí

Surge je tu už nějakou dobu. Jejich služba se snadno používá a stačí jeden nebo dva příkazy k nasazení vašeho statického webu. Je zdarma, ale nabízí placený tarif 30 $ měsíčně. Stoicismus nástroje je to, co ho rozzáří. Není potřeba žádné složité nastavení, stačí nainstalovat `surge` a spustit jej pomocí `surge`.

Jak používat

1. Chcete-li se připravit, běžte npm spustit sestavení pro generování statických souborů uvnitř dist adresář. The přepětí ty použije pro nasazení.
2. Spustit instalace npm –globální nárůst
3. Pak běžte přepětí.

Několik poznámek:
Pokud to spouštíte poprvé, budete si muset vytvořit účet u Surge. Nebojte se, je to snadné. Stačí zadat svůj email a požadované heslo.

Poté budete požádáni o zadání „projektu“, což by měla být cesta k souboru dist adresář. Můžete jen přiložit dist na cestu, kterou jste dostali, pokud došlo k nárůstu uvnitř repozitáře, který nasazujete.

Poté zadejte budoucí URL vašeho webu. Zkuste něco jedinečného, protože co přepětí nabídnutá mi nefungovala.

Po vstupu URL se zobrazí přepětí nasadí obsah z dist na specifikovaný URL. Zde je to, co jsem dostal:

Pro a proti

Je to rychlé a jednoduché a nevyžaduje, abyste si osvojili samostatné rozhraní – ale nedokáže vám navrhnout dostupný URL pro vaši aplikaci.

Čas nasazení pro každou hostingovou službu

Our top 3 free React hosting services

1. Netlify
2. Vercel
3. Přepětí

Klíčové věci

Po otestování každé z těchto bezplatných hostingových služeb React si myslíme, že Netlify je nejlepší ze všech. Poskytuje rychlé nasazení se spoustou funkcí, které byste mohli potřebovat. Hned poté je Vercel, který má spoustu funkcí a je poměrně rychlý po počátečním nasazení. Pak tu máme Surge, což je nástroj pro minimální nasazení, který může být poměrně levný, pokud se rozhodnete upgradovat.

Automatizujte sestavení frontendu a odešlete aplikaci 10x rychleji. Zjistěte více.