3 spôsoby, ako nasadiť aplikáciu React na Netlify

Dostaňte svoju aplikáciu React pred publikum s minimálnym úsilím pomocou funkcií nasadenia Netlify.

React je populárna knižnica JavaScript na vytváranie funkčných používateľských rozhraní v dynamických webových aplikáciách. Možno ste strávili veľa dlhých hodín ladením kódu React v snahe vybudovať ďalší Instagram alebo Airbnb.

Bez ohľadu na to, čo budujete, konečným cieľom je vždy prezentovať svoju prácu svetu. Tu sú užitočné hostingové platformy, ako je Netlify. Poskytujú sadu nástrojov, ktoré zefektívňujú proces nasadenia.

Postupujte ďalej a zistite, ako nasadiť svoje aplikácie React pomocou ľahko použiteľných nástrojov na nasadenie Netlify.

Čo je Netlify?

Netlify je cloudová vývojová platforma s funkciami, vďaka ktorým je hosťovanie a nasadzovanie aplikácií na webe oveľa jednoduchšie. Jednoducho povedané, poskytuje celý rad nástrojov a služieb, ktoré zefektívňujú a zjednodušujú proces a umožňujú vám nasadiť a hostiť webovú aplikáciu v priebehu niekoľkých sekúnd.

Hlavné funkcie Netlify

Netlify má celý rad funkcií, ktoré zjednodušujú proces nasadenia.

Poskytuje základné funkcie prístupu a správy verzií, ktoré umožňujú vývojovým tímom efektívne a efektívne spolupracovať na projektoch.
Ponúka zabezpečené hostingové služby, ktoré si môžete prispôsobiť podľa svojich potrieb. Okrem toho poskytuje automatické zálohovanie v prípade straty údajov.
Bezproblémovo sa integruje s populárnymi cloudovými vývojovými službami, ako sú GitHub, GitLab a Bitbucket.
Poskytuje funkcie, ktoré uľahčujú nastavenie a konfiguráciu vlastnej adresy URL domény a certifikátu SSL pre vašu aplikáciu.

Vytvorte aplikáciu Demo React

Ak chcete začať, budete musieť najprv vytvoriť demo aplikáciu React, ktorú nakoniec nasadíte na Netlify. Spustite nižšie uvedený príkaz na svojom termináli a vytvorte aplikáciu React:
```
npx create-react-app demo-react-netlify-app
```
Potom spustite tento príkaz terminálu, aby ste roztočili vývojový server:
```
npm start
```
Nakoniec spustite tento príkaz a vytvorte verziu vašej aplikácie pripravenú na výrobu:
```
npm run build
```

Nasaďte aplikáciu React na Netlify

Netlify poskytuje tri metódy, ktoré môžete použiť na nasadenie aplikácie React. Môžeš:

Importujte svoj projekt z hostiteľa úložiska Git, ako je GitHub.
Použite funkciu Drag and Drop.
Použite nástroj príkazového riadka, CLI Netlify.

Nasadenie pomocou funkcie importu GitHub

Začnite vytvorením úložiska na GitHub, kde budú uložené vaše projektové súbory aplikácie React. Prípadne môžete tiež hostiť svoje projektové súbory na akomkoľvek inom podporovanom poskytovateľovi Git, ako je GitLab, Bitbucket alebo Azure DevOps.
Potom si zaregistrujte účet na Netlify. Po registrácii prejdite na hlavný panel svojho účtu a vyberte kartu Stránky.
Kliknite na tlačidlo Importovať z Git.
Vyberte preferovanú platformu poskytovateľa Git. Netlify vás vyzve, aby ste sa overili u svojho poskytovateľa Git, aby ste mu poskytli prístup k vášmu účtu a úložiskám.
Keď to urobíte, Netlify zobrazí zoznam úložísk u vášho poskytovateľa Git. Vyberte úložisko projektu React, ktoré ste pôvodne poslali svojmu poskytovateľovi Git.
Po výbere úložiska musíte určiť, ako má Netlify zvládnuť proces nasadenia. V prípade statických webových stránok zvyčajne nemusíte robiť žiadne zmeny, avšak v prípade dynamických webových stránok, ako sú aplikácie React, budete musieť nastaviť nastavenia zostavy. Našťastie Netlify v predvolenom nastavení automaticky detekuje rámec použitý na zostavenie aplikácie a vyplní polia požadovanými nastaveniami zostavenia.
Nakoniec dokončite proces kliknutím na položku Nasadiť lokalitu.

