Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Crea un'app React a pagina singola con CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs"></a>

[Create React App](https://create-react-app.dev/) è un modo per creare applicazioni React a pagina singola. Il seguente esempio di Node.js utilizza Node.js per creare gli artefatti di origine dall'app Create React e restituisce gli artefatti di compilazione.

## Configura il repository dei sorgenti e il bucket degli artefatti
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

Crea un archivio di sorgenti per il tuo progetto usando yarn e l'app Create React.

**Per configurare il repository dei sorgenti e il bucket degli artefatti**

1. Sul tuo computer locale, esegui `yarn create react-app <app-name>` per creare una semplice app React.

1. Carica la cartella del progetto dell'app React in un repository di sorgenti supportato. Per un elenco dei tipi di sorgenti supportati, vedi [ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html).

## Creare un progetto CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs.create-project"></a>

Crea un progetto AWS CodeBuild Lambda Node.js.

**Per creare il tuo progetto CodeBuild Lambda Node.js**

1. Apri la AWS CodeBuild console su [https://console.aws.amazon.com/codesuite/codebuild/home](https://console.aws.amazon.com/codesuite/codebuild/home).

1.  Se viene visualizzata una pagina di CodeBuild informazioni, scegli **Crea** progetto di compilazione. Altrimenti, nel riquadro di navigazione, espandi **Crea**, scegli **Crea progetti**, quindi scegli **Crea progetto di compilazione**. 

1. In **Project name (Nome progetto)** immettere un nome per questo progetto di compilazione. I nomi dei progetti di compilazione devono essere univoci per ogni AWS account. Puoi anche includere una descrizione opzionale del progetto di compilazione per aiutare gli altri utenti a capire a cosa serve questo progetto.

1. In **Source**, seleziona il repository di origine in cui si trova il AWS SAM progetto.

1. In **Environment (Ambiente)**:
   + Per **Compute**, seleziona **Lambda**.
   + **Per **Runtime (s)**, seleziona Node.js.**
   + Per **Image**, selezionate **aws/codebuild/amazonlinux-x86\$164-lambda-standard:nodejs20**.

1. In **Artifacts (Artefatti)**:
   + Per **Tipo**, seleziona **Amazon S3**.
   + Per **Bucket name, seleziona il bucket** di artefatti del progetto che hai creato in precedenza.
   + **Per il packaging degli **artifatti**, seleziona Zip.**

1. Scegliere **Create build project (Crea progetto di compilazione)**.

## Configura il progetto buildspec
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

Per creare la tua app React, CodeBuild legge ed esegue i comandi di compilazione da un file buildspec.

**Per configurare il tuo progetto buildspec**

1. **Nella CodeBuild console, seleziona il tuo progetto di build, quindi scegli **Modifica** e Buildspec.**

1. **In **Buildspec**, scegli **Inserisci comandi di compilazione** e poi Passa all'editor.**

1. Elimina i comandi di compilazione precompilati e incollali nella seguente 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. Selezionare **Update buildspec (Aggiorna buildspec)**.

## Crea ed esegui la tua app React
<a name="sample-lambda-react-nodejs.build"></a>

Crea l'app React su CodeBuild Lambda, scarica gli artefatti di compilazione ed esegui l'app React localmente.

**Per creare ed eseguire la tua app React**

1. Selezionare **Start build (Avvia compilazione)**.

1. Una volta terminata la compilazione, accedi al tuo bucket di artefatti del progetto Amazon S3 e scarica l'artefatto dell'app React.

1. Decomprimi l'artefatto della build di React e inseriscilo nella cartella del progetto. `run npm install -g serve && serve -s build`

1. Il `serve` comando servirà il sito statico su una porta locale e stamperà l'output sul tuo terminale. Puoi visitare l'URL localhost sotto `Local:` nell'output del terminale per visualizzare la tua app React.

Per saperne di più su come gestire la distribuzione di un server basato su React, vedi [Create React App Deployment](https://create-react-app.dev/docs/deployment/).

## Pulisci la tua infrastruttura
<a name="sample-lambda-react-nodejs.clean-up"></a>

Per evitare ulteriori addebiti per le risorse utilizzate durante questo tutorial, elimina le risorse create per il CodeBuild progetto.

**Per ripulire la tua infrastruttura**

1. Eliminare gli artefatti del progetto (bucket Amazon S3)

1. Accedi alla CloudWatch console ed elimina i gruppi di CloudWatch log associati al tuo progetto. CodeBuild 

1. Vai alla CodeBuild console ed elimina il CodeBuild progetto scegliendo **Elimina progetto di compilazione**.