Erstellen einer einseitigen React-App mit CodeBuild Lambda Node.js

Create React App ist eine Möglichkeit, einseitige React-Anwendungen zu erstellen. Das folgende Node.js-Beispiel verwendet Node.js, um die Quellartefakte aus Create React App zu erstellen, und gibt die Build-Artefakte zurück.

Einrichten Ihres Quell-Repositorys und Artefakt-Buckets

Erstellen Sie ein Quell-Repository für Ihr Projekt mithilfe von Yarn und Create React App.

So richten Sie das Quell-Repository und den Artefakt-Bucket ein

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

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

Erstellen eines CodeBuild Lambda-Node.js-Projekts

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

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

1. Öffnen Sie die -AWS CodeBuildKonsole unter https://console.aws.amazon.com/codesuite/codebuild/home.

2. Wenn eine CodeBuild Informationsseite angezeigt wird, wählen Sie Build-Projekt erstellen aus. Erweitern Sie andernfalls im Navigationsbereich Build , wählen Sie Build-Projekte und dann Build-Projekt erstellen aus.

3. Geben Sie unter Project name (Projektname) einen Namen für dieses Build-Projekt ein. Build-Projektnamen müssen in allen AWS-Konten eindeutig sein. Sie können auch eine optionale Beschreibung des Build-Projekts einfügen, um anderen Benutzern zu helfen, zu verstehen, wofür dieses Projekt verwendet wird.

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

5. In Environment (Umgebung):

   • Wählen Sie für Datenverarbeitung die Option Lambda aus.

   • Wählen Sie für Laufzeit(en) Node.js aus.

   • Wählen Sie für Image aws/codebuild/amazonlinux-x86_64-lambda-standard :nodejs20 aus.

6. In Artifacts (Artefakte):

   • Wählen Sie für Typ Amazon S3 aus.

   • Wählen Sie für Bucket-Name den Projektartefakt-Bucket aus, den Sie zuvor erstellt haben.

   • Wählen Sie für Artifacts packaging die Option Zip aus.

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

Einrichten der Projekt-Build-Spezifikation

Um Ihre React-App zu erstellen, CodeBuild liest und führt Build-Befehle aus einer buildspec-Datei aus.

So richten Sie Ihre Projekt-Build-Spezifikation ein

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

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

3. Löschen Sie die vorausgefü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'

4. Wählen Sie Update buildspec (Buildspec aktualisieren).

Erstellen und Ausführen Ihrer React-App

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

So erstellen und führen Sie Ihre React-App aus

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

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

3. Entpacken Sie das React-Build-Artefakt und run npm install -g serve && serve -s build im Projektordner.

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

Weitere Informationen zur Handhabung der Bereitstellung für einen React-basierten Server finden Sie unter Erstellen einer React-App-Bereitstellung.

Bereinigen Ihrer Infrastruktur

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.

So bereinigen Sie Ihre Infrastruktur

1. Löschen Ihres Amazon S3-Buckets für Projektartefakte

2. Navigieren Sie zur CloudWatch -Konsole und löschen Sie die CloudWatch Protokollgruppen, die Ihrem CodeBuild Projekt zugeordnet sind.

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