Integrieren Sie ein Bitbucket-Repository mit AWS Amplify mithilfe von AWS CloudFormation - AWS Prescriptive Guidance
ÜbersichtVoraussetzungen und EinschränkungenArchitekturToolsEpenZugehörige RessourcenAnlagen

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.

Integrieren Sie ein Bitbucket-Repository mit AWS Amplify mithilfe von AWS CloudFormation

Erstellt von Alwin Abraham () AWS

Umwelt: Produktion

Technologien: DevOps

AWSDienstleistungen: AWS Amplify; AWS CloudFormation

Übersicht

AWSAmplify hilft Ihnen dabei, statische Websites schnell bereitzustellen und zu testen, ohne die normalerweise erforderliche Infrastruktur einrichten zu müssen. Sie können den Ansatz dieses Musters verwenden, wenn Ihr Unternehmen Bitbucket für die Quellcodeverwaltung verwenden möchte, sei es, um vorhandenen Anwendungscode zu migrieren oder eine neue Anwendung zu erstellen. Durch AWS CloudFormation die automatische Einrichtung von Amplify bieten Sie Einblick in die von Ihnen verwendeten Konfigurationen.

Dieses Muster beschreibt, wie Sie eine Pipeline und Bereitstellungsumgebung für Frontend Continuous Integration and Continuous Deployment (CI/CD) erstellen, indem Sie ein AWS CloudFormation Bitbucket-Repository mit Amplify integrieren. AWS Der Ansatz des Musters bedeutet, dass Sie eine Amplify-Frontend-Pipeline für wiederholbare Bereitstellungen erstellen können.

Voraussetzungen und Einschränkungen

Voraussetzungen

  • Ein aktives Amazon Web Services (AWS) -Konto

  • Ein aktives Bitbucket-Konto mit Administratorzugriff

  • Zugriff auf ein Terminal, das c URL oder die Postman-Anwendung verwendet

  • Vertrautheit mit Amplify

  • Vertrautheit mit AWS CloudFormation

  • Vertrautheit mit -formatierten Dateien YAML

Architektur

Diagram showing user interaction with Bitbucket repository connected to AWS Amplify in AWS Cloud region.

Technologie-Stack

  • Amplify

  • AWS CloudFormation

  • Bitbucket

Tools

  • AWSAmplify — Amplify unterstützt Entwickler bei der Entwicklung und Bereitstellung cloudgestützter Mobil- und Web-Apps.

  • AWS CloudFormation— AWS CloudFormation ist ein Service, der Ihnen hilft, Ihre AWS Ressourcen zu modellieren und einzurichten, sodass Sie weniger Zeit mit der Verwaltung dieser Ressourcen verbringen und sich mehr auf Ihre Anwendungen konzentrieren können, die in ausgeführt werden. AWS

  • Bitbucket — Bitbucket ist eine Git-Repository-Management-Lösung, die für professionelle Teams entwickelt wurde. Es bietet dir einen zentralen Ort, um Git-Repositorys zu verwalten, gemeinsam an deinem Quellcode zu arbeiten und dich durch den Entwicklungsablauf zu führen.

Code

Die bitbucket-amplify.yml Datei (angehängt) enthält die AWS CloudFormation Vorlage für dieses Muster.

Epen

AufgabeBeschreibungErforderliche Fähigkeiten
(Optional) Erstelle ein Bitbucket-Repository.

  1. Melde dich mit deinem Bitbucket-Konto an und erstelle ein neues Repository. Weitere Informationen dazu findest du in der Bitbucket-Dokumentation unter Ein Git-Repository erstellen. 

  2. Notiere dir den Namen des Workspace.

Hinweis: Du kannst auch ein vorhandenes Bitbucket-Repository verwenden.

DevOps Ingenieur
Öffnen Sie die Workspace-Einstellungen.

  1. Öffnen Sie den Workspace und wählen Sie den Tab Repository.

  2. Wählen Sie das Repository aus, das Sie in Amplify integrieren möchten.

  3. Wählen Sie den Namen des Workspace, der über dem Namen des Repositorys steht.

  4. Wähle in der Seitenleiste Einstellungen.

