Skonfiguruj ten przepływ pracy, aby automatycznie wdrożyć aplikację w środowisku produkcyjnym i usprawnić proces wydawania.

Netlify to platforma hostingowa i kompleksowy zestaw narzędzi do wdrażania i zarządzania aplikacjami internetowymi w chmurze.

Ale jego funkcje wykraczają daleko poza to — jego funkcje bezserwerowe umożliwiają uruchamianie kodu po stronie serwera bez serwera dedykowanego.

Dowiedz się, jak skonfigurować potok CI/CD w celu wdrożenia interfejsu API REST Node.js w Netlify przy użyciu GitHub Actions.

Potoki CI/CD z akcjami GitHub: przegląd

Potoki ciągłej integracji i ciągłego dostarczania (CI/CD) to seria sekwencyjnych, zautomatyzowanych procesów, którym poddawane są aplikacje przed wysłaniem ich do produkcji.

Zazwyczaj potoki CI/CD składają się z kilku kluczowych faz, w tym faz źródła, kompilacji, testowania i wdrażania.

Chociaż możliwe jest ręczne wykonanie tych faz, ich automatyzacja ma kilka zalet, w tym:

  • Minimalizacja ryzyka błędów ludzkich.
  • Przyspieszenie procesu wydania.
    • instagram viewer
  • Zapewnienie spójnego przepływu pracy w celu dostarczenia wysokiej jakości oprogramowania do produkcji.

Co to są akcje GitHub?

GitHub Actions to narzędzie zintegrowane z GitHub, które zapewnia szeroką gamę gotowych akcji możesz użyć do zdefiniowania przepływów pracy jako kodu bezpośrednio w repozytorium projektu, aby zautomatyzować CI/CD rurociągi.

Możesz także tworzyć niestandardowe działania, aby dopasować je do konkretnych potrzeb projektowych, co pozwala na bezproblemowe tworzenie i wdrażanie aplikacji w środowisku produkcyjnym. Jedną z zalet GitHub Actions jest bezproblemowa integracja z innymi funkcjami GitHub, takimi jak pull requesty i śledzenie problemów.

Dzięki temu możliwe jest uruchamianie przepływów pracy w oparciu o określone zdarzenia, takie jak nowe zatwierdzenie, co zapewnia automatyczne uruchamianie potoków CI/CD w razie potrzeby.

Skonfiguruj projekt Node.js

Aby rozpocząć, musisz utworzyć serwer sieciowy Express. Aby to zrobić, utwórz lokalnie nowy folder i zmień katalog na swoim terminalu.

mkdir express-netlify
cd express-netlify

Następnie utwórz plik pakiet.json plik za pomocą npm, menedżer pakietów węzłów.

npm init -y

Na koniec zainstaluj zależności wymagane w projekcie.

npm install express netlify-lambda serverless-http

The netlify-lambda pełni rolę lokalnego serwera programistycznego, który ułatwia testowanie funkcji bezserwerowych. bezserwerowe-http pomaga w dostosowaniu aplikacji Express.js do formatu zgodnego z bezserwerowymi programami obsługi funkcji.

Netlify nie zapewnia natywnej obsługi hostingu i uruchamiania pełnoprawnych aplikacji zaplecza. Zamiast tego oferuje funkcje bezserwerowe jako alternatywne rozwiązanie do obsługi funkcji zaplecza.

Te funkcje zarządzają logiką po stronie serwera, obsługują żądania API HTTP i udostępniają zawartość dynamiczną, zapewniając funkcjonalność podobną do zaplecza w paradygmacie bezserwerowym.

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

Utwórz Express Web Server

Utwórz trzy foldery: dyst, Funkcje, I źródło w katalogu głównym folderu projektu.

Przed skonfigurowaniem serwera Express utwórz puste miejsce indeks.html plik w dyst teczka. Ten plik działa jako symbol zastępczy, który umożliwia Netlify pomyślne wdrożenie aplikacji Express i obsługę tras API.

Teraz utwórz plik źródło/aplikacja.js plik i dodaj następujący kod:

konst ekspres = wymagać("wyrazić");
konst bezserwerowy = wymagać(„bezserwerowy-http”);
konst aplikacja = ekspres();
konst router = ekspres. router();


