Cree una aplicación React de una sola página con CodeBuild Lambda Node.js

Create React App es una forma de crear aplicaciones React de una sola página. El siguiente ejemplo de Node.js usa Node.js para crear los artefactos de origen a partir de la aplicación Create React y devuelve los artefactos de compilación.

Configura tu repositorio de fuentes y tu depósito de artefactos

Crea un repositorio de código fuente para tu proyecto con yarn and Create React App.

Para configurar el repositorio de fuentes y el depósito de artefactos

1. En tu máquina local, ejecuta yarn create react-app <app-name> para crear una aplicación React sencilla.

2. Sube la carpeta del proyecto de la aplicación React a un repositorio fuente compatible. Para obtener una lista de los tipos de fuentes compatibles, consulte ProjectSource.

Crear un proyecto CodeBuild Lambda Node.js

Cree un AWS CodeBuild proyecto Lambda Node.js.

Para crear su proyecto CodeBuild Lambda Node.js

1. Abra la consola de AWS CodeBuild en https://console.aws.amazon.com/codesuite/codebuild/home.

2. Si aparece una página de CodeBuild información, elija Crear proyecto de compilación. De lo contrario, en el panel de navegación, expanda Compilar, elija Proyectos de compilación y, a continuación, elija Crear proyecto de compilación.

3. En Project name (Nombre de proyecto), escriba un nombre para este proyecto de compilación. Los nombres de los proyectos de compilación debe ser únicos en cada cuenta de AWS. También puede introducir una descripción opcional del proyecto de compilación para ayudar a otros usuarios a entender para qué se utiliza el proyecto.

4. En Fuente, seleccione el repositorio de origen en el que se encuentra el AWS SAM proyecto.

5. En Environment (Entorno):

   • Para Compute, selecciona Lambda.

   • Para Runtime (s), seleccione Node.js.

   • En Imagen, seleccione aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20.

6. En Artifacts (Artefactos):

   • En Tipo, seleccione Amazon S3.

   • En el nombre del bucket, seleccione el bucket de artefactos del proyecto que creó anteriormente.

   • Para empaquetar artefactos, selecciona Zip.

7. Elija Crear el proyecto de compilación.

Configura el proyecto (buildspec)

Para crear tu aplicación React, CodeBuild lee y ejecuta los comandos de compilación desde un archivo buildspec.

Para configurar tu proyecto, buildspec

1. En la CodeBuild consola, selecciona tu proyecto de compilación y, a continuación, selecciona Editar y Buildspec.

2. En Buildspec, selecciona Insertar comandos de compilación y, a continuación, Cambiar al editor.

3. Elimine los comandos de compilación preconfigurados y pegue la siguiente especificación de compilación.

   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. Seleccione Update buildspec (Actualizar buildspec).

Crea y ejecuta tu aplicación React

Cree la aplicación React en CodeBuild Lambda, descargue los artefactos de compilación y ejecute la aplicación React localmente.

Para compilar y ejecutar tu aplicación React

1. Seleccione Iniciar la compilación.

2. Una vez finalizada la compilación, navegue hasta el depósito de artefactos del proyecto de Amazon S3 y descargue el artefacto de la aplicación React.

3. Descomprime el artefacto de compilación de React y colócalo run npm install -g serve && serve -s build en la carpeta del proyecto.

4. El serve comando mostrará el sitio estático en un puerto local e imprimirá el resultado en su terminal. Puedes visitar la URL de localhost que aparece Local: en la salida del terminal para ver tu aplicación React.

Para obtener más información sobre cómo gestionar el despliegue de un servidor basado en React, consulta Crear el despliegue de una aplicación React.

Limpie su infraestructura

Para evitar cargos adicionales por los recursos que utilizó durante este tutorial, elimine los recursos creados para su CodeBuild proyecto.

Para limpiar su infraestructura

1. Elimine los artefactos de su proyecto (bucket de Amazon S3)

2. Diríjase a la CloudWatch consola y elimine los grupos de CloudWatch registros asociados a su CodeBuild proyecto.

3. Ve a la CodeBuild consola y elimina tu CodeBuild proyecto seleccionando Eliminar proyecto de compilación.