Create React App
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
-
Ejecute
yarn create react-app
en su máquina local para crear una aplicación React sencilla.<app-name>
-
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
-
Abra la consola de AWS CodeBuild en https://console.aws.amazon.com/codesuite/codebuild/home
. -
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.
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.
-
En Origen, seleccione el repositorio de origen en el que se encuentra su proyecto de AWS SAM.
-
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.
-
-
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.
-
-
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
-
En la consola de CodeBuild, seleccione su proyecto de compilación y, a continuación, elija Editar y Especificación de compilación.
-
En Especificación de compilación, elija Insertar comandos de compilación y, a continuación, Cambiar al editor.
-
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'
-
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
-
Seleccione Iniciar la compilación.
-
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.
-
Descomprima el artefacto de compilación de React y ejecute
run npm install -g serve && serve -s build
en la carpeta del proyecto. -
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 enLocal:
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
-
Eliminación del bucket de Amazon S3 de artefactos del proyecto
-
Desplácese a la consola de CloudWatch y elimine los grupos de registro de CloudWatch asociados a su proyecto de CodeBuild.
-
Desplácese a la consola de CodeBuild y elija Eliminar el proyecto de compilación para eliminar su proyecto de CodeBuild.