React je populárna JavaScriptová knižnica 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ť, musíte najprv vytvorte 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 rozbehli vývojový server:
Pokračujte a pozrite si výsledky vo svojom prehliadači na adrese http://localhost: 3000.npm štart - Nakoniec spustite tento príkaz na vytvorenie verzie vašej aplikácie pripravenej na výrobu:
Tento príkaz vygeneruje požadované produkčné súbory a aktíva v novom priečinku v koreňovom adresári s názvom build. Priečinok zostavenia zachytáva zmenšenú verziu celej aplikácie, ktorá obsahuje všetko potrebné na nasadenie aplikácie.npm spustiť zostavenie
Nasaďte aplikáciu React na Netlify
Netlify poskytuje tri metódy, ktoré môžete použiť na nasadenie vašej aplikácie React. Môžeš:
- Importujte svoj projekt z hostiteľa úložiska Git, ako je napríklad GitHub.
- Použite funkciu Drag and Drop.
- Použite nástroj príkazového riadka, CLI Netlify.
Nasadenie pomocou funkcie importu GitHub
- Začnite tým vytvorenie úložiska na GitHub na umiestnenie vašich projektových súborov 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.
- Ďalej si zaregistrujte účet na Netlify. Po registrácii prejdite na hlavný panel svojho účtu a vyberte položku Stránky tab.
- Klikni na Importovať z Gitu tlačidlo.
- 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, ale 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 kliknite Nasadiť stránku dokončiť proces.
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žil 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 ovládacom paneli Netlify vyberte položku stránky tab. Ďalej kliknite na Pridať nový web a potom vyberte Nasadiť manuálne z možností rozbaľovacej ponuky.
- 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. Prípadne môžete kliknúť na Prehliadajte a nahrajte vyberte priečinok zostavy zo systému súborov.
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, rozhranie CLI od Netlify vám umožňuje nakonfigurovať nepretržité nasadzovanie tak, že keď odošlete a odošlete nové aktualizácie do svojho úložiska Git, budú automaticky nasadené.
- Spustite nižšie uvedený príkaz na svojom termináli a nainštalujte CLI Netlify:
npm Inštalácia 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.
CLI Netlify vás vyzve, aby ste mu umožnili vykonávať zmeny vo vašom účte. Po udelení povolenia uveďte názov tímového účtu, ktorý ste uviedli pri registrácii, potom vyberte, či chcete prepojiť adresár aplikácie s existujúcou webovou stránkou alebo vytvoriť a nakonfigurovať novú jeden. Dokončite zadaním vlastného názvu webovej lokality a názvu priečinka zostavy.netlify nasadiť - 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 nasadiť --prod
Porovnanie troch metód nasadenia
Metóda importu GitHub je najefektívnejšia na nasadenie produkčných aplikácií, pretože umožňuje prepojenie svoje úložisko Git priamo do Netlify a udržujte svoj 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 bude výber, ktorý sa použije, 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.