Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

React je populární JavaScriptová knihovna pro vytváření funkčních uživatelských rozhraní v dynamických webových aplikacích. Možná jste strávili mnoho dlouhých hodin laděním kódu React ve snaze vytvořit další Instagram nebo Airbnb.

Bez ohledu na to, co budujete, konečným cílem je vždy předvést svou práci světu. Zde se hodí hostingové platformy, jako je Netlify. Poskytují sadu nástrojů, které zjednodušují proces nasazení.

Postupujte dále a zjistěte, jak nasadit své aplikace React pomocí snadno použitelných nástrojů pro nasazení Netlify.

Co je Netlify?

Netlify je cloudová vývojová platforma s funkcemi, které značně usnadňují hostování a nasazování aplikací na webu. Jednoduše řečeno, poskytuje řadu nástrojů a služeb, které zefektivňují a zjednodušují proces a umožňují vám nasadit a hostovat webovou aplikaci během několika sekund.

Hlavní funkce Netlify

instagram viewer

Netlify má řadu funkcí, které zjednodušují proces nasazení.

  • Poskytuje základní funkce pro přístup a správu verzí, které umožňují vývojovým týmům efektivně a efektivně spolupracovat na projektech.
  • Nabízí zabezpečené hostingové služby, které si můžete upravit podle svých potřeb. Navíc poskytuje automatické zálohování v případě ztráty dat.
  • Bezproblémově se integruje s oblíbenými cloudovými vývojovými službami, jako jsou GitHub, GitLab a Bitbucket.
  • Poskytuje funkce, které usnadňují nastavení a konfiguraci vlastní adresy URL domény a certifikátu SSL pro vaši aplikaci.

Vytvořte aplikaci Demo React

  1. Chcete-li začít, budete muset nejprve vytvořit demo aplikaci React které nakonec nasadíte na Netlify. Spusťte níže uvedený příkaz na svém terminálu a vytvořte aplikaci React: 
    npx create-react-app demo-react-netlify-app
  2. Dále spusťte tento příkaz terminálu, abyste roztočili vývojový server: 
    npm start
    Pokračujte a prohlédněte si výsledky ve svém prohlížeči na adrese http://localhost: 3000.
  3. Nakonec spusťte tento příkaz a vytvořte verzi vaší aplikace připravenou k produkci: 
    npm spustit sestavení
    Tento příkaz vygeneruje požadované produkční soubory a prostředky v nové složce v kořenovém adresáři s názvem build. Složka sestavení zachycuje zmenšenou verzi celé aplikace, která obsahuje vše potřebné k nasazení aplikace.

Nasaďte aplikaci React na Netlify

Netlify poskytuje tři metody, které můžete použít k nasazení aplikace React. Můžeš:

  • Importujte svůj projekt z hostitele úložiště Git, jako je GitHub.
  • Použijte funkci Drag and Drop.
  • Použijte nástroj příkazového řádku, CLI Netlify.

Nasazení pomocí funkce importu GitHubu

  1. Začněte tím vytvoření úložiště na GitHubu pro umístění souborů projektu aplikace React. Případně můžete také hostovat soubory projektu na jakémkoli jiném podporovaném poskytovateli Git, jako je GitLab, Bitbucket nebo Azure DevOps.
  2. Dále si zaregistrujte účet na Netlify. Jakmile se zaregistrujete, přejděte na hlavní panel svého účtu a vyberte možnost Weby tab.
  3. Klikněte na Import z Git knoflík.
  4. Vyberte preferovanou platformu poskytovatele Git. Netlify vás vyzve k ověření u vašeho poskytovatele Git, aby mu udělil přístup k vašemu účtu a úložištím.
  5. Jakmile to uděláte, Netlify zobrazí seznam úložišť u vašeho poskytovatele Git. Vyberte úložiště projektu React, které jste původně poslali svému poskytovateli Git.
  6. Po výběru úložiště musíte určit, jak má Netlify zacházet s procesem nasazení. U statických webů obvykle nemusíte provádět žádné změny, ale u dynamických webů, jako jsou aplikace React, budete muset nastavit sestavení. Naštěstí Netlify ve výchozím nastavení automaticky detekuje rámec použitý k sestavení aplikace a naplní pole požadovanými nastaveními sestavení.
  7. Nakonec klikněte Nasadit web dokončit proces.

