Zautomatyzuj wdrażanie niestandardowego UI logowania za pomocą GitHub Actions workflow

Tło#

Logto to lepszy wybór dla rozwiązań Customer Identity and Access Management (CIAM). Niedawno uruchomiliśmy funkcję „Bring your own UI” na Logto Cloud, która umożliwia deweloperom pełne dostosowanie swojego interfejsu logowania.

W wcześniejszym poście na blogu zapewniliśmy również przewodnik krok-po-kroku na temat tworzenia własnego UI logowania, który zawiera:

• Tworzenie niestandardowej strony logowania z próbkami kodu
• Konfiguracja CLI @logto/tunnel do debugowania lokalnego
• Budowanie i pakowanie w formacie zip zasobów niestandardowego interfejsu użytkownika
• Przesyłanie pakietu zip i wdrażanie go na Logto Cloud za pomocą konsoli UI

Jednak jako deweloper aplikacji z myśleniem DevOps, możesz uznać ten proces za uciążliwy, gdy wprowadzasz zmiany na stronie logowania. Czy istnieje sposób na zautomatyzowanie całego procesu?

Usłyszeliśmy twoje opinie i z radością wprowadzamy nowe polecenie CLI deploy w @logto/tunnel. To polecenie pozwala zautomatyzować proces wdrażania, wykonując to polecenie w terminalu lub integrując je z workflow GitHub Actions, co jest szczególnie przydatne przy budowaniu ścieżki CI/CD. Zaczynajmy!

Wymagania wstępne#

Zanim przejdziemy do konfiguracji, upewnij się, że masz:

1. Konto Logto Cloud z planem subskrypcji.
2. Aplikację machine-to-machine z uprawnieniami do Management API w twoim dzierżawcy Logto.
3. Kod źródłowy projektu powinien być hostowany na GitHub.
4. Zainstaluj narzędzie CLI @logto/tunnel jako zależność deweloperską w projekcie.

Krok 1: Utwórz workflow GitHub Actions#

W swoim repozytorium GitHub utwórz nowy plik workflow. Można to zrobić, przechodząc do .github/workflows/ i tworząc plik o nazwie deploy.yml.

Wyjaśnienie workflow GitHub Actions#

• Wzbudzenie: Workflow jest wzbudzany przy każdym wysłaniu do głównej gałęzi.
• Zadania: Zadanie wdrażania działa w najnowszym środowisku Ubuntu i wykona poniższe kroki.
• Kroki:
  • Checkout code: Ten krok sprawdza twój kod repozytorium.
  • Set up Node.js: Ten krok konfiguruje środowisko Node.js.
  • Install dependencies: Ten krok instaluje zależności projektu.
  • Build: Ten krok buduje kod źródłowy projektu do zasobów html. Zakładamy, że folder wyjściowy jest nazwany dist w katalogu głównym.
  • Deploy to Logto Cloud: Ten krok uruchamia polecenie CLI Tunnel, aby wdrożyć zasoby html w katalogu ./dist do twojego dzierżawcy Logto Cloud. Używa zmiennych środowiskowych dla poufnych informacji.

Więcej informacji na temat GitHub Actions znajdziesz w Dokumentacji GitHub Actions.

Krok 2: Skonfiguruj tajne dane akcji w GitHub#

Aby utrzymać swoje poświadczenia w tajemnicy, powinieneś przechowywać je jako tajne dane w swoim repozytorium GitHub:

1. Przejdź do swojego repozytorium GitHub.
2. Kliknij „Settings”.
3. Przejdź do „Secrets and variables > Actions”
4. Kliknij „New repository secret” i dodaj następujące tajne dane:

• LOGTO_AUTH: Twoje poświadczenia aplikacji Logto M2M w formacie <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT: Twój URI punktu końcowego Logto Cloud.
• LOGTO_RESOURCE: Twój wskaźnik zasobu Management API Logto. Można go znaleźć w „API resources -> Logto Management API”. Wymagany, jeśli włączyłeś niestandardową domenę w swoim dzierżawcy Logto Cloud.

Krok 3: Przetestuj swój workflow#

Po skonfigurowaniu workflow i skonfigurowaniu sekretów, możesz go przetestować, scalając PR do gałęzi master. Workflow GitHub Actions automatycznie się uruchomi, a twój niestandardowy UI logowania zostanie wdrożony do Logto Cloud.

Podsumowanie#

Integrując polecenie CLI @logto/tunnel w swoim workflow GitHub Actions, możesz usprawnić proces wdrażania swojego niestandardowego UI logowania do Logto Cloud. Ta automatyzacja pozwala skupić się na rozwoju, jednocześnie zapewniając ciągłe testowanie zmian w środowisku produkcyjnym.

Miłego kodowania!