Tutorial: Eine React-Anwendung erstellen und aktualisieren - Amazon CodeCatalyst
VoraussetzungenSchritt 1: Erstellen Sie einen benutzerdefinierten BlueprintSchritt 2: Freigabe-Workflow anzeigenSchritt 3: Blueprint zum Katalog hinzufügenSchritt 4: Projekt mit Blueprint erstellenSchritt 5: Blueprint aktualisierenSchritt 6: Aktualisieren Sie die veröffentlichte Katalogversion des Blueprints auf die neue VersionSchritt 7: Aktualisieren Sie das Projekt mit der neuen Blueprint-VersionSchritt 8: Sehen Sie sich die Änderungen im Projekt an

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.

Tutorial: Eine React-Anwendung erstellen und aktualisieren

Als Autor von Blueprints können Sie benutzerdefinierte Blueprints entwickeln und dem Blueprints-Katalog Ihres Bereichs hinzufügen. Diese Blueprints können dann von Space-Mitgliedern verwendet werden, um neue Projekte zu erstellen oder sie zu bestehenden Projekten hinzuzufügen. Sie können weiterhin Änderungen an Ihren Blueprints vornehmen, die dann als Updates über Pull-Requests zur Verfügung gestellt werden.

Dieses Tutorial bietet eine exemplarische Vorgehensweise aus der Sicht eines Blueprint-Autors und eines Blueprint-Benutzers. Das Tutorial zeigt, wie Sie einen einseitigen React-Webanwendungs-Blueprint erstellen. Der Blueprint wird dann verwendet, um ein neues Projekt zu erstellen. Wenn der Blueprint mit Änderungen aktualisiert wird, werden diese Änderungen in das anhand des Blueprints erstellte Projekt über eine Pull-Anfrage übernommen.

Voraussetzungen

Um einen benutzerdefinierten Blueprint zu erstellen und zu aktualisieren, müssen Sie die folgenden Aufgaben abgeschlossen haben: Richten Sie ein und melden Sie sich an CodeCatalyst

Schritt 1: Erstellen Sie einen benutzerdefinierten Blueprint

