Erstellen Sie eine einseitige React-App mit CodeBuild Lambda Node.js

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

Laden Sie den Projektordner der React-App in ein unterstütztes Quell-Repository hoch. Eine Liste der unterstützten Quelltypen finden Sie unter ProjectSource.

Öffnen Sie die AWS CodeBuild Konsole unter https://console.aws.amazon.com/codesuite/codebuild/home.

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.

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.

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

In Environment (Umgebung):

In Artifacts (Artefakte):

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

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

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

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'

Wählen Sie Update buildspec (Buildspec aktualisieren).

Wählen Sie Start build (Build starten).

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

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

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.

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

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

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