Teilen über


Erstellen eines Pullanforderungsstatusservers mit Node.js

Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019

Der Pull-Anforderungsworkflow (PR) bietet Entwicklern die Möglichkeit, Feedback zu ihrem Code von Peers und von automatisierten Tools zu erhalten. Nicht-Microsoft-Tools und -Dienste können mit der PR-Status-APIam PR-Workflow teilnehmen. Dieser Artikel führt Sie durch den Prozess der Erstellung eines Statusservers zum Überprüfen von PRs in einem Git-Repository von Azure DevOps Services. Weitere Informationen zu PR-Status finden Sie unter Anpassen und Erweitern von Pull Request-Workflows mit Pull Request-Status.

Voraussetzungen

  • Eine Organisation in Azure DevOps mit einem Git-Repository. Wenn Sie über keine Organisation verfügen, registrieren Sie sich, um Code in unbegrenzten kostenlosen privaten Git-Repositorys hochzuladen und freizugeben.
  • Installieren Sie VS Code oder einen anderen Code-Editor Ihrer Wahl. Die Anweisungen in diesem Handbuch verwenden VS Code, aber die Schritte in anderen Code-Editoren sind ähnlich.

Installieren von Node.js

Um Node.js zu installieren, laden Sie das für Ihre Plattform geeignete LTS-Release herunter. Der Download enthält ein Installationsprogramm, das Sie ausführen können, um die Node.js Laufzeit auf Ihrem lokalen Computer zu installieren. Achten Sie beim Installieren von Node.jsdarauf, den npm-Paket-Manager Teil der Installation beizubehalten, der standardmäßig ausgewählt ist.

Erstellen eines einfachen Webservers mit Express

In den Schritten in diesem Abschnitt wird Expressverwendet, bei dem es sich um ein einfaches Webframework für Node.js handelt, das viele HTTP-Hilfsmethoden bereitstellt, die das Erstellen eines Webservers vereinfachen. Dieses Framework bietet Ihnen die grundlegenden Funktionen, die zum Hören von PR-Ereignissen erforderlich sind.

  1. Erstellen Sie in der Befehlszeile einen neuen Projektordner für Ihren Webserver.

    mkdir pr-server
    cd pr-server
    
  2. Verwenden Sie den Befehl npm init, um eine neue package.json Datei für das Projekt zu erstellen.

    npm init
    

    Wählen Sie und geben Sie ein, um die Standardwerte für alle Optionen außer dem Einstiegspunkt zu akzeptieren. Ändern sie es zu app.js

    entry point: (index.js) app.js
    
  3. Installieren Sie Express im verzeichnis pr-server mit dem folgenden Befehl. Dadurch wird Express installiert und in der Abhängigkeitenliste gespeichert.

    npm install express
    
  4. Erstellen Sie eine Express-App als Grundlage für den PR-Statusserver. Die folgenden Schritte basieren auf dem Beispiel "Express Hello world". Öffnen Sie den Projektordner in VS Code, indem Sie den folgenden Befehl aus dem Ordner pr-server ausführen.

    code .
    
  5. Erstellen Sie eine neue Datei (Ctrl + N), und fügen Sie den folgenden Beispielcode ein.

    const express = require('express')
    const app = express()
    
    app.get('/', function (req, res) {
    res.send('Hello World!')
    })
    
    app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
    })
    
  6. Speichern Sie die Datei als app.js.

  7. Führen Sie den grundlegenden Webserver mit dem folgenden Befehl aus:

    node app.js
    

    Überprüfen Sie, ob der Server ausgeführt wird, indem Sie zu http://localhost:3000/ wechseln.

Auf HTTP POST-Anforderungen lauschen

Der Webserver empfängt POST Anforderungen von Azure DevOps Services, daher müssen Sie diese Anforderungen auf Ihrem Server verarbeiten.

  1. Fügen Sie am Ende der app.js-Datei den folgenden Code hinzu, und speichern Sie die Datei.

    app.post('/', function (req, res) {
        res.send('Received the POST')
    })
    
  2. Führen Sie den Webserver mit dem folgenden Befehl erneut aus:

    node app.js
    

