Automatiseer de implementatie van je aangepaste inlog-UI met de GitHub Actions workflow

Achtergrond#

Logto is je betere keuze voor Customer Identity en Access Management (CIAM) oplossing. Onlangs hebben we de functie "Breng je eigen UI" gelanceerd op Logto Cloud, waarmee ontwikkelaars hun inlog-UI volledig kunnen aanpassen.

In een vorige blogpost, hebben we ook een stapsgewijze handleiding gegeven voor het maken van je eigen inlog-UI, die onder meer omvat:

• Het ontwikkelen van een aangepaste inlogpagina met codevoorbeelden
• Het instellen van de @logto/tunnel CLI voor lokale debugging
• Het bouwen en zippen van je aangepaste UI-assets
• Het uploaden van het zippakket en implementeren naar Logto Cloud via de Console UI

Als app-ontwikkelaar met een DevOps-mentaliteit vind je dit proces misschien omslachtig bij het aanbrengen van wijzigingen aan je aangepaste inlogpagina. Is er een manier om het hele proces te automatiseren?

We hebben naar je feedback geluisterd en we zijn verheugd om een nieuw deploy CLI-command in @logto/tunnel te introduceren. Dit command stelt je in staat om het implementatieproces te automatiseren door het command in je terminal uit te voeren, of door het te integreren in een GitHub Actions workflow, wat vooral nuttig is voor het bouwen van je CI/CD-pijplijn. Laten we erin duiken!

Vereisten#

Voordat we beginnen met de installatie, zorg ervoor dat je het volgende hebt:

1. Logto Cloud-account met abonnementsplan.
2. Een machine-to-machine applicatie met Management API-rechten in je Logto-tenant.
3. Je projectbroncode moet worden gehost op GitHub.
4. Installeer het @logto/tunnel CLI-tool als een ontwikkelafhankelijkheid in je project.

Stap 1: Maak een GitHub Actions workflow#

Maak in je GitHub-repository een nieuw workflowbestand. Dit kun je doen door naar .github/workflows/ te navigeren en een bestand met de naam deploy.yml te maken.

Uitleg van de GitHub Actions workflow#

• Trigger: De workflow wordt geactiveerd bij elke push naar de main-branch.
• Jobs: De implementatiejob draait op de nieuwste Ubuntu-omgeving en voert de volgende stappen uit.
• Stappen:
  • Checkout code: Deze stap checkt je repositorycode uit.
  • Set up Node.js: Deze stap stelt de Node.js-omgeving in.
  • Install dependencies: Deze stap installeert je projectafhankelijkheden.
  • Build: Deze stap bouwt je projectbroncode om in html-assets. Laten we aannemen dat de uitvoermap dist in de hoofdmap is genoemd.
  • Deploy to Logto Cloud: Deze stap voert het Tunnel CLI-command uit om html-assets in ./dist-map te implementeren naar je Logto Cloud-tenant. Het gebruikt omgevingsvariabelen voor gevoelige informatie.

Voor meer informatie over GitHub Actions, bezoek de GitHub Actions Documentatie.

Stap 2: Configureer actiegeheimen in GitHub#

Om je referenties veilig te houden, moet je ze opslaan als geheimen in je GitHub-repository:

1. Ga naar je GitHub-repository.
2. Klik op "Settings".
3. Navigeer naar "Secrets and variables > Actions"
4. Klik op Nieuwe repositorygeheim en voeg de volgende geheimen toe:

• LOGTO_AUTH: Je Logto M2M applicatiereferenties in het formaat <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT: Je Logto Cloud endpoint URI.
• LOGTO_RESOURCE: Je Logto Management API resource-indicator. Te vinden in "API-resources -> Logto Management API". Vereist als een aangepast domein is ingeschakeld in je Logto Cloud-tenant.

Stap 3: Test je workflow#

Zodra je de workflow hebt ingesteld en de geheimen hebt geconfigureerd, kun je deze testen door een PR samen te voegen naar de master-branch. De GitHub Actions workflow wordt automatisch geactiveerd en je aangepaste inlog-UI wordt geïmplementeerd naar Logto Cloud.

Conclusie#

Door de @logto/tunnel CLI-command in je GitHub Actions workflow te integreren, kun je het implementatieproces van je aangepaste inlog-UI naar Logto Cloud stroomlijnen. Deze automatisering stelt je in staat om je te concentreren op ontwikkeling terwijl je ervoor zorgt dat je wijzigingen continu worden getest in een live-omgeving.

Veel programmeerplezier!