Automatizza la distribuzione della tua interfaccia di accesso personalizzata con il flusso di lavoro di GitHub Actions

Background#

Logto è la migliore scelta per la soluzione di Customer Identity and Access Management (CIAM). Recentemente, abbiamo lanciato la funzionalità "Porta la tua interfaccia utente" su Logto Cloud, consentendo agli sviluppatori di personalizzare completamente la loro interfaccia di accesso.

In un post sul blog precedente, abbiamo anche fornito una guida passo passo su come creare la propria interfaccia di accesso, che include:

• Sviluppo di una pagina di accesso personalizzata con esempi di codice
• Configurazione del CLI @logto/tunnel per il debug locale
• Costruzione e compressione delle risorse della tua interfaccia utente personalizzata
• Caricamento del pacchetto zip e distribuzione su Logto Cloud tramite la Console UI

Tuttavia, come sviluppatore di app con una mentalità DevOps, potresti trovare questo processo ingombrante quando apporti modifiche alla tua pagina di accesso personalizzata. Esiste un modo per automatizzare l'intero processo?

Abbiamo ascoltato il tuo feedback e siamo entusiasti di introdurre un nuovo comando CLI deploy in @logto/tunnel. Questo comando ti consente di automatizzare il processo di distribuzione eseguendo il comando nel tuo terminale, o integrandolo in un flusso di lavoro di GitHub Actions, particolarmente utile per costruire la tua pipeline CI/CD. Approfondiamo!

Prerequisiti#

Prima di approfondire la configurazione, assicurati di avere quanto segue:

1. Account Logto Cloud con piano di abbonamento.
2. Applicazione machine-to-machine con permessi API di gestione nel tuo tenant Logto.
3. Il codice sorgente del tuo progetto dovrebbe essere ospitato su GitHub.
4. Installa lo strumento CLI @logto/tunnel come dipendenza di sviluppo nel tuo progetto.

Step 1: Crea un flusso di lavoro di GitHub Actions#

Nel tuo repository GitHub, crea un nuovo file di flusso di lavoro. Puoi farlo navigando su .github/workflows/ e creando un file denominato deploy.yml.

Spiegazione del flusso di lavoro di GitHub Actions#

• Trigger: Il flusso di lavoro si attiva a ogni push sul ramo principale.
• Job: Il lavoro di distribuzione viene eseguito sull'ultima versione di Ubuntu e esegue i seguenti passaggi.
• Step:
  • Checkout code: Questo passaggio esegue il controllo del codice del tuo repository.
  • Set up Node.js: Questo passaggio imposta l'ambiente Node.js.
  • Install dependencies: Questo passaggio installa le dipendenze del tuo progetto.
  • Build: Questo passaggio costruisce il codice sorgente del tuo progetto in risorse html. Supponiamo che la cartella di output si chiami dist nella directory principale.
  • Deploy to Logto Cloud: Questo passaggio esegue il comando CLI Tunnel per distribuire le risorse html nella directory ./dist sul tuo tenant Logto Cloud. Utilizza variabili d'ambiente per informazioni sensibili.

Per ulteriori informazioni su GitHub Actions, visita la Documentazione di GitHub Actions.

Step 2: Configura i segreti delle azioni in GitHub#

Per mantenere le tue credenziali sicure, dovresti memorizzarle come segreti nel tuo repository GitHub:

1. Vai al tuo repository GitHub.
2. Fai clic su "Settings".
3. Naviga su "Secrets and variables > Actions"
4. Fai clic su Nuovo segreto repository e aggiungi i seguenti segreti:

• LOGTO_AUTH: Le tue credenziali dell'applicazione Logto M2M nel formato <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT: Il tuo URI endpoint Logto Cloud.
• LOGTO_RESOURCE: Il tuo indicatore di risorsa API di gestione Logto. Può essere trovato in "API resources -> Logto Management API". Richiesto se il dominio personalizzato è abilitato nel tuo tenant Logto Cloud.

Step 3: Testa il tuo flusso di lavoro#

Una volta configurato il flusso di lavoro e configurati i segreti, puoi testarlo unendo un PR nel ramo master. Il flusso di lavoro di GitHub Actions verrà attivato automaticamente e la tua interfaccia di accesso personalizzata verrà distribuita su Logto Cloud.

Conclusion#

Integrando il comando CLI @logto/tunnel nel tuo flusso di lavoro di GitHub Actions, puoi semplificare il processo di distribuzione della tua interfaccia di accesso personalizzata su Logto Cloud. Questa automazione ti consente di concentrarti sullo sviluppo mentre garantisce che le tue modifiche vengano continuamente testate in un ambiente live.

Buona programmazione!