Kliknutím na poskytnutou adresu URL zobrazíte aplikaci ve svém prohlížeči. Pokud máte vlastní adresu URL domény, můžete dát Netlify pokyn, aby ji používal s vaším webem, a to aktualizací adresy URL z nastavení webu.

Nasazení pomocí funkce Drag and Drop

Toto je nejjednodušší způsob nasazení aplikace React na Netlify. Složku sestavení stačí přetáhnout do uživatelského rozhraní Netlify přetažením.

  1. Na hlavním panelu Netlify vyberte místo tab. Dále klikněte na Přidat nový web a poté vyberte Nasadit ručně z možností rozbalovací nabídky.
  2. Na stránce funkce přetažení vyberte složku obsahující soubory sestavení React a přetáhněte ji do tohoto uživatelského rozhraní. Projekt bude okamžitě nasazen na Netlify. Případně můžete kliknout na Procházením nahrajte vyberte složku sestavení ze systému souborů.

Nasazení pomocí rozhraní příkazového řádku Netlify

Pomocí rozhraní příkazového řádku (CLI) Netlify můžete nasadit svou aplikaci React přímo z terminálu. CLI Netlify vám navíc umožňuje nakonfigurovat průběžné nasazení tak, že když odevzdáte a pošlete nové aktualizace do vašeho úložiště Git, budou automaticky nasazeny.

  1. Spusťte níže uvedený příkaz na svém terminálu a nainstalujte CLI Netlify: 
    npm Nainstalujte netlify-cli -g
  2. Nyní spusťte níže uvedený příkaz k nasazení aplikace. Před nasazením se ujistěte, že jste v pracovním adresáři projektu. 
    netlify nasadit
    CLI Netlify vás vyzve, abyste mu umožnili provádět změny ve vašem účtu. Po udělení oprávnění uveďte název týmového účtu, který jste uvedli při registraci, poté zvolte, zda chcete propojit adresář aplikace s existující webovou stránkou nebo vytvořit a nakonfigurovat novou jeden. Dokončete zadáním vlastního názvu webu a názvu složky sestavení.
  3. CLI nasadí pracovní verzi vaší aplikace. Zkontrolujte, zda vše funguje podle očekávání.
  4. Nakonec spusťte níže uvedený příkaz a nasaďte aplikaci do produkce. 
    netlify nasadit --prod

Porovnání tří metod nasazení

Metoda importu GitHub je nejúčinnější pro nasazení produkčních aplikací, protože umožňuje propojení své úložiště Git přímo do Netlify a udržujte svůj kód synchronizovaný s jejich živým webem nebo aplikací. Když potvrdíte a pošlete změny do svého úložiště Git, Netlify automaticky aktualizuje web.

Metoda drag-and-drop je jednodušší pro nasazení statických webů, protože nevyžaduje žádné kódování ani nastavení. Neumožňuje však automatické aktualizace, když provedete změny ve vašem úložišti.

Metoda CLI je nejkomplexnější, protože vám dává plnou kontrolu nad procesem nasazení a umožňuje vlastní konfigurace. Tato metoda je nejvhodnější, pokud již velmi dobře rozumíte Netlify a pracujete s příkazovým řádkem.

Všechny tři metody jsou užitečné pro nasazení aplikací do Netlify. V konečném důsledku bude výběr, který použít, záviset na potřebách každého jednotlivého projektu.

Použití Netlify k nasazení dalších aplikací

Netlify je výkonný a všestranný nástroj, který můžete použít k nasazení jiných aplikací, než jen React. Můžete jej použít k nasazení a hostování statických webových stránek a dynamických aplikací vytvořených pomocí různých rámců, jako je Angular.

Uživatelsky přívětivé rozhraní usnadňuje konfiguraci, správu a nasazení vašich API.