Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Cree una aplicación React de una sola página con CodeBuild Lambda Node.js - AWS CodeBuild
Configuración del repositorio de origen y el bucket de artefactosCrear un proyecto CodeBuild Lambda Node.jsConfiguración de la especificación de compilación del proyectoCompilación y ejecución de la aplicación ReactLimpieza de la infraestructura

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

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 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 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 AWS CodeBuild consola 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 deben ser únicos en cada AWS cuenta. 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, selecciona el repositorio de origen en el que se encuentra tu AWS SAM proyecto.

  5. En Environment (Entorno):

    • En Computación, seleccione Lambda.

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

    • En Imagen, selecciona 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 crear tu aplicación React, lee y ejecuta los comandos de compilación desde un archivo buildspec. CodeBuild

Para configurar la especificación de compilación del proyecto

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

  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

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

Limpieza de la infraestructura

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

Para limpiar la infraestructura

  1. Eliminación del bucket de Amazon S3 de artefactos del proyecto

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