> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> En savoir plus sur le flux de travail de déploiement ACUL
# Flux de travail de déploiement ACUL
Pour suivre ce flux de travail, assurez-vous d'avoir :
* Un tenant de développement Auth0 configuré avec la [Connexion universelle](docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains).
* Une [Application First Party](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications) Auth0
* [L'Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée dans votre tenant Auth0.
* Un compte AWS avec les permissions de créer des rôles IAM, des buckets S3, et de configurer CloudFront
* Un référentiel GitHub contenant vos écrans de connexion personnalisés
Le flux de travail de déploiement de production ACUL construit et déploie vos écrans ACUL et configure votre tenant pour les utiliser. Il utilise les Actions GitHub pour :
* Construire les bundles d'assets de votre écran
* Le flux de travail lit le fichier [config/deploy\_config.yml](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/deploy_config.yml) pour déterminer quels écrans sont marqués pour le déploiement.
* Si des cibles de déploiement sont trouvées, le flux de travail construit vos assets ACUL, en utilisant Vite et en compilant le code dans le répertoire `/dist`.
* Télécharger vos assets vers AWS S3
* Le flux de travail s'authentifie de manière sécurisée auprès d'AWS en utilisant [OpenID Connect (OIDC)](docs/fr-ca/authenticate/protocols/openid-connect-protocol).
* Il télécharge le contenu du répertoire `/dist` vers votre bucket S3.
* Configurer votre tenant Auth0
* Le flux de travail utilise [Auth0 CLI](https://auth0.github.io/auth0-cli/) avec une application M2M pour configurer les écrans dans votre tenant.
* Il mappe chaque écran au bon écran Auth0 en utilisant le fichier [config/screen-to-prompt-mapping.js](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/screen-to-prompt-mapping.js).
* Il met à jour les paramètres de personnalisation d'écran Auth0 pour pointer vers vos assets sur le CDN CloudFront.
Une fois configuré, un `git push` vers la branche `main` de votre projet démarre le flux de travail GitHub.
Pour lire un exemple complet du flux de travail de déploiement de production ACUL, lisez [ACUL GITHUB ACTIONS](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/GITHUB_ACTIONS.md) sur Github.
### 1. Configuration Auth0
Créez une application [Machine-to-Machine](/docs/fr-ca/get-started/auth0-overview/create-applications/machine-to-machine-apps) pour accorder des permissions au flux de travail GitHub afin de mettre à jour les paramètres de votre tenant.
1. Naviguez vers [Auth0 Dashboard > Applications](https://manage.auth0.com/#/applications).
2. Sélectionnez **Créer une application**.
3. Sélectionnez **Applications de communication entre machines**.
4. Sous **Nom**, ajoutez un nom descriptif, par exemple : `Déploiement ACUL GitHub`.
5. Sélectionnez **Créer**.
6. Sous **Autoriser l’application de communication entre machines**, sélectionnez **Auth0 Management API**.
7. Sélectionnez ces permissions spécifiques :
* `read:branding`
* `update:branding`
* `read:prompts`
* `update:prompts`
* `read:custom_domains`
8. Sélectionnez **Autoriser**.
9. Naviguez vers l'onglet **Paramètres** et notez :
* `Domain`
* `Client ID`
* `Client Secret`
### 2. Téléchargez et servez vos assets avec Amazon Web Services
Pour télécharger et servir vos assets, vous avez besoin d'un bucket AWS S3 et de configurer CloudFront comme CDN.
* **Créez un bucket AWS S3**. Bloquez tout accès public afin que ce bucket soit privé. Ce bucket privé stocke vos assets.
* **Configurez une distribution CloudFront**. Ce CDN sert vos assets de manière sécurisée. Il doit être configuré pour utiliser votre bucket S3 comme `Origin` en utilisant Origin Access Control (OAC).
### 3. Créez un rôle IAM AWS pour l'Action GitHub
Créez un **Rôle IAM** dans AWS pour accorder à GitHub Actions la permission de télécharger des fichiers vers AWS S3.
* Ce rôle IAM doit utiliser Web Identity (OIDC), faisant confiance à `token.actions.githubusercontent.com`.
* Le rôle a besoin d'une politique accordant les permissions `s3:PutObject`, `s3:DeleteObject`, et `s3:ListBucket` sur votre bucket S3.
### 4. Configurez votre référentiel GitHub
Pour configurer votre référentiel GitHub :
1. Naviguez vers **GitHub > Settings**.
2. Sélectionnez **Secrets and Variables** puis **Actions**.
3. Sélectionnez **New repository secret**.
Ajoutez les secrets de référentiel 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 situe 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 de fin. Par exemple, [https://d1234abcdef.cloudfront.net](https://d1234abcdef.cloudfront.net).
* `AUTH0_DOMAIN`: Le domaine de votre tenant Auth0.
* `AUTH0_CLIENT_ID`: L'ID client de votre application M2M.
* `AUTH0_CLIENT_SECRET`: Le Secret Client de votre application M2M.
### 5. Configurez votre déploiement
Vous pouvez contrôler quels écrans sont déployés en modifiant les fichiers de configuration situés dans le répertoire `.github/config/` :
* [`config/deploy_config.yml`](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/deploy_config.yml): Votre panneau de contrôle principal. Définissez un écran sur `true` pour le déployer ou sur `false` pour l'ignorer.
* [`config/screen-to-prompt-mapping.js`](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/screen-to-prompt-mapping.js): Mappe les noms de répertoire d'écran internes. Exemple : `mfa-sms-challenge` au nom de prompt officiel Auth0 `mfa-sms`.
* [`config/context-configuration.js`](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/context-configuration.js): Définit les données de contexte Auth0. Exemple : les paramètres de branding doivent être mis à disposition de vos écrans personnalisés.