Français

github actions workflow
CI/CD
déploiement automatisé
rationaliser le déploiement
apportez votre propre UI
UI de connexion personnalisée
@logto/tunnel

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.

Charles

Developer

9/13/2024

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.

Commencer

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 :

Compte Logto Cloud avec un plan d'abonnement.
Une application machine-à-machine avec des autorisations API de gestion dans votre locataire Logto.
Votre code source de projet doit être hébergé sur GitHub.
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 :

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.

É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.

Déploiement réussi sur Logto Cloud utilisant GitHub Actions

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 !

Essayez Logto Cloud gratuitement

Contexte#

Prérequis#

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

Explication du workflow GitHub Actions#

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

Étape 3 : Tester votre workflow#

Conclusion#

Contexte#

Prérequis#

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

Explication du workflow GitHub Actions#

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

Étape 3 : Tester votre workflow#

Conclusion#

Contexte

Prérequis

Étape 1 : Créer un workflow GitHub Actions

Explication du workflow GitHub Actions

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

Étape 3 : Tester votre workflow

Conclusion

Contexte

Prérequis

Étape 1 : Créer un workflow GitHub Actions

Explication du workflow GitHub Actions

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

Étape 3 : Tester votre workflow

Conclusion