Crie um aplicativo React de página única com CodeBuild Lambda Node.js

Create React App é uma forma de criar aplicativos React de página única. O exemplo de Node.js a seguir usa Node.js para criar os artefatos de origem do aplicativo Create React e retorna os artefatos de construção.

Configure seu repositório de origem e seu bucket de artefatos

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

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

1. Em sua máquina local, execute yarn create react-app <app-name> para criar um aplicativo React simples.

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

Crie um projeto CodeBuild Lambda Node.js

Crie um projeto AWS CodeBuild Lambda Node.js.

Para criar seu 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 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.

3. Em Project name (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 Código-fonte, selecione o repositório de origem em que seu AWS SAM projeto está localizado.

5. Em Environment (Ambiente):

   • Para Computação, selecione Lambda.

   • Em Tempo de execução (s), selecione Node.js.

   • Para 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 Embalagem de artefatos, selecione Zip.

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

Configurar o buildspec do projeto

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

Para configurar o buildspec do seu projeto

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

2. No Buildspec, escolha Inserir comandos de compilação e, em seguida, Alternar para o 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 Update buildspec (Atualizar buildspec).

Crie e execute seu aplicativo React

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

Para criar e executar seu aplicativo React

1. Selecione Start build.

2. Quando a compilação estiver concluída, navegue até o bucket de artefatos do projeto Amazon S3 e baixe o artefato do aplicativo 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 serve comando servirá o site estático em uma porta local e imprimirá a saída em seu terminal. Você pode visitar a URL do localhost abaixo Local: na saída do terminal para visualizar seu aplicativo React.

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

Limpe sua infraestrutura

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

Para limpar sua infraestrutura

1. Exclua os artefatos do seu projeto (bucket Amazon S3)

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

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