27 kwi 2017

Hosting aplikacji Angular w Github Pages

Dziś o tym, jak można za darmo opublikować stronę napisaną w Angular (a tak naprawdę każdą statyczną stronę) przy użyciu infrastruktury GitHub. Tytułowe GitHub Pages to po prostu kolejne repozytorium gita, które zakładamy w serwisie, a jego zawartość jest prezentowana jako strona w domenie github.io.

GitHub

Strona którą chcemy opublikować może być prezentowana pod adresem
(1) nazwa_uzytkownika.github.io lub
(2) nazwa_uzytkownika.github.io/nazwa_repozytorium.
Od tego którą opcję wybierzemy zależy dalsza konfiguracja.
W przypadku opcji 1 musimy założyć nowe repozytorium o dokładnie takiej nazwie jak podany wyżej adres. Ja najpierw wybrałem tę opcję, więc założyłem repozytorium thorin87.github.io. W tej opcji robimy push plików ze stroną do brancha master nowo założonego repo i po maksymalnie kilku minutach strona powinna już działać.
W opcji 2 mamy już repozytorium (znowu na moim przykładzie - retirement-savings). Na potrzeby opublikowania strony musimy zatem stworzyć branch o nazwie gh-pages i tam umieścić pliki html, js, css itd. które tworzą naszą stronę.

Publikacja

W internecie można znaleźć mnóstwo opisów jak przy pomocy Angular CLI i komendy
ng github-pages:deploy
można uprościć cały proces build i deploy. Problem w tym, że ta komenda została usunięta 3 lutego i teraz po jej wydaniu dostajemy tylko komunikat
The specified command github-pages:deploy is invalid.
Na szczęście internet nie znosi próżni i jest już paczka, która zastępuje brakującą komendę: angular-cli-ghpages
Instaluję więc paczkę i buduję projekt:
npm i -g angular-cli-ghpages
ng build --prod
Pozostało wysłanie wyniku na serwer, w zależności od tego opcji wybranej w pierwszej części będzie to
ngh --repo=https://GH_TOKEN@github.com/thorin87/thorin87.github.io.git --branch=master
lub
ngh --repo=https://GH_TOKEN@github.com/thorin87/retirement-savings.git
GH_TOKEN obecny w adresach repozytorium to token dostępowy GitHub, który możemy wygenerować tutaj: https://github.com/settings/tokens/new (w tym wypadku potrzebne jest zaznaczenie scope repo). Oczywiście dla swoich potrzeb musisz podmienić również nazwę użytkownika i nazwę repozytorium w adresach.

To wszystko! Rezultat w przypadku mojej makiety frontendu można zobaczyć pod adresem thorin87.github.io oraz https://thorin87.github.io/retirement-savings.

0 komentarze:

Prześlij komentarz