Skip to main content
Pour suivre ce flux de travail, assurez-vous d’avoir :
Le flux de travail de déploiement en production d’ACUL génère et déploie vos écrans ACUL, puis configure votre tenant pour les utiliser. Il utilise GitHub Actions pour :
  • Générer vos lots de ressources d’écran
    • Le flux de travail lit le fichier config/deploy_config.yml afin de déterminer quels écrans sont marqués pour le déploiement.
    • Si des cibles de déploiement sont trouvées, le flux de travail génère vos ressources ACUL à l’aide de Vite en compilant le code dans le répertoire /dist.
    • Téléverser vos ressources vers AWS S3
      • Le flux de travail s’authentifie de façon sécurisée auprès d’AWS à l’aide d’OpenID Connect (OIDC).
      • Il téléverse le contenu du répertoire /dist vers votre bucket S3.
    • Configurer votre tenant Auth0
      • Le flux de travail utilise Auth0 CLI avec une application M2M pour configurer les écrans dans votre tenant.
      • Il associe chaque écran à l’écran Auth0 approprié à l’aide du fichier config/screen-to-prompt-mapping.js.
      • Il met à jour les paramètres de personnalisation des écrans Auth0 pour qu’ils pointent vers vos ressources sur le CDN CloudFront.
Une fois la configuration terminée, un git push vers la branche main de votre projet lance le flux de travail GitHub.
Pour consulter un exemple complet du flux de travail de déploiement en production d’ACUL, lisez ACUL GITHUB ACTIONS sur GitHub.

1. Configuration d’Auth0

Créez une application Machine to Machine pour accorder les permissions nécessaires au flux de travail GitHub afin de mettre à jour les paramètres de votre tenant.
  1. Accédez à Auth0 Dashboard > Applications.
  2. Sélectionnez Create Application.
  3. Sélectionnez Machine to Machine Applications.
  4. Sous Name, ajoutez un nom explicite, par exemple : GitHub ACUL Deployment.
  5. Sélectionnez Create.
  6. Sous Authorize Machine to Machine Application, sélectionnez Auth0 Management API.
  7. Sélectionnez les permissions suivantes :
    • read:branding
    • update:branding
    • read:prompts
    • update:prompts
    • read:custom_domains
  8. Sélectionnez Authorize.
  9. Accédez à l’onglet Settings et notez :
    • Domain
    • Client ID
    • Client Secret

2. Téléversez et diffusez vos ressources avec Amazon Web Services

Pour téléverser et diffuser vos ressources, vous devez disposer d’un bucket AWS S3 et configurer CloudFront comme CDN.
  • Créez un bucket AWS S3. Bloquez tout accès public pour que ce bucket demeure privé. Ce bucket privé contient vos ressources.
  • Configurez une distribution CloudFront. Ce CDN diffuse vos ressources de façon sécurisée. Il doit être configuré de manière à utiliser votre bucket AWS S3 comme Origin, au moyen d’Origin Access Control (OAC).

3. Créez un rôle AWS IAM pour GitHub Actions

Créez un rôle IAM dans AWS afin de permettre à GitHub Actions de téléverser des fichiers vers AWS S3.
  • Ce rôle IAM doit utiliser Web Identity (OIDC) et faire confiance à token.actions.githubusercontent.com.
  • Le rôle doit avoir une stratégie accordant les autorisations s3:PutObject, s3:DeleteObject et s3:ListBucket sur votre bucket S3.

4. Configurer votre dépôt GitHub

Pour configurer votre dépôt GitHub :
  1. Accédez à GitHub > Paramètres.
  2. Sélectionnez Secrets et variables, puis Actions.
  3. Sélectionnez Nouveau secret du dépôt.
Ajoutez les secrets du dépôt suivants :
  • AWS_S3_ARN : l’ARN du rôle IAM que vous avez créé.
    • S3_BUCKET_NAME : le nom de votre bucket S3.
    • AWS_REGION : la région où se trouve votre bucket S3. Par exemple, us-east-1.
    • S3_CDN_URL : le nom de domaine de votre distribution CloudFront. N’ajoutez pas de barre oblique à la fin. Par exemple, https://d1234abcdef.cloudfront.net.
    • AUTH0_DOMAIN : le domaine de votre tenant Auth0.
    • AUTH0_CLIENT_ID : le Client ID de votre application M2M.
    • AUTH0_CLIENT_SECRET : le Client Secret de votre application M2M.

5. Configurer votre déploiement

Vous pouvez choisir quels écrans seront déployés en modifiant les fichiers de configuration situés dans le répertoire .github/config/ :
  • config/deploy_config.yml : Votre panneau de contrôle principal. Définissez un écran à true pour le déployer ou à false pour l’ignorer.
  • config/screen-to-prompt-mapping.js : Fait la correspondance entre les noms de répertoire internes de vos écrans. Exemple : mfa-sms-challenge correspond au nom officiel du prompt Auth0 mfa-sms.
  • config/context-configuration.js : Définit les données de contexte Auth0. Exemple : les paramètres de l’image de marque doivent être mis à la disposition de vos écrans personnalisés.