Ułatw problemy związane z produkcją i wdrażaniem dzięki potokowi CI/CD, który zajmuje się pracochłonnymi szczegółami.

Wdrażanie aplikacji internetowych w Firebase Hosting może być kłopotliwe. Jednak za pomocą akcji GitHub możesz uprościć i usprawnić proces wdrażania oraz sprawić, że niezwykle łatwo jest zarządzać przepływami pracy wdrażania przez cały okres eksploatacji oprogramowania projekt.

Wystarczy kilka prostych kroków, aby skonfigurować przepływ pracy wdrożenia, aby zautomatyzować ten proces. Obejmuje to śledzenie nowych zmian w oddziałach i rejestrowanie wszelkich błędów. Czytaj dalej, aby dowiedzieć się, jak wdrożyć aplikację React w usłudze hostingowej Firebase.

Co to jest potok CI/CD?

Potok CI/CD (Continuous Integration/Continuous Delivery) to zestaw zautomatyzowanych procesów zaimplementowanych w celu umożliwienia ciągłego budowania, testowania i wdrażania aplikacji.

Mówiąc najprościej, potok CI/CD jest skonfigurowany w celu zautomatyzowania procesów związanych z cyklem życia oprogramowania. Obejmuje to faktyczne opracowywanie, testowanie, wydania (wersja beta, alfa i wersja ostateczna), poprawki błędów, a nawet aktualizacje funkcji. Zasadniczo proces ten umożliwia łatwe i szybkie dostarczanie wysokiej jakości oprogramowania.

instagram viewer

Rurociąg CI/CD zazwyczaj obejmuje kilka etapów, w tym:

  1. Etap źródłowy: Ta faza obejmuje rzeczywisty rozwój i konserwację kodu aplikacji za pomocą narzędzia do kontroli wersji, takiego jak Git.
  2. Etap kompilacji: Ten krok składa kod źródłowy ze wszystkimi jego zależnościami w formacie wykonywalnym.
  3. Etap testowania: Ten etap obejmuje automatyczne testy w celu sprawdzenia jakości oprogramowania. Ostatecznym celem jest wykrycie i poprawienie wszelkich błędów. Na tym etapie możesz przeprowadzać różne rodzaje testów, a gdy kod przejdzie testy, jest gotowy do wdrożenia.
  4. Wdrożenie: ten etap automatyzuje proces wdrażania w środowisku produkcyjnym.

Potok powinien monitorować każdy etap, aby upewnić się, że nie ma błędów i ulepszyć cały proces dla przyszłych wydań.

Co to są akcje GitHub?

GitHub Actions to funkcja udostępniana przez GitHub w celu zautomatyzowania procesów przepływu pracy wdrażania oprogramowania w potokach CI/CD. Umożliwia definiowanie i automatyzację przepływów pracy wdrażania bezpośrednio z repozytorium GitHub projektu.

GitHub Actions ma kilka zalet:

  1. Łatwy w użyciu: GitHub Actions zapewnia przyjazny dla użytkownika interfejs i prostą składnię do konfigurowania przepływów pracy wdrażania. Możesz łatwo i szybko zdefiniować przepływy pracy projektu za pomocą wbudowanego edytora na GitHub.
  2. Natywna integracja: GitHub Actions jest częścią GitHub, co ułatwia konfigurowanie, zarządzanie i współpracę nad przepływami pracy wraz z kodem projektu.
  3. Elastyczne i konfigurowalne: GitHub Actions zapewnia elastyczną i konfigurowalną platformę, która gwarantuje, że możesz tworzyć przepływy pracy, które odpowiadają Twoim konkretnym potrzebom. Ponadto obsługuje wiele języków programowania. Oznacza to, że możesz go używać z dowolną preferowaną technologią.

Skonfiguruj projekt Firebase i klienta React

Aby rozpocząć, przejdź do Baza ogniowa i zaloguj się na swoje konto Google. Na stronie przeglądu konsoli kliknij Utwórz projekt aby skonfigurować nowy projekt i podać nazwę projektu.

Następny, stworzyć aplikację React i zainstaluj narzędzia wiersza poleceń Firebase:

npm install -g firebase-tools

Możesz znaleźć kod tego projektu w jego Repozytorium GitHub.

Zaloguj się do Firebase ze swojego terminala przy użyciu poświadczeń konta Firebase.

login do bazy firebase: ci

Spowoduje to uruchomienie przepływu uwierzytelniania Firebase, który poprosi o podanie danych logowania, jeśli nie jesteś jeszcze zalogowany. Gdy Firebase Cię uwierzytelni, wydrukuje token. Skopiuj ten token; użyjesz go do uruchamiania poleceń Firebase w konfiguracji GitHub Actions.

Na koniec utwórz gotową do produkcji wersję swojej aplikacji:

npm uruchom kompilację

To polecenie generuje niezbędne pliki i zasoby w nowym folderze „build” w katalogu głównym, wymagane do wdrożenia aplikacji.

Zainicjuj Firebase w swojej aplikacji React

