Automatisez le déploiement de votre interface de connexion personnalisée avec le workflow GitHub Actions

Contexte#

Logto est votre meilleure option de solution de gestion des identités et des accès clients (CIAM). Récemment, nous avons lancé la fonctionnalité « Apportez votre propre interface » sur Logto Cloud, permettant aux développeurs de personnaliser entièrement leur interface de connexion.

Dans un article de blog précédent, nous avons également fourni un guide étape par étape sur la création de votre propre interface de connexion, qui comprend :

• Développer une page de connexion personnalisée avec des exemples de code
• Configurer le CLI @logto/tunnel pour le débogage local
• Construire et compresser vos fichiers d'interface utilisateur personnalisée
• Télécharger le package zip et le déployer sur Logto Cloud via l'interface console

Cependant, en tant que développeur d'applications avec une approche DevOps, vous pouvez trouver ce processus lourd lors de la modification de votre page de connexion personnalisée. Existe-t-il un moyen d'automatiser l'ensemble du processus ?

Nous avons écouté vos retours et sommes ravis de vous présenter une nouvelle commande CLI deploy dans @logto/tunnel. Cette commande vous permet d'automatiser le processus de déploiement en exécutant la commande dans votre terminal, ou en l'intégrant dans un workflow GitHub Actions, ce qui est particulièrement utile pour construire votre pipeline CI/CD. Plongeons dans le sujet !

Prérequis#

Avant de commencer la configuration, assurez-vous d'avoir les éléments suivants :

1. Compte Logto Cloud avec un plan d'abonnement.
2. Une application machine-à-machine avec des autorisations API de gestion dans votre locataire Logto.
3. Votre code source de projet doit être hébergé sur GitHub.
4. Installez l'outil CLI @logto/tunnel en tant que dépendance de développement dans votre projet.

Étape 1 : Créer un workflow GitHub Actions#

Dans votre dépôt GitHub, créez un nouveau fichier de workflow. Vous pouvez le faire en allant à .github/workflows/ et en créant un fichier nommé deploy.yml.

Explication du workflow GitHub Actions#

• Déclencheur : Le workflow est déclenché à chaque push sur la branche principale.
• Jobs : Le job de déploiement s'exécute sur le dernier environnement Ubuntu, et exécutera les étapes suivantes.
• Steps :
  • Checkout code : Cette étape extrait le code de votre dépôt.
  • Set up Node.js : Cette étape configure l'environnement Node.js.
  • Install dependencies : Cette étape installe les dépendances de votre projet.
  • Build : Cette étape construit le code source de votre projet en actifs HTML. Supposons que le dossier de sortie soit nommé dist dans le répertoire racine.
  • Deploy to Logto Cloud : Cette étape exécute la commande Tunnel CLI pour déployer les fichiers HTML du répertoire ./dist vers votre locataire Logto Cloud. Elle utilise des variables d'environnement pour les informations sensibles.

Pour plus d'informations sur GitHub Actions, visitez la documentation GitHub Actions.

Étape 2 : Configurer les secrets d'action dans GitHub#

Pour garder vos identifiants sécurisés, vous devez les stocker en tant que secrets dans votre dépôt GitHub :

1. Allez dans votre dépôt GitHub.
2. Cliquez sur « Settings ».
3. Naviguez vers "Secrets and variables > Actions"
4. Cliquez sur Nouveau secret de dépôt et ajoutez les secrets suivants :

• LOGTO_AUTH : Vos identifiants d'application Logto M2M au format <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT : L'URI de votre point de terminaison Logto Cloud.
• LOGTO_RESOURCE : Votre indicateur de ressource API de gestion Logto. Peut être trouvé dans "API resources -> Logto Management API". Requis si un domaine personnalisé est activé dans votre locataire Logto Cloud.

Étape 3 : Tester votre workflow#

Une fois que vous avez configuré le workflow et configuré les secrets, vous pouvez le tester en fusionnant une PR dans la branche master. Le workflow GitHub Actions se déclenchera automatiquement, et votre interface de connexion personnalisée sera déployée sur Logto Cloud.

Conclusion#

En intégrant la commande CLI @logto/tunnel dans votre workflow GitHub Actions, vous pouvez rationaliser le processus de déploiement de votre interface de connexion personnalisée vers Logto Cloud. Cette automatisation vous permet de vous concentrer sur le développement tout en garantissant que vos modifications sont continuellement testées dans un environnement en direct.

Bon codage !