DevOps Ingenieur
Schaffen Sie einen OAuth Verbraucher.

  1. Wählen Sie im Abschnitt Apps und Funktionen die Option OAuthVerbraucher und dann Verbraucher hinzufügen aus.

  2. Geben Sie einen Namen für Ihren Verbraucher ein, Amplify Integration z. B.

  3. Geben Sie einen Rückruf URL ein. Dieses Feld ist zwar eine Pflichteingabe, wird aber nicht verwendet, um die Integration abzuschließen. Der Wert könnte also http://localhost:3000

  4. Markieren Sie das Kästchen für Dies ist ein Privatverbraucher.

  5. Wählen Sie die folgenden Berechtigungen aus:

    • Projekt — Read

    • Repositorien — Admin

    • Pull-Anfragen — Read

    • Webhooks — Read und Write

  6. Behalten Sie die Standardauswahl für alle anderen Felder bei und wählen Sie Absenden.

  7. Notieren Sie sich den Schlüssel und das Geheimnis, die generiert wurden.

DevOps Ingenieur
OAuthZugriffstoken abrufen.

  1. Öffnen Sie ein Terminalfenster und führen Sie den folgenden Befehl aus: 

curl -X POST -u "KEY:SECRET" https://bitbucket.org/site/oauth2/access_token -d grant_type=client_credentials 

Wichtig: Ersetzen Sie KEY und SECRET durch den Schlüssel und das Geheimnis, die Sie zuvor aufgezeichnet haben. 

2. Notieren Sie das Zugriffstoken ohne die Anführungszeichen. Das Token ist nur für eine begrenzte Zeit gültig und die Standardzeit beträgt zwei Stunden. Sie müssen die AWS CloudFormation Vorlage in diesem Zeitraum ausführen.

DevOps Ingenieur
AufgabeBeschreibungErforderliche Fähigkeiten
Laden Sie die AWS CloudFormation Vorlage herunter.

Laden Sie die bitbucket-amplify.yml AWS CloudFormation Vorlage herunter (beigefügt). Diese Vorlage erstellt zusätzlich zum Amplify-Projekt und dem Amplify-Zweig die CI/CD-Pipeline in Amplify.

Erstellen Sie den Stack und stellen Sie ihn bereit. AWS CloudFormation

  1. Melden Sie sich bei der AWS Management Console in der AWS Region an, in der Sie die Bereitstellung durchführen möchten, und öffnen Sie die AWS CloudFormation Konsole. 

  2. Wählen Sie „Stack erstellen (mit neuen Ressourcen)“ und anschließend „Eine Vorlagendatei hochladen“. 

  3. Hochladen der bitbucket-amplify.yml-Datei

  4. Wählen Sie Weiter, geben Sie einen Stack-Namen ein und geben Sie dann die folgenden Parameter ein:

    • Zugriffstoken: Fügen Sie das OAuth Zugriffstoken ein, das Sie zuvor erstellt haben.

    • Repository URL: Füge die Repositorys des Bitbucket-Projekts hinzu. URL Das hat URL normalerweise das folgende Format: https://bitbucket.org/<WORKSPACE_NAME>/<REPO_NAME>

    • Branch-Name: Dieser muss mit dem Namen eines Branches in deinem Bitbucket-Repository übereinstimmen. Dieser Branch muss nicht existieren, wenn du den AWS CloudFormation Stack ausführst, aber er ist für die Bereitstellung von Code in der Umgebung erforderlich.

    • Projektname: Dies ist der Name, der dem Amplify-Projekt zugeordnet werden soll.

5. Wählen Sie Weiter und dann Stapel erstellen.

DevOps Ingenieur
AufgabeBeschreibungErforderliche Fähigkeiten
Stellen Sie den Code in der Filiale in Ihrem Repository bereit.

  1. Klonen Sie Ihr Bitbucket-Repository, indem Sie den folgenden Befehl ausführen: git clone https://bitbucket.org/<WORKSPACE_NAME>/<REPO_NAME>

  2. Sieh dir den Branch-Namen an, der bei der Ausführung des AWS CloudFormation Skripts verwendet wurde. Führen Sie den git checkout -b <BRANCH_NAME> Befehl aus, um einen neuen Zweig zu erstellen und auszuchecken. Führen Sie den folgenden git checkout <BRANCH_NAME> Befehl aus, um einen vorhandenen Zweig auszuchecken

  3. Übergeben Sie den Code in den Branch und übertragen Sie ihn in den Remote-Zweig, indem Sie die git push Befehle git commit und ausführen.

  4. Amplify erstellt dann die Anwendung und stellt sie bereit.

Weitere Informationen dazu findest du unter Grundlegende Git-Befehle in der Bitbucket-Dokumentation. 

App-Developer

Zugehörige Ressourcen

Authentifizierungsmethoden (Atlassian-Dokumentation)

Anlagen

Um auf zusätzliche Inhalte zuzugreifen, die mit diesem Dokument verknüpft sind, entpacke die folgende Datei: attachment.zip