Úvod
Když vývojář vytvoří aplikaci, dalším krokem je sdílet ji s přáteli nebo veřejností, aby k ní měl přístup každý. Tento proces přenosu kódu z vývojového prostředí na hostitelskou platformu, kde je poskytován koncovým uživatelům, se nazývá nasazení .
Hosting býval docela neefektivní, než se objevily cloudové hostingové platformy jako Heroku. Prováděli to hlavně poskytovatelé hostingu, kteří vyžadovali nahrání všech statických aktiv (soubory sestavení generované spuštěním npm run build ) pokaždé, když provedeme změnu. Neexistoval žádný jiný způsob, jak nahrát statické soubory, než nějaký druh FTP rozhraní (buď lokálního nebo na hostitelském serveru), což může být docela stresující a technické.
Co je Heroku a proč jej používat?
Heroku je cloudová platforma založená na kontejnerech, která umožňuje vývojářům snadno nasazovat, spravovat a škálovat moderní aplikace. To umožňuje vývojářům soustředit se na svou hlavní práci – vytvářet skvělé aplikace, které potěší a zaujmou uživatele. Jinými slovy, Heroku zvyšuje produktivitu vývojářů tím, že nasazení, škálování a správu aplikací je co nejjednodušší.
Existuje mnoho důvodů, proč bychom měli používat Heroku:
- Podporuje více jazyků - od základu platforma Heroku podporuje více než osm jazyků, včetně Node, Java a Python.
- Podporuje několik databází a datová úložiště – Heroku umožňuje vývojářům vybrat si z různých databází a datových úložišť na základě specifických požadavků jednotlivých aplikací – Postgres SQL, MySQL, MongoDB a tak dále.
- Levnější - vytvoření a hostování statického webu nám z dlouhodobého hlediska ušetří peníze.
Začínáme
V této příručce nasadíme aplikaci pro vyhledávání filmů, což je jednoduchá aplikace React, která vyhledává filmy v rozhraní API. Než začneme, měli byste se zaregistrovat do Heroku, pokud ještě nemáte účet, protože zde nasadíme naši aplikaci React. Můžeme přejít na Heroku.com a zaregistrovat se kliknutím na tlačítko registrace v pravém horním rohu. Registrační kanál je v podstatě standardní, takže byste neměli mít problémy s vytvořením účtu na Heroku:
Když si vytvoříte účet Heroku, můžeme přistoupit ke skutečnému nasazení naší aplikace.
Poznámka: Dříve existovala možnost nasazení prostřednictvím integrace GitHub, ale tato funkce byla zrušena z důvodu porušení zabezpečení. Nejlepší způsob, jak nasadit do Heroku, je nyní přes Heroku Git, což se děje v našem CLI (Rozhraní příkazového řádku ).
Nasazení pomocí Heroku Git
Heroku používá Git systém správy verzí pro správu nasazení aplikací. Je důležité poznamenat, že k nasazení naší aplikace React do Heroku nemusíme být experti na Git, vše, co potřebujeme znát, jsou některé základy, které budou popsány v této příručce.
Pokud si nejste jisti Git - nebojte se. Probereme vše, co potřebujete vědět. Jinak se podívejte na náš bezplatný kurz na Git:Git Essentials:Vývojářský průvodce Git
Než začneme
Jako název Heroku Git znamená, že budeme používat Git, což znamená, že musíme mít Git nainstalovaný. Totéž platí pro Heroku CLI. Pokud tyto dva nemáte nainstalované, můžete se řídit následujícími pokyny, které vás provedou instalačním procesem:
- Pokyny k instalaci Git
- Pokyny k instalaci Heroku CLI
Po jejich úspěšné instalaci můžeme přistoupit k vytvoření aplikace na Heroku, do které bude později nasazena naše aplikace React. Aplikaci na Heroku můžeme vytvořit dvěma způsoby – přes terminál (příkaz CLI) nebo ručně na našem panelu Heroku .
Poznámka: Obvyklá mylná představa je, že Git a GitHub jsou stejné věci, ale nejsou! Git je systém správy verzí, který používá mnoho aplikací a služeb, mimo jiné GitHub. K používání Heroku proto nemusíte předávat svůj kód na GitHub ani mít účet GitHub.
Jak ručně vytvořit aplikaci Heroku
Nejprve se podívejme, jak můžeme vytvořit aplikaci pomocí řídicího panelu Heroku. Prvním krokem je kliknout na vytvořit novou aplikaci tlačítko:
To by nás přesměrovalo na stránku, kde musíme vyplnit informace o aplikaci, kterou chceme vytvořit:
Poznámka: Ujistěte se, že si pamatujete jméno aplikace, kterou jste vytvořili na Heroku, protože brzy připojíme naše místní úložiště k tomuto vzdálenému úložišti.
Po dokončení tohoto procesu můžeme začít nasazovat naši aplikaci z místního prostředí do Heroku. Než se však podíváme na to, jak aplikaci nasadit, zvažte alternativní přístup k vytvoření aplikace Heroku – pomocí rozhraní Heroku CLI.
Jak vytvořit aplikaci Heroku prostřednictvím rozhraní CLI
Případně můžete vytvořit aplikaci na Heroku pomocí CLI. Heroku se postaral o to, aby to bylo co nejpřímější. Jediné, co musíte udělat, je spustit následující příkaz ve vámi zvoleném terminálu (stačí nahradit <app-name> se skutečným názvem vaší aplikace):
$ heroku create -a <app-name>
Poznámka: Pokud tento příkaz spustíte z kořenového adresáře aplikace, prázdné úložiště Heroku Git se automaticky nastaví jako vzdálené pro naše místní úložiště.
Jak poslat kód do Heroku
Prvním krokem před odesláním kódu do Heroku bude umístění do kořenového adresáře vaší aplikace (v terminálu). Poté použijte heroku login příkaz pro přihlášení do řídicího panelu Heroku. Poté musíte přijmout podmínky Heroku a nakonec se přihlásit do Heroku pomocí svých přihlašovacích údajů:
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!
Poté budete vráceni do terminálu, takže můžete pokračovat v procesu nasazení do Heroku. Nyní byste měli inicializovat úložiště:
$ git init
A poté zaregistrujte aplikaci, kterou jsme vytvořili dříve na Heroku, jako vzdálené úložiště pro místní úložiště, které jsme inicializovali v předchozím kroku:
$ heroku git:remote -a <app-name>
Poznámka: Nezapomeňte nahradit <app-name> s názvem aplikace, kterou jsme dříve vytvořili na Heroku (např. movies-search-app ).
Nyní můžeme přistoupit k nasazení naší aplikace. Ale protože potřebujeme nasadit aplikaci React, musíme nejprve přidat React buildpack:
$ heroku buildpacks:set mars/create-react-app
Jakmile je to dokončeno, dalším krokem je skutečně odeslat náš kód do vzdáleného úložiště, které jsme vytvořili na Heroku. Prvním krokem je připravit naše soubory, odevzdat je a nakonec je odeslat do vzdáleného úložiště:
$ git commit -am "my commit"
$ git push heroku main
Poznámka: Předpokládejme, že chceme přepnout naši větev z main až development . Můžeme spustit následující příkaz:git checkout -b development .
Jakmile jsme úspěšně přešli na Heroku, můžeme otevřít naši nově nasazenou aplikaci v našem prohlížeči:
$ heroku open
Jak aktualizovat naši implementaci
Další otázkou, kterou byste pravděpodobně měli, je, jak znovu nasadit aplikaci poté, co v ní provedeme změny. Funguje to podobně jako na jakékoli platformě založené na Git – vše, co musíme udělat, je připravit soubory, odevzdat a poté poslat kód do Heroku:
$ git commit -am "added changes"
$ git push heroku main
Heroku tuto změnu automaticky převezme a aplikuje ji na živou aplikaci.
Závěr
Heroku může být docela užitečným nástrojem pro nasazení vaší aplikace React. V tomto článku jsme se podívali na to, jak nasadit aplikaci React do Heroku pomocí Heroku Git. Kromě toho jsme prošli několik základních příkazů Git, které budete potřebovat při práci s Heroku Git, a nakonec jsme probrali, jak znovu nasadit aplikaci poté, co v ní provedete změny.