router.get("/", (wymaganie, res) => {
 wyślij ponownie ("Witaj świecie!")
});


aplikacja.użyć(`/.netlify/funkcje/aplikacja`, router);
moduł.eksport = aplikacja;
moduł.exports.handler = bezserwerowy (aplikacja);

Ten kod definiuje serwer Express z pojedynczą trasą dla głównego adresu URL, który obsługuje żądania GET. The aplikacja.użyj Funkcja rejestruje oprogramowanie pośredniczące trasy w aplikacji Express, zapewniając, że wszelkie żądania HTTP kierowane do ścieżki /.netlify/functions/app będą właściwie obsługiwane przez router, nawet w środowisku produkcyjnym.

W związku z tym, jeśli dodasz nowy punkt końcowy, taki jak /api/auth, będzie dostępny w dniu /.netlify/functions/app/api/auth. Na koniec kod eksportuje aplikację Express i bezserwerową funkcję obsługi.

Pozwala to na lokalne testowanie serwera i zapewnia możliwość wdrożenia go jako funkcji bezserwerowej w Netlify.

Zdefiniuj plik Netlify.toml

W katalogu głównym utwórz nowy Netlify.toml plik i dodaj następujący kod.

[zbudować]
 podstawa = "/"
 polecenie = „npm uruchom kompilację”
 opublikuj = "/dist/"
 funkcje = "funkcje/"
[środowisko.kompilacji]
 NODE_VERSION = "16"
[Funkcje]
 moduły_węzłów zewnętrznych = ["wyrazić"]
 node_bundler = "esbuild"
[[przekierowania]]
 siła = prawda
 from = "/api/*"
 status = 200
 to = "/.netlify/functions/app/:splat"
[[przekierowania]]
 od = "/*"
 status = 200
 do = "/index.html"

Kod określa ustawienia konfiguracji kompilacji i wdrażania aplikacji Express w serwisie Netlify. Obejmuje ustawienia, takie jak katalog podstawowy, polecenie kompilacji, katalog publikowania i katalog funkcji.

Dodatkowo definiuje ustawienia przekierowań, które powinny zarządzać routingiem żądań HTTP API, zapewniając ich prawidłowe kierowanie do funkcji bezserwerowych Netlify.

Zaktualizuj plik Package.json

Otworzyć pakiet.json plik i dodaj te polecenia do obiektu scripts.

„skrypty”: {
"początek": „netlify-lambda służyć src”,
"zbudować": „źródło kompilacji netlify-lambda”
 },

Uruchom następujące polecenia, aby skompilować i uruchomić aplikację lokalnie.

npm uruchom kompilację
start biegu npm

Serwer uruchomi się na porcie 9000. Możesz śmiało przetestować interfejs API za pomocą Postmana, wysyłając żądania do http://localhost: 9000/.netlify/funkcje/aplikacja

Wreszcie, przed skonfigurowaniem przepływu pracy GitHub Actions w celu zautomatyzowania wdrożeń w Netlify, stworzyć repozytorium na GitHubi wypchnij pliki projektu.

Wdróż aplikację Express na Netlify

Najpierw wdróż API w Netlify przed skonfigurowaniem przepływu pracy GitHub Actions. Wykonaj poniższe kroki, aby wdrożyć aplikację Express w serwisie Netlify.

  1. Udaj się do Netlify i załóż konto i zaloguj się do Przegląd strona.
  2. Wybierz i kliknij na Witryny patka.
  3. Kliknij na Importuj z Gita przycisk i wybierz GitHub jako platforma dostawcy Git. Netlify poprosi Cię o uwierzytelnienie w GitHub, aby udzielić mu dostępu do Twojego konta i repozytoriów projektu.
  4. Wybierz repozytorium projektu Express z listy wyświetlanych repozytoriów.
  5. Po wybraniu repozytorium należy skonfigurować ustawienia kompilacji dla procesu wdrażania. Netlify upraszcza ten proces, automatycznie wykrywając technologię użytą do zbudowania aplikacji i wstępnie wypełniając pola wymaganymi ustawieniami kompilacji. W tym przypadku polecenie kompilacji, katalog publikacji i funkcji.
  6. Na koniec kliknij Wdróż witrynę przycisk, aby zakończyć proces.