Wenn Sie einen benutzerdefinierten Blueprint erstellen, wird ein CodeCatalyst Projekt erstellt, das Ihren Blueprint-Quellcode sowie Ihre Entwicklungstools und Ressourcen enthält. In Ihrem Projekt werden Sie den Blueprint entwickeln, testen und veröffentlichen.

  1. Öffnen Sie die CodeCatalyst Konsole unter https://codecatalyst.aws/.

  2. Navigieren Sie in der CodeCatalyst Konsole zu dem Bereich, in dem Sie einen Blueprint erstellen möchten.

  3. Wählen Sie Einstellungen, um zu den Space-Einstellungen zu navigieren.

  4. Wählen Sie auf der Registerkarte Space-Einstellungen die Option Blueprints und dann Blueprint erstellen aus.

  5. Aktualisieren Sie die Felder im Assistenten zum Erstellen von Blueprints mit den folgenden Werten:

    • Geben Sie im Feld Blueprint-Name den Wert ein. react-app-blueprint

    • Geben Sie im Feld Blueprint-Anzeigename den Wert ein. react-app-blueprint

  6. Wählen Sie optional Code anzeigen aus, um eine Vorschau des Blueprint-Quellcodes für Ihren Blueprint anzuzeigen. Wählen Sie ebenfalls Workflow anzeigen aus, um eine Vorschau des Workflows anzuzeigen, der in dem Projekt erstellt und veröffentlicht wird, das den Blueprint erstellt und veröffentlicht.

  7. Wählen Sie Blueprint erstellen aus.

  8. Sobald Ihr Blueprint erstellt wurde, werden Sie zum Projekt des Blueprints weitergeleitet. Dieses Projekt enthält den Blueprint-Quellcode sowie die Tools und Ressourcen, die Sie zum Entwickeln, Testen und Veröffentlichen des Blueprints benötigen. Es wurde ein Release-Workflow generiert, mit dem Ihr Blueprint automatisch im Space veröffentlicht wurde.

  9. Nachdem Ihr Blueprint und Ihr Blueprint-Projekt erstellt wurden, besteht der nächste Schritt darin, es zu konfigurieren, indem Sie den Quellcode aktualisieren. Sie können Dev Environments verwenden, um Ihr Quell-Repository direkt in Ihrem Browser zu öffnen und zu bearbeiten.

    Wählen Sie im Navigationsbereich Code und dann Dev Environments aus.

  10. Wählen Sie Create Dev Environment und dann AWS Cloud9 (im Browser).

  11. Behalten Sie die Standardeinstellungen bei und wählen Sie Create.

  12. Navigieren Sie im AWS Cloud9 Terminal zu Ihrem Blueprint-Projektverzeichnis, indem Sie den folgenden Befehl ausführen:

    cd react-app-blueprint

  13. Ein static-assets Ordner wird automatisch erstellt und gefüllt, wenn ein Blueprint erstellt wird. In diesem Tutorial löschen Sie den Standardordner und generieren einen neuen Ordner für einen React-App-Blueprint.

    Löschen Sie den Ordner static-assets, indem Sie den folgenden Befehl ausführen:

    rm -r static-assets

    AWS Cloud9 ist auf einer Linux-basierten Plattform aufgebaut. Wenn Sie ein Windows-Betriebssystem verwenden, können Sie stattdessen den folgenden Befehl verwenden:

    rmdir /s /q static-assets

  14. Nachdem der Standardordner gelöscht wurde, erstellen Sie einen static-assets Ordner für einen React-App-Blueprint, indem Sie den folgenden Befehl ausführen:

    npx create-react-app static-assets

    Wenn Sie dazu aufgefordert werden, geben Sie einy, um fortzufahren.

    Eine neue React-Anwendung wurde in dem static-assets Ordner mit den erforderlichen Paketen erstellt. Die Änderungen müssen in Ihr CodeCatalyst Remote-Quell-Repository übertragen werden.

  15. Stellen Sie sicher, dass Sie über die neuesten Änderungen verfügen, und übertragen Sie die Änderungen anschließend in das CodeCatalyst Quell-Repository des Blueprints, indem Sie die folgenden Befehle ausführen:

    git pull
    git add .
    git commit -m "Add React app to static-assets"
    git push

Wenn eine Änderung in das Quell-Repository des Blueprints übertragen wird, wird der Release-Workflow automatisch gestartet. Dieser Workflow erhöht die Blueprint-Version, erstellt den Blueprint und veröffentlicht ihn in Ihrem Bereich. Im nächsten Schritt navigieren Sie zum ausgeführten Release-Workflow, um zu sehen, wie er funktioniert.

Schritt 2: Freigabe-Workflow anzeigen

  1. Wählen Sie in der CodeCatalyst Konsole im Navigationsbereich CI/CD und dann Workflows aus.

  2. Wählen Sie den Blueprint-Release-Workflow aus.

  3. Sie können sehen, dass der Workflow Aktionen zum Erstellen und Veröffentlichen des Blueprints enthält.

  4. Wählen Sie unter Letzte Ausführung den Link Workflow-Ausführung aus, um die Ausführung anhand der von Ihnen vorgenommenen Codeänderung anzuzeigen.

  5. Sobald der Lauf abgeschlossen ist, wird Ihre neue Blueprint-Version veröffentlicht. Veröffentlichte Blueprint-Versionen sind in Ihren Space-Einstellungen sichtbar, können aber erst in Projekten verwendet werden, wenn sie dem Blueprints-Katalog des Spaces hinzugefügt wurden. Im nächsten Schritt fügen Sie den Blueprint dem Katalog hinzu.

Schritt 3: Blueprint zum Katalog hinzufügen

Durch Hinzufügen eines Blueprints zum Blueprints-Katalog des Spaces kann der Blueprint in allen Projekten in einem Space verwendet werden. Space-Mitglieder können den Blueprint verwenden, um neue Projekte zu erstellen oder sie zu bestehenden Projekten hinzuzufügen.

  1. Navigieren Sie in der CodeCatalyst Konsole zurück zum Bereich.

  2. Wählen Sie Einstellungen und dann Blueprints aus.

  3. Wählen Sie react-app-blueprintund wählen Sie dann Zum Katalog hinzufügen aus.

  4. Wählen Sie Speichern.

