> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

> Découvrez le flux de travail de déploiement d’ACUL

# Flux de travail de déploiement d’ACUL

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Pour suivre ce flux de travail, assurez-vous de disposer de :

  * Un tenant de développement Auth0 configuré avec [Universal Login](docs/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-CA/customize/custom-domains).
  * Une [First Party Application](/docs/fr-CA/get-started/auth0-overview/create-applications#create-applications) Auth0
  * [Identifier First Authentication](/docs/fr-CA/authenticate/login/auth0-universal-login/identifier-first) activé dans votre tenant Auth0.
  * Un compte AWS avec les droits pour créer des rôles IAM, des compartiments S3 et configurer CloudFront
  * Un dépôt GitHub contenant vos écrans de connexion personnalisés
</Callout>

Le flux de travail de déploiement en production d’ACUL génère et déploie vos écrans ACUL et configure votre tenant pour les utiliser. Il utilise GitHub Actions pour :

* Générer les bundles de ressources de vos écrans
  * 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 génère vos ressources ACUL en utilisant Vite et compile 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 en utilisant [OpenID Connect (OIDC)](docs/authenticate/protocols/openid-connect-protocol).
    * Il téléverse le contenu du répertoire `/dist` dans votre compartiment 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 associe chaque écran au bon écran Auth0 à l’aide du 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 des écrans Auth0 pour pointer 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.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Pour lire un exemple complet du flux de travail de déploiement en production d’ACUL, consultez [ACTIONS GITHUB ACUL](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/GITHUB_ACTIONS.md) sur GitHub.
</Callout>

<div id="1-auth0-configuration">
  ### 1. Configuration d’Auth0
</div>

Créez une application [Machine-to-Machine](/docs/fr-CA/get-started/auth0-overview/create-applications/machine-to-machine-apps) pour accorder des autorisations au workflow GitHub afin de mettre à jour les paramètres de votre tenant.

1. Accédez à [Auth0 Dashboard > Applications](https://manage.auth0.com/#/applications).
2. Sélectionnez **Create Application**.
3. Sélectionnez **Machine to Machine Applications**.
4. Sous **Name**, ajoutez un nom descriptif, par exemple : `GitHub ACUL Deployment`.
5. Sélectionnez **Create**.
6. Sous **Authorize Machine to Machine Application**, sélectionnez **Auth0 Management API**.
7. Sélectionnez ces autorisations spécifiques :
   * `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`

<div id="2-upload-and-serve-your-assets-with-amazon-web-services">
  ### 2. Téléverser et diffuser vos ressources avec Amazon Web Services
</div>

Pour téléverser et diffuser vos ressources, vous devez disposer d’un compartiment (bucket) AWS S3 et configurer CloudFront comme CDN.

* **Créer un compartiment (bucket) AWS S3**. Bloquez tout accès public afin que ce compartiment soit privé. Ce compartiment privé stocke vos ressources.
* **Configurer une distribution CloudFront**. Ce CDN diffuse vos ressources de façon sécurisée. Il doit être configuré pour utiliser votre compartiment S3 comme `Origin` à l'aide de la fonctionnalité Origin Access Control (OAC).

<div id="3-create-an-aws-iam-role-for-github-action">
  ### 3. Créez un rôle IAM AWS pour GitHub Actions
</div>

Créez un **rôle IAM** dans AWS pour accorder à GitHub Actions l’autorisation de téléverser des fichiers dans Amazon S3.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  * Ce rôle IAM doit utiliser l’identité web (OIDC) et faire confiance à `token.actions.githubusercontent.com`.
  * Le rôle doit être associé à une stratégie accordant les autorisations `s3:PutObject`, `s3:DeleteObject` et `s3:ListBucket` sur votre bucket S3.
</Callout>

<div id="4-configure-your-github-repository">
  ### 4. Configurer votre dépôt GitHub
</div>

Pour configurer votre dépôt GitHub :

1. Accédez à **GitHub > Settings**.
2. Sélectionnez **Secrets and Variables** et ensuite **Actions**.
3. Sélectionnez **New repository secret**.

Ajoutez les secrets de 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](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.

<div id="5-configure-your-deployment">
  ### 5. Configurez votre déploiement
</div>

Vous pouvez déterminer 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. Pour déployer un écran, réglez sa valeur à `true`, ou à `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) : Associe les noms de répertoires internes de vos écrans. Exemple : `mfa-sms-challenge` est associé au nom d’invite Auth0 officiel `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 d’image de marque doivent être accessibles à vos écrans personnalisés.