Úvod
Nasazení je proces přesunu našeho kódu ze systému pro kontrolu zdroje na hostitelskou platformu, kde je uložen a může sloužit jako aplikace koncovým uživatelům. Obvykle se to provádí v cloudu nebo na místním serveru.
Před příchodem cloudových platforem, jako je Netlify, zajišťovali hosting pouze poskytovatelé hostingu kteří požadovali opětovné nahrání všech statických prostředků (soubory sestavení vygenerované po spuštění npm run build ) pokaždé, když provedete změnu. Toto nahrání bylo provedeno pomocí softwaru FTP nebo systému správy webhostingu, jako je cPanel, což může být velmi stresující a technické.
Netlify má tento problém vyřešit! Poskytuje vám tři jednoduché způsoby nasazení aplikace – rozhraní přetažení, rozhraní pro import projektu a rozhraní příkazového řádku (CLI). I když jsou všechny vytvořeny tak, aby byly jednoduché, každý z nich je přizpůsoben s ohledem na jiný případ použití.
Proč používat Netlify?
Netlify je poskytovatel cloudového hostingu, který poskytuje bezserverové backendové služby pro statické webové stránky. Je navržen tak, aby maximalizoval produktivitu v tom smyslu, že umožňuje vývojářům (zejména orientovaným na frontend) a inženýrům rychle vytvářet, testovat a nasazovat webové stránky/aplikace.
Funguje to tak, že se připojíte k vašemu úložišti GitHub, odkud stahuje zdrojový kód. Poté spustí proces sestavení pro předběžné vykreslení stránek našeho webu/aplikace do statických souborů .
Existuje mnoho důvodů pro používání Netlify, zde je jen několik z nich:
- Netlify je levnější - vytvoření a hostování statického webu vám z dlouhodobého hlediska ušetří peníze. Netlify výrazně zvyšuje rychlost webu prostřednictvím globální distribuce a automatického předběžného vykreslování.
- Netlify neuvěřitelně jednoduché nasazení web – ve skutečnosti nejjednodušším způsobem, jak toho dosáhnout, je použít GitHub, GitLab nebo Bitbucket k nastavení nepřetržitého nasazení.
- Netlify velmi snadno spouští webové stránky s vestavěným řešením správy DNS.
- Mohli bychom snadno nasadit pouze konkrétní větev našeho projektu Git – je to užitečné pro testování nových funkcí, které se mohou nebo nemusí dostat do hlavní/hlavní větve, nebo pro rychlé určení, jak PR ovlivní váš web.
- Netlify vám umožňuje zobrazit náhled libovolného nasazení uděláte nebo chcete provést – to vám a vašemu týmu umožňuje vidět, jak budou změny vypadat v produkci, aniž byste je museli nasazovat na váš stávající web.
- Netlify poskytuje praktickou funkci odesílání formulářů která nám umožňuje shromažďovat informace od uživatelů.
Začínáme
V této příručce nasadíme aplikaci barevných odstínů a odstínů na Netlify. Je to jednoduchá aplikace React, která čerpá odstíny a odstíny z balíčku values.js.
Než začneme, pojďme si projít některé předpoklady pro používání Netlify:
- Mějte účet u jakéhokoli poskytovatele Git – GitHub, GitLab nebo Bitbucket.
- Mít
npmnainstalováno – dodává se s předinstalovaným uzlem nebo přízí. - Základní znalosti o používání terminálu (volitelné).
Přenesení kódu na GitHub
Nejprve musíme poslat náš projekt jakémukoli poskytovateli Git, než budeme moci nasadit naše aplikace na Netlify. V této příručce použijeme terminál k odeslání naší aplikace React na GitHub.
Začněme ale nejprve vytvořením úložiště GitHub. Poté se ujistěte, že jste vyplnili potřebné informace, a klikněte na Vytvořit úložiště :
Zpět v terminálu , začněme tím, že připravíme všechny naše soubory, abychom je mohli odevzdat do úložiště a poté vytvořit novou větev main pomocí následujících příkazů:
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
Jakmile je toto hotovo, můžeme nyní push do vytvořeného vzdáleného úložiště pomocí následujících příkazů:
$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main
Náš kód by se měl objevit, když aktualizujeme úložiště! Pokračujeme, existují tři hlavní způsoby implementace Netlify. Podívejme se na všechny metody a na konci je porovnejme.
Nasazení aplikace do Netlify
Netlify nabízí bezplatný tarif což nám umožňuje vytvořit si účet nebo se přihlásit pomocí jedné z možností uvedených na přihlašovací stránce (jak je vidět na obrázku níže).
Po přihlášení budeme přesměrováni na náš řídicí panel Netlify, kde k nasazení naší aplikace do Netlify použijeme jak metodu přetažení, tak metodu importu projektu.
Nasazení aplikace do Netlify pomocí Drag and Drop
Začneme vytvořením sestavení naší aplikace spuštěním příkazu níže:
$ npm run build
Jakmile to bude úspěšně dokončeno, vytvoří se naše složka sestavení, která bude obsahovat všechny soubory připravené k produkci (toto jsou soubory, které nahrajeme na Netlify pomocí metody přetažení).
Poznámka: To bude fungovat pouze pro statické soubory, jako jsou HTML, CSS a JS. Proto jsme museli nejprve sestavit náš projekt, aby mohl generovat naše statické soubory.
Klikněte na „Přidat nový web "> "Nasadit ručně" na naší stránce Přehled Netlify. Tím se dostaneme na stránku, kde přemístíme naše statické soubory. Pokud jsme přihlášeni, můžeme zde také přistupovat na stránku přetažení.
Dalším krokem by bylo zrušení vygenerované složky sestavení, aby se okamžitě nasadila na živou adresu URL, jak je vidět níže:
Nasazení aplikace do Netlify pomocí rozhraní CLI Netlify
Rozhraní příkazového řádku (CLI) Netlify nám umožňuje nasadit naši aplikaci přímo z příkazového řádku a také nakonfigurovat nepřetržité nasazení tak, aby Netlify automaticky nasazovalo nové verze našeho webu, když posíláme commity do našeho připojeného úložiště Git.
Prvním krokem by bylo nainstalovat CLI pomocí následujícího příkazu:
$ npm install netlify-cli -g
Tento příkaz nainstaluje Netlify globálně. V případě, že chcete nainstalovat Netlify CLI lokálně, spusťte následující příkaz z kořenového adresáře našeho projektu:
$ npm install netlify-cli --save-dev
Poznámka: Po úspěšné instalaci můžeme spustit netlify v našem terminálu zobrazíte seznam všech příkazů Netlify a toho, co dělají.
Prvním krokem při nasazení naší aplikace React pomocí Netlify CLI je ověření a získání přístupového tokenu prostřednictvím příkazového řádku spuštěním následujícího příkazu z libovolného adresáře:
$ netlify login
Tím se otevře karta prohlížeče, abyste nás mohli ověřit a udělit nám přístup k Netlify CLI :
Zdarma e-kniha:Git Essentials
Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!
Jakmile to bude úspěšné, můžeme nyní nasadit naši aplikaci pomocí deploy příkaz:
$ netlify deploy
To vyvolá několik otázek týkajících se nastavení:
Vzhledem k tomu, že již máme naši aplikaci Reagovat hostovanou na GitHubu, potřebujeme pouze "Propojit tento adresář s existujícím webem" . To nyní vyvolá další otázku:
Tato složka bude propojena s úložištěm GitHub, kam jsme vložili náš kód, a bude se zobrazovat automaticky, pokud bude přidána jako vzdálený původ. Poté bude naše stránka vytvořena a nasazena na návrh adresy URL, kterou si můžeme zobrazit zkopírováním a vložením adresy URL do prohlížeče:
Podle naší konzole "pokud vše na vašem konceptu adresy URL vypadá dobře, nasaďte ji na adresu URL hlavního webu s --prod vlajka." To nám umožňuje zobrazit náhled jakéhokoli nasazení, které provedeme, takže my a náš tým můžeme vidět, jak budou změny vypadat v produkci, aniž bychom je museli nasazovat na náš stávající web.
Aby naše aplikace fungovala, provedeme následující příkaz:
$ netlify deploy --prod
Jakmile to bude úspěšně dokončeno, dostaneme dvě důležité adresy URL:Unique Deploy URL (což představuje jedinečnou adresu URL pro každé jednotlivé nasazení) a Živá adresa URL (který vždy zobrazuje vaše nejnovější nasazení):
Takže pokaždé, když aktualizujeme a nasadíme náš web, získáme pro toto nasazení jedinečnou adresu URL. V zásadě, pokud nasadíme vícekrát, budeme mít několik jedinečných adres URL, které můžete použít k přesměrování uživatelů na konkrétní verzi vaší aplikace. Živá adresa URL však vždy zobrazuje naše nejnovější změny na stejné adrese URL.
Import projektu do Netlify Dashboard
Zatím jsme viděli, jak nasadit aplikaci React pomocí drag and drop, stejně jako Netlify CLI. Pokud nechceme používat CLI, můžeme vše udělat ručně importem projektu od vašeho poskytovatele Git na naši stránku Netlify. To může také provádět funkce podobné Netlify CLI.
Prvním krokem by bylo navštívit stránku našeho týmu Netlify a poté kliknout na „Přidat nový web "> "Importovat existující projekt" jak je vidět níže:
Poté nás přenese na stránku, kde můžeme vybrat poskytovatele Git, kde je hostován zdrojový kód vašeho webu/aplikace. V našem případě jsme šli s GitHub. Nyní můžeme hledat úložiště GitHub, jakmile bude autorizováno:
Jakmile projekt identifikujeme, můžeme nyní zvládnout nasazení. Tím se dostaneme na stránku, kde můžeme určit, kterou větev chceme nasadit, například pokud testujeme konkrétní vydání. Tato stránka nám také umožňuje zadat příkaz sestavení a umístění souboru sestavení (toto je automaticky zpracováno Netlify, pokud to nechceme změnit). Až skončíme, klikneme na "Deploy Site" tlačítko.
Když je naše nasazení úspěšné, měli bychom získat živou URL. Můžeme také upravit nastavení na stránce s přehledem nastavení, jako je nastavení domény, zobrazení protokolů nasazení atd.
Porovnání možností nasazení
Všechny první tři metody nám pomáhají s nasazením, ale poslední dvě metody pomáhají s dalšími funkcemi, jako je průběžné nasazení, nasazení konkrétních větví, zpracování testů a tak dále.
Rozhraní drag and drop je užitečné, když chcete rychle nasadit soubory sestavení, aniž byste museli poslat svůj kód jakémukoli poskytovateli Git. Netlify CLI a Dashboard plní stejné funkce pod kapotou. Netlify CLI přijímá všechny příkazy prostřednictvím čistého terminálu, takže se nebudete muset zabývat zbytečnou navigací a můžete očekávat, že se bude měnit méně často než webová stránka.
Výběr toho nejlepšího je věcí osobních preferencí vývojáře, přičemž mnozí preferují CLI kvůli nižším požadovaným režijním nákladům – můžete jej používat z IDE, je čisté a stručné a v průběhu času se tolik nemění.
Chyba manipulace se stránkou nenalezena
Pokud používáme router, jako je React Router, budeme muset nakonfigurovat přesměrování a pravidla přepisu pro naše adresy URL. Protože se nám zobrazí chybová stránka 404, když klikneme na jakoukoli navigační položku, abychom změnili stránku (trasu) a obnovili prohlížeč.
Výsledkem je, že Netlify velmi usnadňuje konfiguraci přesměrování a přepisování pravidel pro naše adresy URL. Budeme muset přidat soubor s názvem _redirects do složky sestavení naší aplikace, aby k tomu došlo automaticky, vložíme ji do public složku. V souboru musí být zahrnuto následující pravidlo přepisu:
/* /index.html 200
Bez ohledu na to, jakou adresu URL prohlížeč požaduje, toto pravidlo přepisu obslouží soubor index.html namísto vracení 404. Abychom tedy viděli nejnovější změny v živé adrese URL, musíme ji znovu nasadit pomocí libovolné z preferovaných metod . Po změně trasy a obnovení aplikace se nám již nebude zobrazovat chybová stránka 404:
Závěr
Nasazení je proces přesunu našeho kódu ze systému kontroly zdroje na hostitelskou platformu, kde je uložen a může sloužit jako aplikace koncovým uživatelům. Obvykle se to provádí v cloudu nebo na místním serveru.
Před příchodem cloudových platforem, jako je Netlify, zajišťovali hosting pouze poskytovatelé hostingu kteří požadovali opětovné nahrání všech statických prostředků (soubory sestavení vygenerované po spuštění npm run build ) pokaždé, když provedete změnu. Toto nahrání bylo provedeno pomocí softwaru FTP nebo systému správy webhostingu, jako je cPanel, což může být velmi stresující a technické.
V této příručce jsme viděli, jak snadno nasadit aplikaci React do Netlify třemi způsoby – přes rozhraní přetažení, rozhraní Netlify CLI a Netlify Dashboard. Také jsme se naučili, jak opravit 404 chyba, ke které dochází, když vaše aplikace React používá router.