Konfigurieren eines Diensthakens für PR-Ereignisse

Dienst-Hooks sind ein Azure DevOps Services-Feature, das externe Dienste benachrichtigen kann, wenn bestimmte Ereignisse auftreten. Richten Sie für dieses Beispiel zwei Dienst-Hooks für PR-Ereignisse ein, damit der Statusserver benachrichtigt werden kann. Der erste ist für das Pull Request erstellt-Ereignis und der zweite für das Pull Request aktualisiert-Ereignis.

Um die Service Hook-Benachrichtigungen zu empfangen, machen Sie einen Port im öffentlichen Internet verfügbar. Das ngrok-Hilfsprogramm ist nützlich, um dies in einer Entwicklungsumgebung zu tun.

  1. Laden Sie die entsprechende ngrok-Version für Ihre Plattform herunter, und entpacken Sie sie.

  2. Verwenden Sie ngrok, um mit dem Überwachen desselben Ports wie ihr Beispielserver – Port 3000 – zu beginnen. Führen Sie den folgenden Befehl in einem neuen Befehlsfenster aus.

    ngrok http 3000
    

    Ngrok erstellt eine öffentliche URL, die an localhost:3000weitergeleitet wird. Notieren Sie sich die URL, wie Sie sie im nächsten Schritt benötigen. Es sieht wie im folgenden Beispiel aus:

    http://c3c1bffa.ngrok.io
    
  3. Navigieren Sie zu Ihrem Projekt in Azure DevOps, z. B. https://dev.azure.com/<your account>/<your project name>

  4. Zeigen Sie im Navigationsmenü mit dem Mauszeiger auf das Zahnrad, und wählen Sie Service Hooks aus.

    Der Screenshot zeigt die Option „Service Hooks auswählen“ im Administratormenü.

  5. Wenn dies Ihr erster Servicehook ist, wählen Sie + Create Subscriptionaus.

    Der Screenshot zeigt die ausgewählte Option „Neues Abonnement erstellen“ in der Symbolleiste.

    Wenn Sie bereits andere Diensthaken konfiguriert haben, wählen Sie das Plus-(+) aus, um ein neues Service hook-Abonnement zu erstellen.

    Der Screenshot zeigt die Auswahl des Pluszeichens zum Erstellen eines neuen Service Hook-Abonnements.

  6. Wählen Sie im Dialogfeld "Neues Service Hooks-Abonnement" Web Hooks aus der Liste der Dienste aus, und wählen Sie dann Weiteraus.

    Screenshot zeigt ausgewählte Web-Hooks aus der Liste der Dienste.

  7. Wählen Sie in der Liste der Ereignistrigger Pull Request erstellt aus, und wählen Sie dann Weiter aus.

    Screenshot zeigt die ausgewählte Pullanforderung, die aus der Liste der Ereignistrigger erstellt wurde.

  8. Geben Sie auf der Seite "Aktion" die URL von ngrok in das Feld URL ein. Wählen Sie Test- aus, um ein Testereignis an Ihren Server zu senden.

    Screenshot zeigt die eingegebene URL und den ausgewählten Test zum Testen des Diensthakens.

    Im ngrok-Konsolenfenster wird ein eingehender POST angezeigt, der 200 OK zurückgibt, was darauf hinweist, dass Ihr Server das Service Hook-Ereignis empfangen hat.

    HTTP Requests
    -------------
    
    POST /                         200 OK
    

    Wählen Sie im Fenster "Testbenachrichtigung" die Registerkarte "Antwort" aus, um die Details der Antwort vom Server anzuzeigen. Es sollte eine Inhaltslänge von 17 angezeigt werden, die der Länge der Zeichenfolge von Ihrem POST-Handler entspricht (z. B. "Received the POST").

    Der Screenshot zeigt die ausgewählte Registerkarte „Antwort“, auf der die Testergebnisse angezeigt werden.

  9. Schließen Sie das Fenster „Testbenachrichtigung“, und wählen Sie Fertig stellen aus, um den Service Hook zu erstellen.

Führen Sie die Schritte 3 bis 9 erneut aus, aber konfigurieren Sie dieses Mal das Pull Request aktualisiert-Ereignis.

