Sdílet prostřednictvím


Vytvoření serveru stavu žádosti o přijetí změn s Node.js

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

Pracovní postup žádosti na stažení změn (PR) poskytuje vývojářům příležitost získat zpětnou vazbu ke svému kódu od kolegů a z automatizovaných nástrojů. Nástroje a služby jiných společností než Microsoft se mohou účastnit pracovního postupu pull requestů pomocí rozhraní API stavu pull requestů . Tento článek vás provede procesem vytvoření stavového serveru pro ověření žádostí o přijetí změn v úložišti Git služby Azure DevOps Services. Další informace o stavu žádosti o přijetí změn (PR) najdete v části Přizpůsobení a rozšíření pracovních postupů pro žádosti o přijetí změn s ohledem na jejich stav.

Požadavky

  • Organizace v Azure DevOps s úložištěm Git. Pokud nemáte organizaci, zaregistrovat nahrát a sdílet kód v bezplatných privátních úložištích Git.
  • Nainstalujte VS Code nebo jiný editor kódu podle vašeho výběru. Pokyny v této příručce používají VS Code, ale postup v jiných editorech kódu je podobný.

Instalace Node.js

Pokud chcete nainstalovat Node.js, stáhnout verzi LTS, která je vhodná pro vaši platformu. Stažení obsahuje instalační program, který můžete spustit pro instalaci modulu Node.js runtime na místním počítači. Při instalaci Node.jsnezapomeňte zachovat správce balíčků npm část instalace, která je ve výchozím nastavení vybraná.

Vytvoření základního webového serveru pomocí Expressu

Kroky v této části používají Express, což je zjednodušená webová architektura pro Node.js, která poskytuje mnoho metod nástroje HTTP, které zjednodušují vytváření webového serveru. Tento rámec poskytuje základní funkce potřebné k naslouchání událostem pull requestů.

  1. Z příkazového řádku vytvořte novou složku projektu pro webový server.

    mkdir pr-server
    cd pr-server
    
  2. Pomocí příkazu npm init vytvořte pro projekt nový soubor package.json.

    npm init
    

    Výběrem Enter přijměte výchozí hodnoty pro všechny možnosti kromě vstupního bodu. Změnit na app.js

    entry point: (index.js) app.js
    
  3. Nainstalujte Express do adresáře pr-server pomocí následujícího příkazu. Tím se nainstaluje Express a uloží se do seznamu závislostí.

    npm install express
    
  4. Vytvořte aplikaci Express, kterou lze použít pro server kontrolující stav PR. Následující kroky jsou založené na příkladu Hello World. Ve VS Code otevřete složku projektu spuštěním následujícího příkazu ze složky pr-server.

    code .
    
  5. Vytvořte nový soubor (Ctrl + N) a vložte následující ukázkový kód.

    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. Uložte soubor jako app.js.

  7. Spusťte základní webový server pomocí následujícího příkazu:

    node app.js
    

    Ověřte, že je server spuštěný, tak, že přejdete na http://localhost:3000/.

Naslouchání požadavkům HTTP POST

Webový server bude přijímat požadavky POST ze služby Azure DevOps Services, takže tyto požadavky musíte zpracovávat na serveru.

  1. Na konec souboru app.js přidejte následující kód a soubor uložte.

    app.post('/', function (req, res) {
        res.send('Received the POST')
    })
    
  2. Znovu spusťte webový server pomocí následujícího příkazu:

    node app.js
    

Konfigurace webhooku pro události pull requestů

Háky služeb jsou funkce Azure DevOps Services, která může upozornit externí služby, když dojde k určitým událostem. Pro tuto ukázku nastavte dva webové háčky pro PR události, aby byl stavový server informován. První je událost Vytvoření žádosti o přijetí změn a druhá je událost Aktualizace žádosti o přijetí změn.

