Wdrażaj aplikację kątową na bazę ogniową dzięki działaniom GitHub

Ten zestaw instrukcji pomaga skonfigurować działania GitHub w celu zbudowania projektu kątowego i wdrożenia w hostingu Firebase na imprezie push. Nawet możesz odnieść ten samouczek, aby zbudować dowolny węzeł.Aplikacja JS i wdrażanie w Firebase.

Działania GitHub umożliwia automatyzację, dostosowywanie i realiza. Jest to najlepszy sposób na tworzenie i utrzymanie ciągłego wdrażania integracji/ciągłego wdrażania (CI/CD) dla Twojej aplikacji.

Zakładamy, że już popchnąłeś swoją aplikację do repozytorium GitHub. Zacznijmy od konfiguracji akcji GitHub.

Krok 1 - Utwórz akcję github

Zaloguj się na swoje konto GitHub i uzyskaj dostęp do repozytorium. W swoim repozytorium kliknij działania Tab, a następnie kliknij „sam skonfiguruj przepływ pracy”Link.

Zobacz poniżej zrzut ekranu w celach informacyjnych:

Krok 2 - Utwórz przepływ pracy

Po kliknięciu linku Setp Workflow, edytuje to nowy plik ”.github/przepływy pracy/główne.yml ”w ramach repozytorium. Który zawiera domyślną konfigurację dla przepływu pracy.

Zobaczysz nowo krążący plik, coś takiego:

Zadania: # Ten przepływ pracy zawiera pojedyncze zadanie o nazwie „Build” Build: # Typ biegacza, który zadanie będzie działać na biegu: Ubuntu-Latest # Kroki reprezentują sekwencję zadań, które zostaną wykonane w ramach kroków zadania : # Sprawdza repozytorium pod $ github_workspace, aby Twoje zadanie może do niego uzyskać dostęp - używa: Działania/[chronione e -mail] # Uruchamia pojedyncze polecenie za pomocą powłoki Runners - Nazwa: Uruchom jedną linię Uruchom skryptu: Echo Hello, World World, World, World, World, World, World, World, World, World, światowy! # Uruchamia zestaw poleceń za pomocą powłoki biegaczy - Nazwa: Uruchom wielopoziomowy Uruchom skryptu: | Echo Dodaj inne działania, aby budować, echo testu i wdrożyć swój projekt. 

Krok 3 - Dostosuj swój przepływ pracy

Teraz dostosujemy plik konfiguracji przepływu pracy na podstawie naszych wymagań. W tym kroku rozpadamy konfigurację krok po kroku, aby zrozumieć. Nawet możesz pominąć ten krok, ponieważ pełny plik konfiguracyjny jest dostarczany w następnych krokach.

1. Zdefiniuj nazwę przepływu pracy - To jest opcjonalny krok, ale możesz nadać nazwę swojego przepływu pracy.

   Nazwa: wdrożenie_to_firebase_hosting 

2. Dostosuj nazwę zadania - Wszystkie zadania są zdefiniowane w sekcjach „Jobs:”. Najpierw zmieniamy kompilację nazwy zadań deszczowych na wdrażanie Firebase. Możesz to zmienić na dowolną nazwę według.

   Zadania: rozkładanie basenu: 

