Seleccione sus preferencias de cookies

Usamos cookies esenciales y herramientas similares que son necesarias para proporcionar nuestro sitio y nuestros servicios. Usamos cookies de rendimiento para recopilar estadísticas anónimas para que podamos entender cómo los clientes usan nuestro sitio y hacer mejoras. Las cookies esenciales no se pueden desactivar, pero puede hacer clic en “Personalizar” o “Rechazar” para rechazar las cookies de rendimiento.

Si está de acuerdo, AWS y los terceros aprobados también utilizarán cookies para proporcionar características útiles del sitio, recordar sus preferencias y mostrar contenido relevante, incluida publicidad relevante. Para aceptar o rechazar todas las cookies no esenciales, haga clic en “Aceptar” o “Rechazar”. Para elegir opciones más detalladas, haga clic en “Personalizar”.

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

Modo de enfoque
Creación de una aplicación React de una sola página con CodeBuild Lambda Node.js - AWS CodeBuild

Create React App es una forma de crear aplicaciones React de una sola página. El siguiente ejemplo de Node.js lo utiliza para compilar los artefactos de origen desde Create React App y devuelve los artefactos de compilación.

Configuración del repositorio de origen y el bucket de artefactos

Cree un repositorio de origen para su proyecto con yarn y Create React App.

Para configurar el repositorio de origen y el bucket de artefactos
  1. Ejecute yarn create react-app <app-name> en su máquina local para crear una aplicación React sencilla.

  2. Cargue la carpeta del proyecto de la aplicación React en un repositorio de origen admitido. Para obtener una lista de los tipos de origen admitidos, consulte ProjectSource.

Creación de un proyecto de CodeBuild Lambda Node.js

Creación de un proyecto de AWS CodeBuild Lambda Node.js.

Para crear su proyecto de CodeBuild Lambda Node.js
  1. Abra la consola de AWS CodeBuild en https://console.aws.amazon.com/codesuite/codebuild/home.

  2. Si se muestra una página de información de CodeBuild, 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 Origen, seleccione el repositorio de origen en el que se encuentra su proyecto de AWS SAM.

  5. En Environment (Entorno):

    • En Computación, seleccione Lambda.

    • En Tiempo(s) de ejecución, seleccione Node.js.

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

  6. En Artifacts (Artefactos):

    • En Tipo, seleccione Amazon S3.

    • En Nombre del bucket, seleccione el bucket de artefactos del proyecto que ha creado anteriormente.

    • En Empaquetado de artefactos, seleccione Zip.

  7. Elija Crear el proyecto de compilación.

Configuración de la especificación de compilación del proyecto

Para compilar su aplicación React, CodeBuild lee y ejecuta los comandos de compilación desde un archivo de especificación de compilación.

Para configurar la especificación de compilación del proyecto
  1. En la consola de CodeBuild, seleccione su proyecto de compilación y, a continuación, elija Editar y Especificación de compilación.

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

  3. Elimine los comandos de compilación rellenados previamente 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).

Compilación y ejecución de la aplicación React

Compile la aplicación React en CodeBuild Lambda, descargue los artefactos de compilación y ejecute la aplicación React de forma local.

Para compilar y ejecutar su aplicación React
  1. Seleccione Iniciar la compilación.

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

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

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

Para obtener más información sobre cómo controlar la implementación de un servidor basado en React, consulte la sección sobre implementación de Create React App.

Limpieza de la infraestructura

Para evitar cargos adicionales por los recursos que ha utilizado durante este tutorial, elimine los recursos creados para el proyecto de CodeBuild.

Para limpiar la infraestructura
  1. Eliminación del bucket de Amazon S3 de artefactos del proyecto

  2. Desplácese a la consola de CloudWatch y elimine los grupos de registro de CloudWatch asociados a su proyecto de CodeBuild.

  3. Desplácese a la consola de CodeBuild y elija Eliminar el proyecto de compilación para eliminar su proyecto de CodeBuild.

PrivacidadTérminos del sitioPreferencias de cookies
© 2025, Amazon Web Services, Inc o sus afiliados. Todos los derechos reservados.