Kliknutím na poskytnutú adresu URL zobrazíte aplikáciu vo svojom prehliadači. Ak máte vlastnú webovú adresu domény, môžete dať pokyn Netlify, aby ju používal s vašou stránkou aktualizáciou adresy URL z nastavení lokality.

Nasadenie pomocou funkcie Drag and Drop

Toto je najjednoduchší spôsob nasadenia vašej aplikácie React na Netlify. Stačí len pretiahnuť priečinok zostavenia do používateľského rozhrania Netlify.

Na hlavnom paneli Netlify vyberte kartu Stránka. Potom kliknite na položku Pridať novú lokalitu a potom z možností rozbaľovacej ponuky vyberte možnosť Nasadiť manuálne.
Na stránke funkcie drag-and-drop vyberte priečinok obsahujúci súbory zostavy React a vložte ho do tohto používateľského rozhrania. Projekt sa okamžite nasadí na Netlify.

Nasaďte pomocou rozhrania príkazového riadka Netlify

Pomocou rozhrania príkazového riadka (CLI) Netlify môžete nasadiť svoju aplikáciu React priamo z terminálu. Okrem toho vám CLI od Netlify umožňuje nakonfigurovať nepretržité nasadzovanie tak, že keď potvrdíte a odošlete nové aktualizácie do vášho úložiska Git, budú automaticky nasadené.

Spustite nižšie uvedený príkaz na svojom termináli a nainštalujte CLI Netlify:
```
npm install netlify-cli -g
```
Teraz spustite príkaz uvedený nižšie a nasaďte svoju aplikáciu. Pred nasadením sa uistite, že ste v pracovnom adresári projektu.
```
netlify deploy
```
CLI nasadí pracovnú verziu vašej aplikácie. Skontrolujte, či všetko funguje podľa očakávania.
Nakoniec spustite príkaz uvedený nižšie a nasaďte svoju aplikáciu do produkcie.
```
netlify deploy --prod
```

Porovnanie troch metód nasadenia

Metóda importu GitHub je najefektívnejšia na nasadenie produkčných aplikácií, pretože vám umožňuje prepojiť vaše úložisko Git priamo s Netlify a udržiavať váš kód v synchronizácii s ich živou webovou stránkou alebo aplikáciou. Keď potvrdíte a odošlete zmeny do svojho úložiska Git, Netlify automaticky aktualizuje webovú stránku.

Metóda drag-and-drop je jednoduchšia na nasadenie statických stránok, pretože nevyžaduje žiadne kódovanie ani nastavenie. Neumožňuje však automatické aktualizácie, keď vykonáte zmeny vo svojom úložisku.

Metóda CLI je najkomplexnejšia, pretože vám dáva plnú kontrolu nad procesom nasadenia a umožňuje vlastné konfigurácie. Táto metóda je najvhodnejšia, ak už veľmi dobre rozumiete Netlify a pohodlne pracujete s príkazovým riadkom.

Všetky tri metódy sú užitočné pri nasadzovaní aplikácií do Netlify. V konečnom dôsledku výber, ktorý sa použije, bude závisieť od potrieb každého jednotlivého projektu.

Používanie Netlify na nasadenie iných aplikácií

Netlify je výkonný a všestranný nástroj, ktorý môžete použiť na nasadenie iných aplikácií, ako len React. Môžete ho použiť na nasadenie a hosťovanie statických webových stránok a dynamických aplikácií vytvorených pomocou rôznych rámcov, ako je Angular.

Užívateľsky prívetivé rozhranie uľahčuje konfiguráciu, správu a nasadenie vašich API.