Wdrażanie aplikacji Angular na stronach GitHub to świetny sposób na ich bezpłatne hostowanie. Angular to popularny framework JavaScript do tworzenia aplikacji jednostronicowych.

Angular ma wszechstronny interfejs wiersza poleceń, który obsługuje szybkie tworzenie i konfigurowanie aplikacji JavaScript. Angular CLI ma kilka poleceń do tworzenia, budowania, udostępniania i generowania komponentów aplikacji.

Możesz także użyć interfejsu CLI do wdrażania aplikacji Angular w różnych miejscach docelowych, w tym na stronach GitHub.

Czego potrzebujesz

Aby w pełni wykorzystać ten przewodnik, musisz posiadać następujące umiejętności i narzędzia:

  • Powinieneś być zaznajomiony podstawy Angulara, takich jak koncepcja aplikacji, ustawień, adresów URL itp.
  • jesteś zaznajomiony podstawy GitHuba i Git, jak tworzenie konta GitHub, tworzenie repozytorium git (repo) i stron GitHub (stron GH).
  • Masz aplikację Angular gotową do wdrożenia.
  • Twój podstawowy adres URL znajduje się na właściwej ścieżce. Wdrożenia na stronach GH kończą się niepowodzeniem z powodu ustawienia niewłaściwego base-href (base-url).
    • instagram viewer
  • Konto GitHub.
  • Repozytorium GitHub (repo) z kodem aplikacji.

Teraz, gdy masz już to wszystko, zacznijmy proces wdrażania.

Proces wdrażania

Aby rozpocząć, powinieneś utworzyć repozytorium GitHub dla swojego projektu i przekazać kod do główny/główny oddział.

Następnie utwórz gałąź GH-pages.

1. Utwórz oddział GH-pages

To jest hack, który pomoże ci uzyskać link do stron GH, aby pomóc ustawić base-href.

Najpierw utwórz strony GH w lokalnym repozytorium za pomocą następującego polecenia:

git branch gh-pages

Następnie sprawdź z głównego oddziału na strony GH, aby przenieść cały kod.

git checkout gh-pages

Następnie wypchnij GH-pages do GitHub, aby utworzyć zdalną gałąź GH-pages.

git push origin strony gh

Na pasku narzędzi pod nazwą repozytorium kliknij Ustawienia > Strony.

Pod Budowanie i wdrażanie, wybierać Wdróż z oddziału. Następnie wybierz gh-strony jako nazwę oddziału, a następnie kliknij Ratować. Spowoduje to utworzenie łącza do stron GH w prawym górnym rogu pod etykietą stron GH.

Następnie skopiuj ten link do opublikowanej witryny, jak pokazano poniżej. Użyjesz linku, aby skonfigurować base-ref podczas wdrażania.

3. Zainstaluj Angular-CLI-GHpages

Pakiet angular-cli-ghpages to narzędzie, którego Angular CLI używa do celów wdrażania.

Wróć do lokalnego repozytorium projektu. Następnie zainstaluj i uruchom angular-cli-ghpages za pomocą tego polecenia:

ng add angular-cli-ghpages

4. Wdróż aplikację

Aby zbudować aplikację w środowisku produkcyjnym, musisz połączyć ją ze zdalnym serwerem w usłudze GitHub.

Skonfiguruj swoją aplikację na serwerze zdalnym, uruchamiając następujące polecenie:

wdrażanie --base-href=https://GithubUserName.github.io/GithubRepoName/

Pamiętaj, aby zastąpić powyższy link linkiem na żywo ze stron GH

Pomyślna kompilacja będzie wyglądać tak, jak na poniższej ilustracji:

Następnie przejdź do GitHub i kliknij link do stron GH, aby zobaczyć wdrożony projekt.

Gratulacje, wdrożyłeś swoją aplikację Angular!

Jeśli link wyświetla tylko plik README, wróć do ustawień GitHub GH-pages. Upewnij się, że wybrana gałąź to strony gh, a nie gałąź główna lub główna. Następnie daj mu pięć minut i przeładuj. Czasami GitHub potrzebuje czasu, aby odzwierciedlić zmiany.

Aby dowiedzieć się więcej o tym, jak możesz używać Angular CLI we wdrożeniu, odwiedź stronę Dokumentacja kątowa.

Jak wdrożyć aplikację Angular na stronach GitHub

Istnieje kilka sposobów wdrażania aplikacji Angular na stronach GH, ale ta metoda jest najłatwiejsza. Konfigurujesz łącze repozytorium stron GH i używasz go z Angular-CLI do wdrażania aplikacji na stronach GitHub.

Dzięki Angular i Angular CLI możesz zrobić o wiele więcej. Zapraszamy do zwiedzania. Użyj CLI, aby wdrożyć aplikacje na stronach GH, aby uzyskać bezpłatny wgląd i hosting dla swoich aplikacji.