Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Erstellen Sie eine einseitige React-App mit CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs"></a>

[Create React App](https://create-react-app.dev/) ist eine Möglichkeit, einseitige React-Anwendungen zu erstellen. Das folgende Beispiel für Node.js verwendet Node.js, um die Quellartefakte aus Create React App zu erstellen, und gibt die Build-Artefakte zurück.

## Richten Sie Ihr Quell-Repository und Ihren Artefakt-Bucket ein
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

Erstellen Sie mit yarn und Create React App ein Quell-Repository für Ihr Projekt.

**Um das Quell-Repository und den Artefakt-Bucket einzurichten**

1. Führen Sie auf Ihrem lokalen Computer aus, `yarn create react-app <app-name>` um eine einfache React-App zu erstellen.

1. Laden Sie den Projektordner der React-App in ein unterstütztes Quell-Repository hoch. Eine Liste der unterstützten Quelltypen finden Sie unter [ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html).

## Erstellen Sie ein CodeBuild Lambda Node.js Projekt
<a name="sample-lambda-react-nodejs.create-project"></a>

Erstellen Sie ein AWS CodeBuild Lambda Node.js -Projekt.

**So erstellen Sie Ihr CodeBuild Lambda Node.js Projekt**

1. Öffnen Sie die AWS CodeBuild Konsole unter [https://console.aws.amazon.com/codesuite/codebuild/home](https://console.aws.amazon.com/codesuite/codebuild/home).

1.  Wenn eine CodeBuild Informationsseite angezeigt wird, wählen Sie Build-Projekt **erstellen**. Erweitern Sie andernfalls im Navigationsbereich **Build**, wählen Sie **Build projects** und dann **Create build project** aus. 

1. Geben Sie unter **Project name (Projektname)** einen Namen für dieses Build-Projekt ein. Die Namen von Build-Projekten müssen für jedes AWS Konto eindeutig sein. Sie können auch eine optionale Beschreibung des Build-Projekts hinzufügen, damit andere Benutzer verstehen, wofür dieses Projekt verwendet wird.

1. Wählen Sie unter **Quelle** das Quell-Repository aus, in dem sich Ihr AWS SAM Projekt befindet.

1. In **Environment** (Umgebung):
   + Wählen Sie für **Compute** die Option **Lambda** aus.
   + Wählen Sie für **Runtime (s)** die Option **Node.js** aus.
   + Wählen Sie für **Image aws/codebuild/amazonlinux** **-x86\$164-lambda-standard:nodejs20** aus.

1. In **Artifacts (Artefakte)**:
   + Wählen Sie als **Typ** **Amazon S3** aus.
   + Wählen Sie als **Bucket-Namen den Bucket** für Projektartefakte aus, den Sie zuvor erstellt haben.
   + Wählen Sie für das **Verpacken von Artefakten** die Option **Zip** aus.

1. Wählen Sie **Create build project (Build-Projekt erstellen)** aus.

## Richten Sie das Projekt buildspec ein
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

 CodeBuild Liest Build-Befehle aus einer Buildspec-Datei und führt sie aus, um Ihre React-App zu erstellen.

**Um dein Projekt buildspec einzurichten**

1. **Wählen Sie in der CodeBuild Konsole Ihr Build-Projekt aus und wählen Sie dann **Bearbeiten** und Buildspec aus.**

1. **Wählen Sie in **Buildspec** die Option **Build-Befehle einfügen** und dann Zum Editor wechseln aus.**

1. Löschen Sie die vorgefüllten Build-Befehle und fügen Sie die folgende Buildspec ein.

   ```
   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. Wählen Sie **Update buildspec (Buildspec aktualisieren)**.

## Erstelle deine React-App und führe sie aus
<a name="sample-lambda-react-nodejs.build"></a>

Erstellen Sie die React-App auf CodeBuild Lambda, laden Sie die Build-Artefakte herunter und führen Sie die React-App lokal aus.

**Um Ihre React-App zu erstellen und auszuführen**

1. Wählen Sie **Start build (Build starten)**.

1. Sobald der Build abgeschlossen ist, navigieren Sie zu Ihrem Amazon S3 S3-Projektartefakt-Bucket und laden Sie das React-App-Artefakt herunter.

1. Entpacken Sie das React-Build-Artefakt und fügen Sie es `run npm install -g serve && serve -s build` in den Projektordner ein.

1. Der `serve` Befehl stellt die statische Site auf einem lokalen Port bereit und druckt die Ausgabe auf Ihrem Terminal aus. Sie können die Localhost-URL unter `Local:` der Terminalausgabe aufrufen, um Ihre React-App anzuzeigen.

Weitere Informationen zum Umgang mit der Bereitstellung für einen React-basierten Server finden Sie unter [React-App-Deployment erstellen](https://create-react-app.dev/docs/deployment/).

## Bereinigen Sie Ihre Infrastruktur
<a name="sample-lambda-react-nodejs.clean-up"></a>

Um weitere Gebühren für Ressourcen zu vermeiden, die Sie in diesem Tutorial verwendet haben, löschen Sie die für Ihr CodeBuild Projekt erstellten Ressourcen.

**Um Ihre Infrastruktur zu bereinigen**

1. Löschen Sie Ihre Projektartefakte — Amazon S3 S3-Bucket

1. Navigieren Sie zur CloudWatch Konsole und löschen Sie die mit Ihrem CodeBuild Projekt verknüpften CloudWatch Protokollgruppen.

1. Navigieren Sie zur CodeBuild Konsole und löschen Sie Ihr CodeBuild Projekt, indem **Sie Build-Projekt löschen** wählen.