Créez une application React d'une seule page avec CodeBuild Lambda Node.js - AWS CodeBuild
Configuration de votre référentiel source et de votre compartiment d'artefactsCréation d'un projet CodeBuild Lambda Node.jsConfigurer le buildspec du projetCréez et exécutez votre application ReactNettoyez votre infrastructure

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

Create React App 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

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.

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

Création d'un projet CodeBuild Lambda Node.js

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

Pour créer votre projet CodeBuild Lambda Node.js

  1. Ouvrez la AWS CodeBuild console à l'adresse https://console.aws.amazon.com/codesuite/codebuild/home.

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

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

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

  5. Dans Environment (Environnement) :

    • Pour Compute, sélectionnez Lambda.

    • Pour Runtime (s), sélectionnez Node.js.

    • Pour Image, sélectionnez aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20.

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

  7. Choisissez Créer un projet de génération.

Configurer le buildspec du projet

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.

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

  3. 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'

  4. Choisissez Update buildspec (Mettre à jour buildspec).

Créez et exécutez votre application React

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.

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

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

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

Nettoyez votre infrastructure

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)

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

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