Pokud chcete dostávat oznámení o háku služby, zveřejňte port pro veřejný internet. Nástroj ngrok je užitečný pro to ve vývojovém prostředí.

  1. Stáhněte a rozbalte příslušnou verzi nástroje ngrok pro vaši platformu.

  2. Pomocí nástroje ngrok začněte naslouchat na stejném portu jako ukázkový server – port 3000. V novém příkazovém okně spusťte následující příkaz.

    ngrok http 3000
    

    Ngrok vytvoří veřejnou adresu URL, která přesměruje na localhost:3000. Poznamenejte si adresu URL, jak ji potřebujete v dalším kroku. Vypadá to jako v následujícím příkladu:

    http://c3c1bffa.ngrok.io
    
  3. Přejděte ke svému projektu v Azure DevOps, například https://dev.azure.com/<your account>/<your project name>

  4. V navigační nabídce najeďte myší na ozubené kolo a vyberte Service Hooks.

    Snímek obrazovky s výběrem háků služby z administrátorského menu.

  5. Pokud se jedná o první háček služby, vyberte + Vytvořit předplatné.

    Snímek obrazovky s vybranou možností Vytvořit nové předplatné z panelu nástrojů

    Pokud už máte nakonfigurované další háky služby, vyberte plus (+) a vytvořte nové předplatné háku služby.

    Snímek obrazovky ukazuje, že jste vybrali plus pro vytvoření nového předplatného hooku služby.

  6. V dialogovém okně nového odběru služeb „Service Hooks“ vyberte Web Hooks ze seznamu služeb a pak vyberte Další.

    Snímek obrazovky zobrazuje vybrané webové hooky ze seznamu služeb.

  7. V seznamu spouštěčů událostí vyberte Žádost o přijetí změn, poté vyberte Další.

    Snímek obrazovky ukazuje vybraný pull request vytvořený ze seznamu spouštěčů událostí.

  8. Na stránce Akce zadejte adresu URL z ngrok do pole adresa URL. Vyberte Test pro odeslání testovací události na server.

    Snímek obrazovky ukazuje zadanou adresu URL a vybraný test pro otestování služebního hooku.

    V okně konzoly ngrok vrátí příchozí POST vrátí 200 OKoznačující, že váš server přijal událost volání služby.

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

    V okně Testovací oznámení vyberte kartu Odpověď a zobrazte podrobnosti odpovědi ze serveru. Měla by se zobrazit délka obsahu 17, která odpovídá délce řetězce z vašeho obslužného programu POST (například "Received the POST").

    Snímek obrazovky zobrazuje vybranou kartu odpovědi pro výsledky testu.

  9. Zavřete okno Testovací oznámení a výběrem Dokončit vytvořte háček služby.

Opakujte kroky 3 až 9, ale tentokrát nakonfigurujte aktualizovanou událost Pull requestu.

Důležitý

Nezapomeňte dvakrát projít předchozí kroky a vytvořit připojení služby jak pro událost vytvoření žádosti o přijetí změn, tak pro událost aktualizaci žádosti o přijetí změn.

Zveřejnění stavu do pull requestů

