Automatizar o deployment da tua UI de início de sessão personalizada com o fluxo de trabalho do GitHub Actions

Contexto#

Logto é a tua melhor escolha de solução CIAM (Customer Identity and Access Management). Recentemente, lançámos a funcionalidade "Bring your own UI" no Logto Cloud, permitindo que os desenvolvedores personalizem totalmente a sua UI de início de sessão.

Num post anterior do blog, também fornecemos um guia passo a passo sobre como criar a tua própria UI de início de sessão, que inclui:

• Desenvolver uma página de início de sessão personalizada com exemplos de código
• Configurar o CLI @logto/tunnel para depuração local
• Construir e compactar os ativos da tua UI personalizada
• Carregar o pacote zip e fazer o deployment para o Logto Cloud através da Console UI

No entanto, como um desenvolvedor de apps com uma mentalidade de DevOps, podes achar este processo complicado ao fazer alterações na tua página de início de sessão personalizada. Existe uma forma de automatizar todo o processo?

Ouvimos o teu feedback e estamos entusiasmados em apresentar um novo comando deploy no @logto/tunnel. Este comando permite-te automatizar o processo de deployment ao executar o comando no terminal, ou integrá-lo num fluxo de trabalho do GitHub Actions, o que é particularmente útil para construir a tua pipeline CI/CD. Vamos lá!

Pré-requisitos#

Antes de mergulharmos na configuração, certifica-te de que tens o seguinte:

1. Conta no Logto Cloud com plano de subscrição.
2. Uma aplicação machine-to-machine com permissões da Management API no teu tenant Logto.
3. O código de fonte do teu projeto deve estar hospedado no GitHub.
4. Instala a ferramenta de CLI @logto/tunnel como uma dependência de desenvolvimento no teu projeto.

Passo 1: Criar um fluxo de trabalho do GitHub Actions#

No teu repositório do GitHub, cria um novo ficheiro de fluxo de trabalho. Podes fazer isso navegando até .github/workflows/ e criando um ficheiro chamado deploy.yml.

Explicação do fluxo de trabalho do GitHub Actions#

• Disparo: O fluxo de trabalho é acionado a cada envio para o branch principal.
• Jobs: O trabalho de deployment é executado no ambiente Ubuntu mais recente e executará os seguintes passos.
• Passos:
  • Checkout do código: Este passo descarrega o código do teu repositório.
  • Configurar Node.js: Este passo configura o ambiente Node.js.
  • Instalar dependências: Este passo instala as dependências do teu projeto.
  • Build: Este passo constrói o código-fonte do teu projeto em ativos HTML. Assumimos que a pasta de saída se chama dist no diretório raiz.
  • Deploy para Logto Cloud: Este passo executa o comando Tunnel CLI para fazer o deployment dos ativos HTML no diretório ./dist para o teu tenant Logto Cloud. Utiliza variáveis de ambiente para informações sensíveis.

Para mais informações sobre o GitHub Actions, visita a Documentação do GitHub Actions.

Passo 2: Configurar segredos de ação no GitHub#

Para manter as tuas credenciais seguras, deves armazená-las como segredos no teu repositório do GitHub:

1. Vai ao teu repositório do GitHub.
2. Clica em "Settings".
3. Navega até "Secrets and variables > Actions"
4. Clica em novo segredo do repositório e adiciona os seguintes segredos:

• LOGTO_AUTH: As tuas credenciais da aplicação M2M Logto no formato <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT: O teu URI de endpoint Logto Cloud.
• LOGTO_RESOURCE: O teu indicador de recurso da Management API no Logto. Pode ser encontrado em "Recursos da API -> Management API do Logto". Necessário se o domínio personalizado estiver ativado no teu tenant Logto Cloud.

Passo 3: Testar o teu fluxo de trabalho#

Depois de teres configurado o fluxo de trabalho e os segredos, podes testá-lo ao fundir um PR no branch master. O fluxo de trabalho do GitHub Actions será automaticamente acionado, e a tua UI de início de sessão personalizada será implementada no Logto Cloud.

Conclusão#

Ao integrar o comando CLI @logto/tunnel no teu fluxo de trabalho do GitHub Actions, podes simplificar o processo de deployment da tua UI de início de sessão personalizada para o Logto Cloud. Esta automação permite que te concentres no desenvolvimento ao garantir que as tuas alterações são continuamente testadas num ambiente ao vivo.

Bons códigos!