Automatize a implantação da sua IU de login personalizada com o fluxo de trabalho do GitHub Actions

Contexto#

Logto é a sua melhor escolha de solução de Gerenciamento de Identidade e Acesso de Clientes (CIAM). Recentemente, lançamos o recurso "Traga sua própria IU" no Logto Cloud, permitindo que os desenvolvedores personalizem totalmente sua IU de login.

Em um post anterior no blog, também fornecemos um guia passo a passo sobre como criar sua própria IU de login, que inclui:

• Desenvolver uma página de login personalizada com exemplos de código
• Configurar o CLI @logto/tunnel para depuração local
• Construir e compactar os ativos da sua IU personalizada
• Carregar o pacote zip e implantar no Logto Cloud através da Interface do Console

No entanto, como desenvolvedor de aplicativos com uma mentalidade DevOps, você pode achar esse processo complicado ao fazer alterações em sua página de login personalizada. Existe uma maneira de automatizar todo o processo?

Ouvimos seu feedback e estamos animados para apresentar um novo comando CLI deploy no @logto/tunnel. Este comando permite automatizar o processo de implantação executando o comando em seu terminal ou integrando-o a um fluxo de trabalho do GitHub Actions, o que é particularmente útil para construir seu pipeline de CI/CD. Vamos nos aprofundar!

Pré-requisitos#

Antes de mergulharmos na configuração, certifique-se de ter o seguinte:

1. Conta no Logto Cloud com plano de assinatura.
2. Uma aplicação machine-to-machine com permissões da API de Gerenciamento em seu locatário Logto.
3. Seu código-fonte do projeto deve estar hospedado no GitHub.
4. Instale a ferramenta CLI @logto/tunnel como uma dependência de desenvolvimento em seu projeto.

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

No seu repositório do GitHub, crie um novo arquivo de fluxo de trabalho. Você pode fazer isso navegando até .github/workflows/ e criando um arquivo chamado deploy.yml.

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

• Trigger: O fluxo de trabalho é acionado a cada push para o branch principal.
• Jobs: O trabalho de implantação é executado no ambiente Ubuntu mais recente e executará as etapas a seguir.
• Steps:
  • Checkout code: Este passo faz o checkout do código do seu repositório.
  • Set up Node.js: Este passo configura o ambiente Node.js.
  • Install dependencies: Este passo instala as dependências do seu projeto.
  • Build: Este passo compila o código-fonte do seu projeto em ativos html. Vamos assumir que a pasta de saída é chamada de dist no diretório raiz.
  • Deploy to Logto Cloud: Este passo executa o comando Tunnel CLI para implantar ativos html no diretório ./dist no seu locatário Logto Cloud. Ele usa variáveis de ambiente para informações sensíveis.

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

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

Para manter suas credenciais seguras, você deve armazená-las como segredos em seu repositório do GitHub:

1. Vá para o seu repositório do GitHub.
2. Clique em "Settings".
3. Navegue até "Secrets and variables > Actions"
4. Clique em Novo segredo do repositório e adicione os seguintes segredos:

• LOGTO_AUTH: Suas credenciais da aplicação Logto M2M no formato <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT: Seu URI de endpoint do Logto Cloud.
• LOGTO_RESOURCE: Seu indicador de recurso da API de Gerenciamento Logto. Pode ser encontrado em "Recursos de API -> API de Gerenciamento do Logto". Necessário se o domínio personalizado estiver habilitado em seu locatário Logto Cloud.

Passo 3: Teste seu fluxo de trabalho#

Uma vez configurado o fluxo de trabalho e os segredos, você pode testá-lo ao mesclar um PR na branch master. O fluxo de trabalho do GitHub Actions será automaticamente acionado e sua IU de login personalizada será implantada no Logto Cloud.

Conclusão#

Ao integrar o comando CLI @logto/tunnel ao seu fluxo de trabalho do GitHub Actions, você pode simplificar o processo de implantação da sua IU de login personalizada no Logto Cloud. Esta automação permite que você se concentre no desenvolvimento enquanto garante que suas alterações sejam continuamente testadas em um ambiente ao vivo.

Feliz codificação!