Nasaďte aplikáciu Angular na stránky GitHub pomocou rozhrania Angular CLI

Okamžite spustite aplikáciu Angular tým, že ju budete bezplatne hostovať na stránkach GitHub.

Nasadenie aplikácií Angular na stránky GitHub je skvelý spôsob, ako ich bezplatne hostiť. Angular je populárny rámec JavaScriptu na vytváranie jednostránkových aplikácií.

Angular má komplexné rozhranie príkazového riadku, ktoré podporuje rýchle zostavenie a nastavenie aplikácií JavaScript. Angular CLI má niekoľko príkazov na vytváranie, zostavovanie, obsluhu a generovanie komponentov aplikácie.

Môžete tiež použiť CLI na nasadenie aplikácií Angular na rôzne ciele vrátane stránok GitHub.

Čo potrebuješ

Aby ste z tejto príručky vyťažili maximum, musíte mať nasledujúce zručnosti a nástroje:

  • Mali by ste byť oboznámení so základmi Angular, ako je koncept aplikácií, nastavenia, adresy URL atď.
  • Ste oboznámení so základmi GitHub a Git, ako je vytvorenie účtu GitHub, vytvorenie úložiska git (repo) a stránok GitHub (GH-pages).
  • Máte pripravenú aplikáciu Angular na nasadenie.
  • Vaša základná adresa URL je na správnej ceste. Nasadenie na stránky GH zlyhá kvôli nastaveniu nesprávnej základnej hodnoty (base-url).
  • Účet GitHub.
  • Úložisko GitHub (repo) s kódom aplikácie.

Teraz, keď to všetko máte na mieste, začnite proces nasadenia.

Proces nasadenia

Na začiatok by ste mali pre svoj projekt vytvoriť úložisko GitHub a poslať kód do vetvy main/master.

Ďalej vytvorte vetvu GH-pages.

1. Vytvorte vetvu stránok GH

Toto je hack, ktorý vám pomôže získať odkaz na stránky GH, ktorý vám pomôže nastaviť základnú hodnotu.

Najprv vytvorte stránky GH vo svojom lokálnom úložisku pomocou nasledujúceho príkazu:

git branch gh-pages

Potom prejdite z hlavnej pobočky na stránky GH, aby ste preniesli celý kód.

git checkout gh-pages

Potom odošlite stránky GH na GitHub a vytvorte vzdialenú vetvu stránok GH.

git push origin gh-pages

2. Získajte odkaz na Repo

Na paneli s nástrojmi pod názvom úložiska kliknite na položku Nastavenia > Stránky.

V časti Vytvorenie a nasadenie vyberte možnosť Nasadiť z pobočky. Ďalej vyberte gh-pages ako názov pobočky a kliknite na tlačidlo Uložiť. Tým sa vytvorí odkaz GH-pages vpravo hore pod štítkom GH-pages.

Potom skopírujte tento odkaz na publikovanú lokalitu, ako je znázornené nižšie. Odkaz použijete na nastavenie základnej referencie počas nasadenia.

3. Nainštalujte Angular-CLI-GHpages

Balík angular-cli-ghpages je nástroj, ktorý Angular CLI používa na účely nasadenia.

Prejdite späť do miestneho úložiska projektov. Potom nainštalujte a spustite angular-cli-ghpages pomocou tohto príkazu:

ng add angular-cli-ghpages

4. Nasaďte aplikáciu

Ak chcete vytvoriť aplikáciu v produkcii, musíte ju pripojiť k vzdialenému serveru na GitHub.

Nakonfigurujte svoju aplikáciu na vzdialený server spustením nasledujúceho príkazu:

ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/

Nezabudnite nahradiť vyššie uvedený odkaz živým odkazom zo stránok GH

Úspešná zostava bude vyzerať ako na obrázku nižšie:

Potom prejdite na GitHub a kliknutím na odkaz GH-pages zobrazte svoj nasadený projekt.

Gratulujeme, nasadili ste aplikáciu Angular!

Ak odkaz zobrazuje iba súbor README, vráťte sa späť na nastavenia stránok GitHub GH. Uistite sa, že vybratá vetva je gh-pages a nie hlavná alebo hlavná vetva. Potom dajte päť minút a znova nabite. Niekedy GitHub potrebuje čas, aby reflektoval zmeny.

Ak sa chcete dozvedieť viac o tom, ako môžete použiť Angular CLI pri nasadení, navštívte dokumentáciu Angular.

Ako nasadiť aplikáciu Angular na stránky GitHub

Existuje niekoľko spôsobov, ako nasadiť aplikácie Angular na stránky GH, ale táto metóda je najjednoduchšia. Nastavíte svoj repo odkaz na stránky GH a použijete ho s Angular-CLI na nasadenie svojej aplikácie na stránky GitHub.

S Angular a Angular CLI môžete robiť oveľa viac. Neváhajte a preskúmajte. Použite CLI na nasadenie aplikácií na stránky GH pre bezplatnú viditeľnosť a hosťovanie vašich aplikácií.

Súvisiace články: