Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Créez une application React d'une seule page avec CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs"></a>

[Create React App](https://create-react-app.dev/) est un moyen de créer des applications React d'une seule page. L'exemple de fichier Node.js suivant utilise Node.js pour créer les artefacts source à partir de Create React App et renvoie les artefacts de construction.

## Configuration de votre référentiel source et de votre compartiment d'artefacts
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

Créez un référentiel source pour votre projet à l'aide de yarn et de Create React App.

**Pour configurer le référentiel source et le compartiment d'artefacts**

1. Sur votre machine locale, lancez-le `yarn create react-app <app-name>` pour créer une application React simple.

1. Téléchargez le dossier du projet de l'application React dans un référentiel source compatible. Pour obtenir la liste des types de sources pris en charge, consultez [ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html).

## Création d'un projet CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs.create-project"></a>

Créez un projet AWS CodeBuild Lambda Node.js.

**Pour créer votre projet CodeBuild Lambda Node.js**

1. Ouvrez la AWS CodeBuild console sur [https://console.aws.amazon.com/codesuite/codebuild/home](https://console.aws.amazon.com/codesuite/codebuild/home).

1.  Si une page CodeBuild d'informations s'affiche, choisissez **Créer un projet de construction**. Sinon, dans le volet de navigation, développez **Build****, choisissez Build projects**, puis **Create build project**. 

1. Dans **Nom du projet**, saisissez un nom pour ce projet de génération. Les noms des projets de construction doivent être uniques pour chaque AWS compte. Vous pouvez également inclure une description facultative du projet de construction pour aider les autres utilisateurs à comprendre à quoi sert ce projet.

1. Dans **Source**, sélectionnez le référentiel source dans lequel se trouve votre AWS SAM projet.

1. Dans **Environment (Environnement)** :
   + Pour **Compute**, sélectionnez **Lambda**.
   + Pour **Runtime (s)**, sélectionnez **Node.js**.
   + Pour **Image**, sélectionnez **aws/codebuild/amazonlinux-x86\$164-lambda-standard:nodejs20**.

1. Dans **Artefacts**:
   + Pour **Type**, sélectionnez **Amazon S3**.
   + Dans le **champ Nom du compartiment**, sélectionnez le compartiment d'artefacts du projet que vous avez créé précédemment.
   + Pour l'**emballage des artefacts**, sélectionnez **Zip**.

1. Choisissez **Créer un projet de génération**.

## Configurer le buildspec du projet
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

Pour créer votre application React, CodeBuild lit et exécute les commandes de construction à partir d'un fichier buildspec.

**Pour configurer le buildspec de votre projet**

1. Dans la CodeBuild console, sélectionnez votre projet de build, puis choisissez **Edit** et **Buildspec**.

1. Dans **Buildspec**, choisissez **Insérer des commandes de construction**, puis **Basculer vers** l'éditeur.

1. Supprimez les commandes de construction préremplies et collez les spécifications de construction suivantes.

   ```
   version: 0.2
   phases:
     build:
       commands:
         - yarn
         - yarn add --dev jest-junit @babel/plugin-proposal-private-property-in-object
         - yarn run build
         - yarn run test -- --coverage --watchAll=false --testResultsProcessor="jest-junit" --detectOpenHandles
   artifacts:
     name: "build-output"
     files:
       - "**/*"
   reports:
     test-report:
       files:
         - 'junit.xml'
       file-format: 'JUNITXML'
     coverage-report:
       files:
         - 'coverage/clover.xml'
       file-format: 'CLOVERXML'
   ```

1. Choisissez **Update buildspec (Mettre à jour buildspec)**.

## Créez et exécutez votre application React
<a name="sample-lambda-react-nodejs.build"></a>

Créez l'application React sur CodeBuild Lambda, téléchargez les artefacts de construction et exécutez l'application React localement.

**Pour créer et exécuter votre application React**

1. Choisissez **Démarrer la génération**.

1. Une fois le build terminé, accédez au bucket d'artefacts de votre projet Amazon S3 et téléchargez l'artefact de l'application React.

1. Décompressez l'artefact de construction de React et placez-le `run npm install -g serve && serve -s build` dans le dossier du projet.

1. La `serve` commande servira le site statique sur un port local et imprimera le résultat sur votre terminal. Vous pouvez visiter l'URL localhost ci-dessous `Local:` dans la sortie du terminal pour afficher votre application React.

Pour en savoir plus sur la gestion du déploiement d'un serveur basé sur React, voir [Créer un déploiement d'applications React](https://create-react-app.dev/docs/deployment/).

## Nettoyez votre infrastructure
<a name="sample-lambda-react-nodejs.clean-up"></a>

Pour éviter des frais supplémentaires pour les ressources que vous avez utilisées au cours de ce didacticiel, supprimez les ressources créées pour votre CodeBuild projet.

**Pour nettoyer votre infrastructure**

1. Supprimer les artefacts de votre projet (compartiment Amazon S3)

1. Accédez à la CloudWatch console et supprimez les groupes de CloudWatch journaux associés à votre CodeBuild projet.

1. Accédez à la CodeBuild console et supprimez votre CodeBuild projet en choisissant **Supprimer le projet de construction**.