Automatiza la implementación de tu interfaz de inicio de sesión personalizada con el flujo de trabajo de GitHub Actions

Antecedentes#

Logto es tu mejor opción de solución de Gestión de Identidad y Acceso de Clientes (CIAM). Recientemente, lanzamos la función "Bring your own UI" en Logto Cloud, permitiendo a los desarrolladores personalizar completamente su interfaz de inicio de sesión.

En una publicación anterior del blog, también proporcionamos una guía paso a paso sobre cómo crear tu propia interfaz de inicio de sesión, la cual incluye:

• Desarrollar una página de inicio de sesión personalizada con ejemplos de código
• Configurar la CLI de @logto/tunnel para realizar depuración local
• Construir y comprimir tus recursos de interfaz personalizados
• Subir el paquete comprimido e implementarlo en Logto Cloud a través de la interfaz de consola

Sin embargo, como desarrollador de aplicaciones con una mentalidad DevOps, puedes encontrar este proceso tedioso al realizar cambios en tu página de inicio de sesión personalizada. ¿Existe una forma de automatizar todo el proceso?

Hemos escuchado tus comentarios y estamos emocionados de presentar un nuevo comando CLI deploy en @logto/tunnel. Este comando te permite automatizar el proceso de implementación ejecutando el comando en tu terminal o integrándolo en un flujo de trabajo de GitHub Actions, lo cual es particularmente útil para construir tu canalización CI/CD. ¡Vamos a profundizar en ello!

Requisitos previos#

Antes de entrar en la configuración, asegúrate de tener lo siguiente:

1. Cuenta de Logto Cloud con plan de suscripción.
2. Una aplicación de máquina a máquina con permisos de API de Gestión en tu inquilino de Logto.
3. El código fuente de tu proyecto debe estar alojado en GitHub.
4. Instala la herramienta CLI @logto/tunnel como una dependencia de desarrollo en tu proyecto.

Paso 1: Crear un flujo de trabajo de GitHub Actions#

En tu repositorio de GitHub, crea un nuevo archivo de flujo de trabajo. Puedes hacerlo navegando a .github/workflows/ y creando un archivo llamado deploy.yml.

Explicación del flujo de trabajo de GitHub Actions#

• Desencadenante: El flujo de trabajo se activa en cada envío a la rama principal.
• Trabajos: El trabajo de implementación se ejecuta en el entorno más reciente de Ubuntu y ejecutará los pasos siguientes.
• Pasos:
  • Checkout code: Este paso revisa el código de tu repositorio.
  • Set up Node.js: Este paso configura el entorno de Node.js.
  • Install dependencies: Este paso instala las dependencias de tu proyecto.
  • Build: Este paso construye el código fuente de tu proyecto en recursos HTML. Supongamos que la carpeta de salida se llama dist en el directorio raíz.
  • Deploy to Logto Cloud: Este paso ejecuta el comando CLI Tunnel para implementar recursos HTML en el directorio ./dist en tu inquilino de Logto Cloud. Utiliza variables de entorno para información sensible.

Para más información sobre GitHub Actions, visita la Documentación de GitHub Actions.

Paso 2: Configurar secretos de acción en GitHub#

Para mantener tus credenciales seguras, debes almacenarlas como secretos en tu repositorio de GitHub:

1. Ve a tu repositorio de GitHub.
2. Haz clic en "Settings".
3. Navega a "Secrets and variables > Actions"
4. Haz clic en New repository secret y añade los siguientes secretos:

• LOGTO_AUTH: Tus credenciales de la aplicación M2M de Logto en el formato <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT: Tu URI de endpoint de Logto Cloud.
• LOGTO_RESOURCE: Tu indicador de recurso de API de Gestión de Logto. Se puede encontrar en "API resources -> Logto Management API". Requerido si el dominio personalizado está habilitado en tu inquilino de Logto Cloud.

Paso 3: Probar tu flujo de trabajo#

Una vez que hayas configurado el flujo de trabajo y configurado los secretos, puedes probarlo al fusionar un PR en la rama master. El flujo de trabajo de GitHub Actions se activará automáticamente, y tu interfaz de inicio de sesión personalizada se implementará en Logto Cloud.

Conclusiones#

Al integrar el comando CLI @logto/tunnel en tu flujo de trabajo de GitHub Actions, puedes agilizar el proceso de implementación de tu interfaz de inicio de sesión personalizada en Logto Cloud. Esta automatización te permite concentrarte en el desarrollo mientras aseguras que tus cambios sean continuamente probados en un entorno en vivo.

¡Feliz codificación!