Nasazení aplikací Angular na stránky GitHub je skvělý způsob, jak je hostovat zdarma. Angular je populární JavaScriptový framework pro vytváření jednostránkových aplikací.

Angular má komplexní rozhraní příkazového řádku, které podporuje rychlé sestavení a nastavení aplikací JavaScript. Angular CLI má několik příkazů pro vytváření, sestavování, obsluhu a generování komponent aplikace.

CLI můžete také použít k nasazení aplikací Angular na různé cíle, včetně stránek GitHub.

Co potřebuješ

Abyste z této příručky vytěžili maximum, musíte mít následující dovednosti a nástroje:

  • Měli byste být obeznámeni s základy Angularu, jako je koncept aplikací, nastavení, adresy URL atd.
  • Jste obeznámeni s základy GitHubu a Git, jako je vytvoření účtu GitHub, vytvoření úložiště git (repo) a stránky GitHub (stránky GH).
  • Máte aplikaci Angular připravenou k nasazení.
  • Vaše základní adresa URL je na správné cestě. Nasazení na stránky GH se nezdaří kvůli nastavení nesprávného základního href (base-url).
  • Účet GitHub.
  • Úložiště GitHub (repo) s kódem aplikace.
instagram viewer

Nyní, když máte vše na svém místě, začněme proces nasazení.

Proces nasazení

Chcete-li začít, měli byste pro svůj projekt vytvořit úložiště GitHub a odeslat kód do hlavní/hlavní větev.

Dále vytvořte větev GH-pages.

1. Vytvořte větev GH-pages

Toto je hack, který vám pomůže získat odkaz na stránky GH, který vám pomůže nastavit základní href.

Nejprve vytvořte stránky GH ve vašem místním úložišti pomocí následujícího příkazu:

gh-pages větve git

Dále přejděte z hlavní větve na stránky GH a přeneste veškerý kód.

git checkout gh-pages

Poté odešlete GH-pages na GitHub a vytvořte vzdálenou větev GH-pages.

git push origin gh-pages

Na panelu nástrojů pod názvem úložiště klikněte na Nastavení > Stránky.

Pod Sestavení a nasazení, vyberte Nasazení z pobočky. Dále vyberte gh-stránky jako název pobočky a poté klikněte Uložit. Tím se vytvoří odkaz GH-pages vpravo nahoře pod štítkem GH-pages.

Dále zkopírujte tento odkaz na publikovaný web, jak je znázorněno níže. Tento odkaz použijete k nastavení základního odkazu během nasazení.

3. Nainstalujte Angular-CLI-GHpages

Balíček angular-cli-ghpages je nástroj, který Angular CLI používá pro účely nasazení.

Přejděte zpět do místního úložiště projektu. Poté nainstalujte a spusťte angular-cli-ghpages pomocí tohoto příkazu:

přidejte angular-cli-ghpages

4. Nasaďte aplikaci

Chcete-li vytvořit aplikaci v produkci, musíte ji připojit ke vzdálenému serveru na GitHubu.

Nakonfigurujte svou aplikaci na vzdálený server spuštěním následujícího příkazu:

nasazení --base-href=https://GithubUserName.github.io/GithubRepoName/

Nezapomeňte nahradit výše uvedený odkaz živým odkazem ze stránek GH

Úspěšné sestavení bude vypadat jako na obrázku níže:

Dále přejděte na GitHub a kliknutím na odkaz GH-pages zobrazte svůj nasazený projekt.

Gratulujeme, nasadili jste aplikaci Angular!

Pokud odkaz zobrazuje pouze soubor README, vraťte se prosím zpět do nastavení stránek GitHub GH. Ujistěte se, že vybraná větev je gh-pages a ne hlavní nebo hlavní větev. Pak tomu dejte pět minut a znovu nabijte. Někdy GitHubu trvá, než změny zohlední.

Chcete-li se dozvědět více o tom, jak můžete použít Angular CLI při nasazení, navštivte Úhlová dokumentace.

Jak nasadit aplikaci Angular na stránky GitHub

Existuje několik způsobů, jak nasadit aplikace Angular na stránky GH, ale tato metoda je nejjednodušší. Nastavíte svůj odkaz na úložiště stránek GH a použijete jej s Angular-CLI k nasazení aplikace na stránky GitHub.

S Angular a Angular CLI můžete dělat mnohem víc. Neváhejte a prozkoumejte. Použijte CLI k nasazení aplikací na stránky GH pro bezplatnou viditelnost a hostování vašich aplikací.