Crea un'app React a pagina singola con CodeBuild Lambda Node.js - AWS CodeBuild
Configura il repository dei sorgenti e il bucket degli artefattiCreare un progetto CodeBuild Lambda Node.jsConfigura il progetto buildspecCrea ed esegui la tua app ReactPulisci la tua infrastruttura

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

Create React App è 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

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.

  2. Carica la cartella del progetto dell'app React in un repository di sorgenti supportato. Per un elenco dei tipi di sorgenti supportati, vedi ProjectSource.

Creare un progetto CodeBuild Lambda Node.js

Crea un progetto AWS CodeBuild Lambda Node.js.

Per creare il tuo progetto CodeBuild Lambda Node.js

  1. Apri la AWS CodeBuild console all'indirizzo https://console.aws.amazon.com/codesuite/codebuild/home.

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

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

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

  5. In Environment (Ambiente):

    • Per Compute, seleziona Lambda.

    • Per Runtime (s), seleziona Node.js.

    • Per Image, seleziona aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20.

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

  7. Scegliere Create build project (Crea progetto di compilazione).

Configura il progetto buildspec

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.

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

  3. 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'

  4. Selezionare Update buildspec (Aggiorna buildspec).

Crea ed esegui la tua app React

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

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

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

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

Pulisci la tua infrastruttura

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)

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

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