As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Crie um aplicativo React de página única com CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs"></a>

[Create React App](https://create-react-app.dev/) é 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
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

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.

1. 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 fonte compatíveis, consulte [ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html).

## Crie um projeto CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs.create-project"></a>

Crie um projeto AWS CodeBuild Lambda Node.js.

**Para criar seu projeto CodeBuild Lambda Node.js**

1. Abra o AWS CodeBuild console em [https://console.aws.amazon.com/codesuite/codebuild/home](https://console.aws.amazon.com/codesuite/codebuild/home).

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

1. Em **Nome do projeto**, insira um nome para esse projeto de compilação. Os nomes dos projetos de criação devem ser exclusivos em cada AWS conta. 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.

1. Em **Código-fonte**, selecione o repositório de origem em que seu AWS SAM projeto está localizado.

1. Em **Ambiente**:
   + Para **Computação**, selecione **Lambda**.
   + Em **Runtime(s)**, selecione **Node.js**.
   + Para **Imagem**, selecione **aws/codebuild/amazonlinux-x86\$164-lambda-standard:nodejs20**.

1. 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**.

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

## Configurar o buildspec do projeto
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

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

**Para configurar o buildspec do projeto**

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

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

1. 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'
   ```

1. Selecione **Atualizar buildspec**.

## Compilar e executar a aplicação React
<a name="sample-lambda-react-nodejs.build"></a>

Crie o aplicativo React no CodeBuild Lambda, baixe os artefatos de construção e execute o aplicativo React localmente.

**Para compilar e executar a aplicação React**

1. Selecione **Iniciar compilação**.

1. 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.

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

1. 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](https://create-react-app.dev/docs/deployment/).

## Limpar a infraestrutura
<a name="sample-lambda-react-nodejs.clean-up"></a>

Para evitar cobranças adicionais pelos recursos que você usou durante este tutorial, exclua os recursos criados para o seu CodeBuild projeto.

**Para limpar a infraestrutura**

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

1. Navegue até o CloudWatch console e exclua os grupos de CloudWatch registros associados ao seu CodeBuild projeto.

1. Navegue até o CodeBuild console e exclua seu CodeBuild projeto escolhendo **Excluir projeto de compilação**.