Crie uma aplicação React de página única com o CodeBuild Lambda Node.js - AWS CodeBuild
Configurar o repositório de origem e o bucket de artefatosCriar um projeto CodeBuild Lambda Node.jsConfigurar o buildspec do projetoCompilar e executar a aplicação ReactLimpar a infraestrutura

Crie uma aplicação React de página única com o CodeBuild Lambda Node.js

Create React App é uma forma de criar aplicações React de página única. O exemplo de Node.js a seguir usa Node.js para compilar os artefatos de origem de Create React App e retorna os artefatos de compilação.

Configurar o repositório de origem e o bucket de artefatos

Crie um repositório de origem para o projeto usando yarn e Create React App.

Para configurar o repositório de origem e o bucket de artefatos

  1. Na máquina local, execute yarn create react-app <app-name> para criar uma aplicação React simples.

  2. Faça o upload da pasta do projeto da aplicação React em um repositório de origem compatível. Para obter uma lista dos tipos de origem compatíveis, consulte ProjectSource.

Criar um projeto CodeBuild Lambda Node.js

Criar um projeto do AWS CodeBuild Lambda Node.js.

Para criar o projeto CodeBuild Lambda Node.js

  1. Abra o console do AWS CodeBuild em https://console.aws.amazon.com/codesuite/codebuild/home.

  2. Se uma página de informações do CodeBuild for exibida, selecione Criar projeto de compilação. Caso contrário, no painel de navegação, expanda Compilar, escolha Projetos de compilação e, depois, Criar projeto de compilação.

  3. Em Nome do projeto, insira um nome para esse projeto de compilação. Os nomes de projeto de build devem ser únicos em cada conta AWS. Também é possível incluir uma descrição opcional do projeto de compilação para ajudar outros usuários a entender para que esse projeto é usado.

  4. Em Origem, selecione o repositório de origem em que o projeto do AWS SAM está localizado.

  5. Em Ambiente:

    • Para Computação, selecione Lambda.

    • Em Runtime(s), selecione Node.js.

    • Em Imagem, selecione aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20.

  6. Em Artefatos:

    • Em Tipo, selecione Amazon S3.

    • Em Nome do bucket, selecione o bucket de artefatos do projeto que você criou anteriormente.

    • Em Empacotamento de artefatos, selecione Zip.

  7. Selecione Create build project (Criar projeto de compilação).

Configurar o buildspec do projeto

Para criar a aplicação React, o CodeBuild lê e executa comandos de compilação a partir de um arquivo buildspec.

Para configurar o buildspec do projeto

  1. No console do CodeBuild, selecione o projeto de compilação e escolha Editar e Buildspec.

  2. Em Buildspec, escolha Inserir comandos de compilação e, em seguida, escolha Alternar para editor.

  3. Exclua os comandos de compilação pré-preenchidos e cole o seguinte buildspec.

    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. Selecione Atualizar buildspec.

Compilar e executar a aplicação React

Compile a aplicação React no CodeBuild Lambda, baixe os artefatos de compilação e execute a aplicação React localmente.

Para compilar e executar a aplicação React

  1. Selecione Iniciar compilação.

  2. Quando a compilação estiver concluída, navegue até o bucket de artefatos do projeto Amazon S3 e baixe o artefato da aplicação React.

  3. Descompacte o artefato de compilação do React e run npm install -g serve && serve -s build na pasta do projeto.

  4. O comando serve servirá o site estático em uma porta local e imprimirá a saída no terminal. Você pode visitar o URL do localhost em Local: na saída do terminal para visualizar a aplicação React.

Para saber mais sobre como lidar com a implantação de um servidor baseado em React, consulte Create React App Deployment.

Limpar a infraestrutura

Para evitar cobranças adicionais pelos recursos usados durante este tutorial, exclua os recursos criados para o projeto do CodeBuild.

Para limpar a infraestrutura

  1. Exclua o bucket do Amazon S3 dos artefatos do projeto

  2. Navegue até o console do CloudWatch e exclua os grupos de log do CloudWatch associados ao projeto do CodeBuild.

  3. Navegue até o console do CodeBuild e exclua o projeto do CodeBuild escolhendo Excluir projeto de compilação.