Automatisez le déploiement de votre interface de connexion personnalisée avec le workflow GitHub Actions
Voyons comment automatiser le déploiement de votre interface de connexion personnalisée vers Logto Cloud dans votre pipeline DevOps avec un workflow GitHub Actions.
CharlesDeveloper
Arrêtez de perdre des semaines sur l'authentification des utilisateurs
Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.
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 !
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.
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.
É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 :
Allez dans votre dépôt GitHub.
Cliquez sur « Settings ».
Naviguez vers "Secrets and variables > Actions"
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.
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.
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.