Uruchom to polecenie, aby zainicjować Firebase w folderze projektu:

init bazy ogniowej

Następnie potwierdź, że chcesz zainicjować Firebase w swoim projekcie i wybierz Hosting: Skonfiguruj pliki dla Firebase Hosting i (opcjonalnie) skonfiguruj wdrożenia GitHub Actionz listy opcji.

Określ, że chcesz użyć istniejącego projektu, i wybierz nazwę projektu, którą początkowo utworzyłeś w konsoli programisty Firebase.

Następnie określ folder „build” jako publiczny katalog, wybierz NIE aby przepisać wszystkie adresy URL na opcję /index.html, wybierz NIE do opcji konfigurowania automatycznych kompilacji i wdrożeń z GitHub, a na koniec Select Tak aby nadpisać opcję pliku build/index.html.

Po wprowadzeniu powyższych zmian CLI utworzy plik firebase.json w katalogu głównym. Ten plik zawiera całą konfigurację hostingu wymaganą przez przepływ pracy GitHub Actions.

Wreszcie, przed skonfigurowaniem przepływu pracy GitHub Actions, stworzyć repozytorium na GitHubi przenieś do niego pliki projektu.

Konfigurowanie akcji GitHub

W repozytorium projektu w serwisie GitHub wybierz Ustawienia > Sekrety i zmienne > działania. Na tajnej stronie repozytorium wprowadź FIREBASE_TOKEN jako nazwę klucza tajnego i wklej token Firebase, który skopiowałeś w pliku Tajniki pola.

Skonfiguruj przepływ pracy wdrażania

Kliknij kartę Akcje w repozytorium projektu i wybierz Skonfiguruj Nodejs przepływ pracy w Ciągła integracja Sekcja.

Następnie zmień nazwę pliku na firebase.yml, usuń kod wzorcowy w edytorze i dodaj poniższy kod:

# Ten przepływ pracy przeprowadzi czystą instalację zależności węzłów,
# buforować/przywracać je, budować źródło koduj i przeprowadzaj testy w różnych
# wersje węzła
# Aby uzyskać więcej informacji, zobacz:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nazwa: Firebase CI


NA:
 naciskać:
 gałęzie: [ główne ]
 prośba o pociągnięcie:
 gałęzie: [główne]


Oferty pracy:
 zbudować:


 uruchomione: najnowsze ubuntu


 strategia:
 matryca:
 wersja węzła: [14.x]

 kroki:
 - używa: actions/checkout@v2
 - nazwa: Użyj Node.js ${{ matrix.node-version }}
 używa: actions/setup-node@v1
 z:
 wersja-węzła: ${{ matrix.wersja-węzła }}
 - uruchom: npm install -g npm
 - nazwa: npm zainstaluj, zbuduj i przetestuj
 biegać: |
 instalacja npm
 npm uruchom kompilację
 - nazwa: Archiwum Build
 używa: actions/upload-artifact@v2
 z:
 nazwa: budowa
 ścieżka: buduj

 wdrożyć:
 imię: Wdrożenie
 potrzeby: budowa
 uruchomione: najnowsze ubuntu
 kroki:
 - używa: actions/checkout@v2
 - nazwa: Pobierz kompilację
 używa: actions/download-artifact@v2
 z:
 nazwa: budowa
 ścieżka: buduj
 - nazwa: Wdróż do Firebase
 używa: w9jds/firebase-action@master
 z:
 argumenty: wdrożyć --tylko hosting
 Środowisko:
 FIREBASE_TOKEN: ${{ tajemnic. FIREBASE_TOKEN }}

Oto objaśnienie niektórych kluczowych właściwości:

  1. NA: zdarzenia wyzwalające działania w tym przepływie pracy.
  2. Oferty pracy: Określa zadania, które powinna uruchomić dana akcja. W tym przypadku istnieją dwa zadania: tworzenie i wdrażanie.
  3. Dobieg: maszyna, na której ma zostać uruchomiona ta akcja.
  4. Kroki: Definiuje sekwencję kroków, które Akcja ma wykonać dla określonego zadania.
  5. Z:Określa wszystkie argumenty wymagane do uruchomienia akcji.
  6. Nazwa: Nazwa określonego kroku zadania.

Na koniec zatwierdź zmiany wprowadzone w tym pliku. GitHub automatycznie uruchomi ten przepływ pracy, budując i wdrażając aplikację React w usłudze hostingowej Firebase. Adres URL aktywnej aplikacji można sprawdzić w dziennikach wdrażania.

Wdrażanie aplikacji przy użyciu akcji GitHub

GitHub Actions zapewnia usprawnione podejście do wdrażania. Dzięki temu możesz konsekwentnie i niezawodnie wdrażać aplikacje, niezależnie od technologii, w jakiej je tworzysz.

Ponadto możesz łatwo dostosować przepływ pracy wdrażania, korzystając z wbudowanych narzędzi wdrażania, aby spełnić określone potrzeby potoku CI/CD.