Wichtig

Stellen Sie sicher, dass Sie die vorherigen Schritte zweimal ausführen, und Service Hooks sowohl für das Pull Request erstellt-Ereignis als auch für das Pull Request aktualisiert-Ereignis erstellen.

Bereitstellen des Status in PRs

Nachdem Ihr Server nun Service Hook-Ereignisse empfangen kann, wenn neue PRs erstellt werden, aktualisieren Sie ihn so, dass er den Status an den PR zurückpostet.

  1. Service hook-Anforderungen enthalten eine JSON-Nutzlast, die das Ereignis beschreibt. Um den vom Diensthaken zurückgegebenen JSON zu analysieren, installieren Sie das Body-Parser--Paket.

    npm install body-parser
    
  2. Aktualisieren Sie app.js, um den Body-Parser zum Analysieren von application/jsonzu verwenden.

    var bodyParser = require('body-parser')
    
    app.use(bodyParser.json())
    
  3. Um die Erstellung von REST-API-Aufrufen an Azure Repos zu vereinfachen, installieren Sie das azure-devops-node-api--Paket.

    npm install azure-devops-node-api 
    
  4. Aktualisieren Sie app.js, um das Azure-devops-node-api-Paket zu verwenden, richten Sie die Details für eine Verbindung mit Ihrem Konto ein, und rufen Sie eine Instanz der Git-API ab.

    const vsts = require("azure-devops-node-api")
    
    const collectionURL = process.env.COLLECTIONURL    
    const token = process.env.TOKEN
    
    var authHandler = vsts.getPersonalAccessTokenHandler(token)
    var connection = new vsts.WebApi(collectionURL, authHandler)
    
    var vstsGit = connection.getGitApi().then( 
        vstsGit => {                                    
            vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
                console.log(result);
            },
            error => {
                console.log(error);
            })
        }, 
        error => { 
            console.log(error);
        } 
    );
    
  5. Erstellen Sie eine Umgebungsvariable für Ihre Sammlungs-URL, indem Sie <your account> durch den Namen Ihrer Azure DevOps-Organisation ersetzen.

    setx COLLECTIONURL "https://dev.azure.com/<your account>"
    
  6. Erstellen Sie ein persönliches Authentifizierungstoken (PAT), das Für Ihre App verwendet werden soll, und befolgen Sie die folgenden Anweisungen: Authentifizieren mit persönlichen Zugriffstoken. Sie sollten für jeden Dienst, den Sie für den Zugriff auf Ihr Konto verwenden, einen neuen PAT erstellen und ihn entsprechend benennen.

  7. Erstellen Sie eine Umgebungsvariable für Ihren PAT.

    setx TOKEN "yourtokengoeshere"
    
  8. Aktualisieren Sie die post()-Funktion, um die PR-Details aus der Service Hook-Nutzlast zu lesen. Sie benötigen diese Werte, um den Status zurückzusenden.

    var repoId = req.body.resource.repository.id
    var pullRequestId = req.body.resource.pullRequestId
    var title = req.body.resource.title
    
  9. Erstellen Sie das status-Objekt, das in dem PR bereitgestellt werden soll.

    State ist eine Enumeration vom Typ GitStatusState. Verwenden Sie succeeded, um anzugeben, dass die PR die Statusüberprüfung bestanden hat und zum Zusammenführen bereit ist.

    description ist ein Zeichenfolgenwert, der dem Benutzer im Abschnitt „Status“ sowie im Aktivitätsfeed in der PR-Detailansicht angezeigt wird.

    Die targetUrl ist eine URL, die verwendet wird, um einen Link für den Beschreibungstext im Statusabschnitt und Aktivitätsfeed zu erstellen. Hier können Benutzer weitere Informationen zum Status abrufen, z. B. einen Buildbericht oder einen Testlauf. Wenn keine URL angegeben ist, wird die Beschreibung als Text ohne Link angezeigt.

    Die Kontexte name und genre werden verwendet, um den Status zu kategorisieren und von anderen Diensten zu unterscheiden, die einen Status posten.

        var prStatus = {
            "state": "succeeded",
            "description": "Ready for review",
            "targetUrl": "https://visualstudio.microsoft.com",
            "context": {
                "name": "wip-checker",
                "genre": "continuous-integration"
            }
        }
    
  10. Anstatt den succeeded Status sofort zu veröffentlichen, prüfen Sie den PR-Titel, um festzustellen, ob der Benutzer angegeben hat, ob es sich bei der PR um eine laufende Arbeit handelt, indem Sie WIP- zum Titel hinzufügen. Wenn ja, ändern Sie den Status, der an den PR zurückgepostet wird.

        if (title.includes("WIP")) {
            prStatus.state = "pending"
            prStatus.description = "Work in progress"
        }
    
  11. Veröffentlichen Sie schließlich den Status mithilfe der createPullRequestStatus()-Methode. Es erfordert das Statusobjekt, die Repository-ID und die Pullanforderungs-ID. Geben Sie die Antwort auf der Node-Konsole aus, damit Sie das Ergebnis der Anfrage sehen können.

    vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
        console.log(result)
    })
    
  12. Die resultierende Methode sollte etwa wie folgt aussehen:

    app.post("/", function (req, res) {
    
        // Get the details about the PR from the service hook payload
        var repoId = req.body.resource.repository.id
        var pullRequestId = req.body.resource.pullRequestId
        var title = req.body.resource.title
    
        // Build the status object that we want to post.
        // Assume that the PR is ready for review...
        var prStatus = {
            "state": "succeeded",
            "description": "Ready for review",
            "targetUrl": "https://visualstudio.microsoft.com",
            "context": {
                "name": "wip-checker",
                "genre": "continuous-integration"
            }
        }
    
        // Check the title to see if there is "WIP" in the title.
        if (title.includes("WIP")) {
    
            // If so, change the status to pending and change the description.
            prStatus.state = "pending"
            prStatus.description = "Work in progress"
        }
    
        // Post the status to the PR
        vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
            console.log(result)
        })
    
        res.send("Received the POST")
    })
    
  13. Speichern Sie app.js, und starten Sie die Knoten-App neu.

    node app.js
    