Schritt 4: Projekt mit Blueprint erstellen

Nachdem der Blueprint dem Katalog hinzugefügt wurde, kann er in Projekten verwendet werden. In diesem Schritt erstellen Sie ein Projekt mit dem Blueprint, den Sie gerade erstellt haben. In einem späteren Schritt aktualisieren Sie dieses Projekt, indem Sie eine neue Version des Blueprints aktualisieren und veröffentlichen.

  1. Wählen Sie die Registerkarte Projekte und dann Projekt erstellen aus.

  2. Wählen Sie Space Blueprints und dann aus react-app-blueprint.

    Anmerkung

    Sobald der Blueprint ausgewählt ist, können Sie den Inhalt der Blueprint-Datei sehen. README.md

  3. Wählen Sie Weiter aus.

  4. Anmerkung

    Der Inhalt dieses Assistenten zur Projekterstellung kann im Blueprint konfiguriert werden.

    Geben Sie den Projektnamen als Blueprint-Benutzer ein. Geben Sie für dieses Tutorial react-app-project ein. Weitere Informationen finden Sie unter Entwicklung eines maßgeschneiderten Entwurfs zur Erfüllung der Projektanforderungen.

Als Nächstes aktualisieren Sie den Blueprint und fügen die neue Version dem Katalog hinzu, mit dem Sie dieses Projekt aktualisieren werden.

Schritt 5: Blueprint aktualisieren

Nachdem ein Blueprint zum Erstellen eines neuen Projekts verwendet oder auf bestehende Projekte angewendet wurde, können Sie als Blueprint-Autor weiterhin Aktualisierungen vornehmen. In diesem Schritt nehmen Sie Änderungen am Blueprint vor und veröffentlichen automatisch eine neue Version im Bereich. Die neue Version kann dann als Katalogversion hinzugefügt werden.

  1. Navigieren Sie zu dem react-app-blueprintProjekt, das in erstellt wurdeTutorial: Eine React-Anwendung erstellen und aktualisieren.

  2. Öffnen Sie die Entwicklungsumgebung, die in erstellt wurdeTutorial: Eine React-Anwendung erstellen und aktualisieren.

    1. Wählen Sie im Navigationsbereich Code und dann Dev Environments aus.

    2. Suchen Sie in der Tabelle nach der Entwicklungsumgebung und wählen Sie dann Öffnen in AWS Cloud9 (im Browser) aus.

  3. Als der Blueprint-Release-Workflow ausgeführt wurde, wurde die Blueprint-Version durch Aktualisierung der Datei inkrementiert. package.json Übernehmen Sie diese Änderung, indem Sie den folgenden Befehl im Terminal ausführen: AWS Cloud9 

    git pull

  4. Navigieren Sie zu dem static-assets Ordner, indem Sie den folgenden Befehl ausführen:

    cd /projects/react-app-blueprint/static-assets

  5. Erstellen Sie eine hello-world.txt Datei im static-assets Ordner, indem Sie den folgenden Befehl ausführen:

    touch hello-world.txt

    AWS Cloud9 ist auf einer Linux-basierten Plattform aufgebaut. Wenn Sie ein Windows-Betriebssystem verwenden, können Sie stattdessen den folgenden Befehl verwenden:

    echo > hello-world.text

  6. Doppelklicken Sie in der linken Navigationsleiste auf die hello-world.txt Datei, um sie im Editor zu öffnen, und fügen Sie den folgenden Inhalt hinzu:

    Hello, world!

    Speichern Sie die Datei.

  7. Stellen Sie sicher, dass Sie über die neuesten Änderungen verfügen, und übertragen Sie die Änderungen anschließend in das CodeCatalyst Quell-Repository des Blueprints, indem Sie die folgenden Befehle ausführen:

    git pull
    git add .
    git commit -m "prettier setup"
    git push