Teď, když váš server může přijímat události háku služby při vytváření nových žádostí o přijetí změn, aktualizujte ho tak, aby odeslal stav žádosti o přijetí změn zpět.

  1. Žádosti o volání služby zahrnují datovou část JSON popisující událost. Pokud chcete pomoct parsovat JSON vrácený voláním služby, nainstalujte balíček body-parser.

    npm install body-parser
    
  2. Aktualizujte app.js tak, aby pro analýzu application/jsonpoužívali body-parser .

    var bodyParser = require('body-parser')
    
    app.use(bodyParser.json())
    
  3. Pro zjednodušení volání rozhraní REST API do Azure Repos nainstalujte balíček azure-devops-node-api.

    npm install azure-devops-node-api 
    
  4. Aktualizujte app.js tak, aby používal balíček azure-devops-node-api, nastavte podrobnosti o připojení k vašemu účtu a získejte instanci rozhraní Git API.

    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. Vytvořte proměnnou prostředí pro adresu URL kolekce a nahraďte <your account> názvem vaší organizace Azure DevOps.

    setx COLLECTIONURL "https://dev.azure.com/<your account>"
    
  6. Vytvořte osobní ověřovací token (PAT), který bude aplikace používat, podle těchto pokynů: Ověřování pomocí osobních přístupových tokenů (PAT). Měli byste vytvořit nový PAT pro každou službu, kterou používáte pro přístup ke svému účtu, a vhodně jej pojmenovat.

  7. Vytvořte proměnnou prostředí pro váš PAT.

    setx TOKEN "yourtokengoeshere"
    
  8. Aktualizujte funkci post() tak, aby četla podrobnosti žádosti o přijetí změn (pull request) z datové části serverového hooku. Tyto hodnoty potřebujete k odeslání stavu zpět.

    var repoId = req.body.resource.repository.id
    var pullRequestId = req.body.resource.pullRequestId
    var title = req.body.resource.title
    
  9. Sestavte stavový objekt k publikování na PR.

    State je výčet typu GitStatusState . Pomocí succeeded označte, že PR prošel kontrolou stavu a je připraven k sloučení.

    description je řetězcová hodnota, která se uživateli zobrazí v části Stav a kanálu aktivit v zobrazení podrobností PR.

    targetUrl je adresa URL, která slouží k vytvoření odkazu pro popisný text v části Stav a aktivity, kde mohou uživatelé získat další informace o stavu, například sestavení zprávy nebo spuštění testu. Pokud není zadaná žádná adresa URL, zobrazí se popis jako text bez odkazu.

    Uvedené name a genre se používají ke kategorizaci stavu a k odlišení od stavů zveřejněných jinými službami.

        var prStatus = {
            "state": "succeeded",
            "description": "Ready for review",
            "targetUrl": "https://visualstudio.microsoft.com",
            "context": {
                "name": "wip-checker",
                "genre": "continuous-integration"
            }
        }
    
  10. Místo publikování stavu succeeded zkontrolujte název žádosti o přijetí změn, abyste zjistili, jestli uživatel indikuje, jestli žádost o přijetí změn probíhá, přidáním WIP k názvu. Pokud ano, změňte stav zaslaný zpět k pull requestu.

        if (title.includes("WIP")) {
            prStatus.state = "pending"
            prStatus.description = "Work in progress"
        }
    
  11. Nakonec publikujte stav pomocí metody createPullRequestStatus(). Vyžaduje objekt stavu, ID úložiště a ID pull requestu. Vypíše odpověď do konzoly uzlu, abyste viděli výsledek příspěvku.

    vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
        console.log(result)
    })
    
  12. Výsledná metoda by měla vypadat přibližně takto:

    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. Uložte app.js a restartujte aplikaci node.

    node app.js
    

Vytvořte nový PR pro testování stavového serveru

Teď, když je váš server spuštěný a naslouchá oznámení o service hook, vytvořte žádost o přijetí změn, abyste ji otestovali.

  1. Začněte v zobrazení souborů. Upravte readme.md soubor v úložišti (nebo jakýkoli jiný soubor, pokud nemáte readme.md).

    Snímek obrazovky zobrazuje tlačítko Upravit, které bylo vybráno z místní nabídky.

  2. Proveďte úpravy a potvrďte změny v úložišti.

    Snímek obrazovky ukazuje úpravy souboru a vybrané tlačítko Potvrdit z panelu nástrojů.

  3. Nezapomeňte potvrdit změny do nové větve, abyste mohli v dalším kroku vytvořit pull request.

    Snímek obrazovky ukazuje zadaný název nové větve a vybrané tlačítko Potvrzení.

  4. Vyberte odkaz Vytvořit žádost o přijetí změn.

    Snímek obrazovky ukazuje vybranou možnost 'Create a pull request' z panelu návrhů.

  5. Přidejte do názvu WIP a otestujte funkčnost aplikace. Vyberte Vytvořit a vytvořte PR.

    Screenshot ukazuje přidání WIP do výchozího názvu pull requestu.

  6. Jakmile je vytvořen pull request, část stavu zobrazuje záznam Práce ve vývoji, který odkazuje na URL uvedenou v payload.

    Snímek obrazovky ukazuje oddíl stavu s položkou Probíhá práce.

  7. Aktualizujte název PR a odeberte text WIP a všimněte si, že se stav mění z Práce na dokončení na Připraveno k recenzi.