Erstellen eines neuen PR zum Testen des Statusservers

Nachdem Ihr Server nun läuft und auf Servicehook-Benachrichtigungen wartet, erstellen Sie eine Pull-Anfrage, um die Funktionalität zu testen.

  1. Beginnen Sie in der Dateiansicht. Bearbeiten Sie die readme.md Datei in Ihrem Repository (oder eine andere Datei, wenn Sie keine readme.md haben).

    Screenshot zeigt die ausgewählte Schaltfläche

  2. Nehmen Sie eine Bearbeitung vor, und committen Sie die Änderungen in das Repository.

    Screenshot zeigt die Bearbeitung der Datei und die ausgewählte Commit-Schaltfläche auf der Symbolleiste.

  3. Stellen Sie sicher, dass Sie die Änderungen in einen neuen Branch committen, damit Sie im nächsten Schritt einen PR erstellen können.

    Der Screenshot zeigt den eingegebenen neuen Branchennamen und die ausgewählte Schaltfläche „Commit“.

  4. Wählen Sie den Link Pull Request erstellen aus.

    Der Screenshot zeigt die ausgewählte Option „Pull Request erstellen“ in der Vorschlagsleiste.

  5. Fügen Sie WIP- im Titel hinzu, um die Funktionalität der App zu testen. Wählen Sie Erstellen aus, um den PR zu erstellen.

    Der Screenshot zeigt, dass der WIP-Eintrag dem standardmäßigen PR-Titel hinzugefügt wurde.

  6. Nachdem der PR erstellt wurde, wird der Statusabschnitt mit dem WIP-Eintrag (In Bearbeitung) angezeigt, der mit der in der Payload angegebenen URL verknüpft ist.

    Screenshot zeigt den Statusabschnitt mit dem Eintrag

  7. Aktualisieren Sie den PR-Titel, und entfernen Sie den WIP--Text, und beachten Sie, dass sich der Status von Arbeit in Bearbeitung in Bereit zur Überprüfungändert.