Utwórz przepływ pracy akcji usługi GitHub

Kliknij na działania tab w repozytorium GitHub twojego projektu. w Ciągła integracja sekcję, wybierz i kliknij Skonfiguruj Node.js przepływ pracy.

W edytorze GitHub zmień nazwę pliku na Netlify.yml, usuń szablonowy kod przepływu pracy Node.js i dodaj poniższy kod:

nazwa:ZbudowaćIWdrożyćDoNetlify
NA:
naciskać:
prośba o pociągnięcie:
Oferty pracy:
zbudować:
biegi:ubuntu-22.04
kroki:
-używa:akcje/zamówienie@v3
# ( Zbuduj do ./dist lub innego katalogu... )
-nazwa:WdrożyćDoNetlify
używa:nwtgck/[email protected]
z:
katalog-opublikuj:'./dystans'
branża produkcyjna:główny
token github:${{tajniki. GITHUB_TOKEN}}
komunikat o wdrożeniu:„Wdrażanie z akcji GitHub”
włącz-pull-request-komentarz:FAŁSZ
włącz-zatwierdź-komentarz:PRAWDA
nadpisuje-ściągnij-żądanie-komentarz:PRAWDA
Środowisko:
NETLIFY_AUTH_TOKEN:${{tajniki. NETLIFY_AUTH_TOKEN}}
NETLIFY_SITE_ID:${{tajniki. NETLIFY_SITE_ID}}
limit czasu-minuty:1

Oto zestawienie właściwości przepływu pracy:

  • NA: zdarzenia wyzwalające działania w tym przepływie pracy.
  • Oferty pracy: Określa zdarzenie, które ma zostać uruchomione przez konkretną akcję, czyli: zdarzenia budowania i wdrażania.
  • bieganie: główne środowisko produkcyjne dla akcji.
  • kroki: Określa serię kroków wymaganych do wykonania określonego zadania.
  • z: Definiuje argumenty wymagane do poprawnego działania akcji.
  • śr: określa wymagane zmienne środowiskowe dla przepływu pracy.

Na koniec zatwierdź aktualizacje wprowadzone w tym pliku. GitHub powinien automatycznie uruchamiać przepływ pracy.

Początkowa kompilacja spowoduje jednak błąd, ponieważ musisz dodać tajne zmienne wymagane przez przepływ pracy: identyfikator wdrożonej witryny i token autoryzacji Netlify. Udaj się do swojego Ustawienia witryny na Netlify i skopiuj plik Identyfikator witryny.

Aby uzyskać token autoryzacji, kliknij profil użytkownika ikonę i wybierz Ustawienia użytkownika opcję z rozwijanego okna. Na stronie ustawień wybierz Aplikacjei kliknij Nowy token dostępu aby wygenerować swój token autoryzacji.

Dodaj dwie zmienne środowiskowe jako NETLIFY_SITE_ID i NETLIFY_AUTH_TOKEN do sekcji zmiennych środowiskowych i wpisów tajnych repozytorium w repozytorium GitHub. Po wprowadzeniu tych zmian ponownie uruchom przepływ pracy. Netlify automatycznie wdroży wszelkie kolejne zmiany, które wypchniesz za pomocą tego potoku.

Śmiało, przetestuj interfejs API za pomocą Postmana, wysyłając żądania do tego adresu URL: /.netlify/functions/app.

Konfigurowanie potoków CI/CD za pomocą akcji GitHub i Netlify

Korzystając z bezserwerowych funkcji Netlify, możesz wdrażać w Netlify pełnowartościowe aplikacje internetowe, które obejmują zarówno funkcje po stronie klienta, jak i zaplecza.

Ponadto konfigurowanie potoków CI/CD dla aplikacji za pomocą GitHub Actions oferuje usprawnione podejście do automatyzacji procesu kompilacji i wdrażania. Pozwala to na zdefiniowanie przepływów pracy, które zapewniają bezproblemowy i niezawodny proces rozwoju, począwszy od pomysłu i przechodząc do etapu wydania.