Durch das Übertragen der Änderungen wurde der Release-Workflow gestartet, der die neue Version des Blueprints automatisch im Space veröffentlicht.

Schritt 6: Aktualisieren Sie die veröffentlichte Katalogversion des Blueprints auf die neue Version

Nachdem ein Blueprint verwendet wurde, um ein neues Projekt zu erstellen oder auf bestehende Projekte angewendet zu haben, können Sie den Blueprint immer noch als Blueprint-Autor aktualisieren. In diesem Schritt nehmen Sie Änderungen am Blueprint vor und ändern die Katalogversion des Blueprints.

  1. Navigieren Sie in der CodeCatalyst Konsole zurück zum Bereich.

  2. Wählen Sie Einstellungen und dann Blueprints aus.

  3. Wählen Sie react-app-blueprintund wählen Sie dann Katalogversion verwalten aus.

  4. Wählen Sie die neue Version und dann Speichern aus.

Schritt 7: Aktualisieren Sie das Projekt mit der neuen Blueprint-Version

Eine neue Version ist jetzt im Blueprints-Katalog des Space verfügbar. Als Blueprint-Benutzer können Sie die Version für das in erstellte Projekt aktualisieren. Schritt 4: Projekt mit Blueprint erstellen Dadurch wird sichergestellt, dass Sie über die neuesten Änderungen und Korrekturen verfügen, die zur Einhaltung der bewährten Verfahren erforderlich sind.

  1. Navigieren Sie in der CodeCatalyst Konsole zu dem react-app-projectProjekt, das in erstellt wurdeSchritt 4: Projekt mit Blueprint erstellen.

  2. Wählen Sie im Navigationsbereich die Option Blueprints aus.

  3. Wählen Sie im Infofeld Blueprint aktualisieren aus.

  4. Im Bereich Codeänderungen auf der rechten Seite können Sie die Änderungen hello-world.txt und package.json Aktualisierungen sehen.

  5. Wählen Sie Update anwenden.

Wenn Sie Update anwenden auswählen, wird im Projekt eine Pull-Anfrage mit den Änderungen aus der aktualisierten Blueprint-Version erstellt. Um die Aktualisierungen am Projekt vorzunehmen, müssen Sie den Pull Request zusammenführen. Weitere Informationen finden Sie unter Einen Pull-Request überprüfen und Eine Pull-Anfrage zusammenführen.

  1. Suchen Sie in der Blueprints-Tabelle nach dem Blueprint. Wählen Sie in der Spalte Status die Option Ausstehende Pull-Anfrage und dann den Link zum offenen Pull-Request aus.

  2. Überprüfe den Pull Request und wähle dann Merge aus.

  3. Wählen Sie Fast forward merge, um die Standardwerte beizubehalten, und wählen Sie dann Merge aus.

Schritt 8: Sehen Sie sich die Änderungen im Projekt an

Änderungen am Blueprint sind jetzt danach Schritt 7: Aktualisieren Sie das Projekt mit der neuen Blueprint-Version in Ihrem Projekt verfügbar. Als Blueprint-Benutzer können Sie die Änderungen im Quell-Repository anzeigen.

  1. Wählen Sie im Navigationsbereich Quell-Repositories und dann den Namen des Quell-Repositorys aus, das bei der Erstellung des Projekts erstellt wurde.

  2. Unter Dateien können Sie die hello-world.txt Datei anzeigen, die in Schritt 5: Blueprint aktualisieren erstellt wurde.

  3. Wählen Sie diehello-world.txt, um den Inhalt der Datei anzuzeigen.

Das Lebenszyklusmanagement bietet Blueprint-Autoren die Möglichkeit, den Softwareentwicklungszyklus jedes Projekts, das einen bestimmten Blueprint enthält, zentral zu verwalten. Wie in diesem Tutorial gezeigt, können Sie Aktualisierungen an den Blueprint weitergeben, die dann von Projekten übernommen werden können, die den Blueprint verwendet haben, um ein neues Projekt zu erstellen oder ihn auf ein vorhandenes Projekt angewendet haben. Weitere Informationen finden Sie unter Arbeiten mit Lebenszyklusmanagement als Blueprint-Autor.