3. Dostosuj spust - Domyślny przepływ pracy wywołuje na każdym nacisku do dowolnej gałęzi. Może być konieczne ograniczenie tego do określonych gałęzi.

   Na przykład włącz sprysk przepływu pracy tylko na pchanie do gałęzi głównych lub wydania/*:

   ON: push: gałęzie: - main - wydanie/* 

4. Zaktualizuj akcję kasy - Domyślny przepływ pracy wykorzystuje działania/[chronione e -mail], która jest najnowszą wersją. Więc nie trzeba tutaj wprowadzać zmian, ale nadal możesz to zmienić na większość aktualnych działań/[chroniony e -mailem]

   - używa: Działania/[chronione e -mailem] 

5. Dostosuj węzeł.JS Build Trigger - Teraz zdefiniuj węzeł.Wersja JS i polecenie kompilacji do aplikacji kątowej. Na przykład używamy węzła.JS 12.x wersja do zbudowania tej aplikacji.

   Kroki: - Używa: Działania/[chroniony e -mail] - Używa: Działania/[chronione e -mail] z: Node -Version: '12.X ' - Uruchom: instalacja NPM - Uruchom: NPM Uruchom kompilację: Prod 

6. Rozmieścić w Firebase - Ostatnim krokiem jest wdrożenie aplikacji do funkcji Firebase.

   Kroki: - Używa: Działania/[chroniony e -mail] - Używa: Działania/[chronione e -mail] z: Node -Version: '12.X ' - Uruchom: instalacja npm - Uruchom: NPM Uruchom kompilację: Prod - Używa: W9jds/[e -mail chroniony] z: args: wdrożenie - w hosting env: fireBase_Token: $ secrets.FireBase_Token 

   Zgodnie z powyższą konfiguracją wdrożenie zostanie wykonane tylko w przypadku hostingu Firebase. Możesz nawet zmienić wartość argsów na „wdrażać -tylko funkcję„Aby wdrożyć funkcje Firbase.

Teraz kliknij, kliknij zatwierdzenie po prawej stronie, aby popełnić nowy przepływ pracy.

Krok 4 - Ustaw token Firebase

Działania Github Wdrażanie zadania potrzebują FireBase_Token dla uwierzytelnienia w celu wdrożenia kodu w Firebase. Możesz wygenerować token za pomocą narzędzi Firebase CLI w systemie.

Najpierw zainstaluj narzędzia Firebase za pomocą NPM.

NPM i -G Firebase Tools  

Następnie uruchom Logowanie bazowe: CI polecenie na terminalu:

Logowanie bazowe: CI  

To pokaże link na terminalu, otwórz ten link w przeglądarce internetowej i wypełnić autoryzację. To pokaże token do użycia do zadań CI.

Przykład: Firebase wdrożenie - -token "\ $ FireBase_Token"

Ponieważ nie jest bezpieczne utrzymanie tego tokenu w pliku konfiguracyjnym. Dodaj ten token do tajemnic github.

W swoim repozytorium Github idź do Ustawienia> Sekrety> Nowe sekret repozytorium:

Używać FireBase_Token jako nazwa i wprowadź tajny kod w wartość Sekcja. Następnie kliknij przycisk Dodaj tajny.

Krok 5 - Końcowa konfiguracja przepływu pracy

Ostateczny plik konfiguracyjny przepływu pracy powinien wyglądać coś takiego w edytorze tekstu:

plik: .github/przepływ pracy/główny.yml

Nazwa: wdrażanie_to_firebase_hosting on: push: gałęzie: - master - release/* zadania: FireBase -Deploy: Runs -On: Ubuntu -Latest Kroki: - Używa: Działania/[chroniony e -mail] - Używa: Działania/[chroniony e -mail] z: Node-wersja: '12.X ' - Uruchom: instalacja npm - Uruchom: NPM Uruchom kompilację: Prod - Używa: w9jds/[e -mail chroniony] z: args: wdrażanie - Hosting env: FireBase_Token: $ Secrets.FireBase_Token 

Teraz możesz zatwierdzić plik konfiguracyjny przepływu pracy do swojego repozytorium. Ten przepływ pracy jest dodawany do .github/przepływy pracy/główne.yml. Możesz zmienić główny.Wybór fielname YML z .rozszerzenie YML.

Następnie śmiało ipisz kilka zmian w swoim repozytorium Github. Spowoduje to rozstrzygnięcie akcji GitHub i wykona kroki zdefiniowane w przepływie pracy.

Wniosek

W tym samouczka.

Możesz także odwiedzić dokumentację akcji GitHub, aby uzyskać więcej informacji.