Aracılığıyla paylaş

Node.js ile bir çekme isteği durum sunucusu oluşturun

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

Çekme isteği (PR) iş akışı, yazılımcılara meslektaşlarından ve otomatik araçlardan kodları hakkında geri bildirim alma fırsatı sunar. Microsoft dışı araçlar ve hizmetler, PR Durum API'sinikullanarak PR iş akışına katılabilir. Bu makale, Azure DevOps Services Git deposundaki değişiklik isteklerini doğrulamak için bir durum sunucusu oluşturma sürecinde size rehberlik eder. Çekme isteği durumu hakkında daha fazla bilgi için bkz. Çekme isteği durumuyla çekme isteği iş akışlarını özelleştirme ve genişletme.

Önkoşullar

Kategori Gereksinimler
Kuruluş Azure DevOps'ta git deposuna sahip bir kuruluş.
Araçlar - Visual Studio Code veya seçtiğiniz diğer kod düzenleyicisini.
- Node.js. İndirme, Node.js çalışma zamanını yerel makinenize yüklemek için çalıştırabileceğiniz bir yükleyici içerir. Node.js yüklerken, yüklemenin varsayılan olarak seçili gelen npm paket yöneticisi kısmını tutmayı unutmayın.
Kimlik Doğrulaması Çekme isteği durumunu değiştirme iznine sahip olmak için Kod (durum) kapsamına sahip Microsoft Entra ID belirteci. Daha fazla bilgi için bkz . Microsoft Entra kimlik doğrulaması.

Express kullanarak temel bir web sunucusu oluşturma

Bu bölümdeki adımlar, web sunucusu oluşturmayı basitleştiren birçok HTTP yardımcı programı yöntemi sağlayan Node.js için basit bir web çerçevesi olan Expresskullanır. Bu çerçeve, PR etkinliklerini dinlemek için gereken temel işlevleri sağlar.

  1. Komut satırından web sunucunuz için yeni bir proje klasörü oluşturun.

    mkdir pr-server
cd pr-server

  2. Proje için yeni bir npm init dosyası oluşturmak için package.json komutunu kullanın.

    npm init

    Giriş noktası dışındaki tüm seçeneklerin varsayılanlarını kabul etmek için seçin ve ile giriş yapın. app.js olarak değiştirin

    entry point: (index.js) app.js

  3. Aşağıdaki komutu kullanarak Express'i pr-server dizinine yükleyin. Bu işlem Express'i yükler ve bağımlılıklar listesine kaydeder.

    npm install express

  4. PR durum sunucusu için bir Express uygulaması oluşturun. Aşağıdaki adımlar, Express Merhaba dünya örneği'ni temel alır.

    a. Klasörden aşağıdaki komutu pr-server çalıştırarak Visual Studio Code'da proje klasörünü açın.

    code .

    b. Yeni bir dosya (Ctrl + N) oluşturun ve temel bir Express sunucusu oluşturmak için aşağıdaki örnek kodu yapıştırın.

    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!')
})

    ç. Dosyayı app.jsolarak kaydedin.

  5. Aşağıdaki komutu kullanarak temel web sunucusunu çalıştırın:

    node app.js

    http://localhost:3000/'e göz atarak sunucunun çalıştığını doğrulayın.

HTTP POST isteklerini dinleme

Web sunucusu Azure DevOps Services'dan POST istekleri alır, bu nedenle bu istekleri sunucunuzda işlemeniz gerekir.

  1. app.js dosyasının sonuna aşağıdaki kodu ekleyin ve dosyayı kaydedin.

    app.post('/', function (req, res) {
    res.send('Received the POST')
})

  2. Aşağıdaki komutu kullanarak web sunucunuzu yeniden çalıştırın:

    node app.js

PR olayları için servis kancası yapılandırma

Hizmet kancaları, belirli olaylar gerçekleştiğinde dış hizmetleri uyarabilen bir Azure DevOps Services özelliğidir. Bu örnek için PR olayları için iki hizmet kancası ayarlayın, böylece durum sunucusuna bildirim gönderilebilir. Birincisi, numaralı Çekme isteği oluşturulan olayı için ve ikincisi, numaralı Çekme isteği güncellenmiş olayı içindir.

Hizmet kancası bildirimlerini almak için bir bağlantı noktasını açık internette erişilebilir hale getirin. ngrok yardımcı programı, geliştirme ortamında bunu yapmak için kullanışlıdır.

  1. Platformunuz için uygun ngrok sürümünü indirin ve sıkıştırmasını açın.

  2. Örnek sunucunuzla aynı bağlantı noktasında dinlemeye başlamak için ngrok kullanın - bağlantı noktası 3000. Aşağıdaki komutu yeni bir komut penceresinde çalıştırın.

    ngrok http 3000

    Ngrok, localhost:3000adresine yönlendiren bir genel URL oluşturur. Bir sonraki adımda ihtiyacınız olduğu gibi URL'yi not edin. Aşağıdaki örneğe benzer:

    http://c3c1bffa.ngrok.io

  3. Azure DevOps'ta projenize göz atın, örneğin https://dev.azure.com/<your account>/<your project name>

  4. Navigasyon menüsünden dişli simgesi üzerine gelin ve Hizmet Kancalarıseçeneğini seçin.

    Ekran görüntüsü, yönetici menüsünden Hizmet bağlantılarını seçmeyi gösteriyor.

  5. İlk hizmet kancanızsa + Abonelik oluşturöğesini seçin.

    Araç çubuğundan seçilen Yeni abonelik oluştur seçeneğini gösteren ekran görüntüsü.

    Yapılandırılmış başka hizmet kancalarınız varsa, yeni bir hizmet kancası aboneliği oluşturmak için artı (+) seçin.

    Yeni bir hizmet kancası aboneliği oluşturmak üzere artı simgesinin seçildiğini gösteren ekran görüntüsü.

  6. Yeni Hizmet Kancaları Aboneliği iletişim kutusunda, hizmetler listesinden Web Kancaları'nı seçin ve daha sonra Sonraki'ni seçin.

    Hizmetler listesinden seçilen web kancalarını gösteren ekran görüntüsü.

  7. Olay tetikleyicileri listesinden oluşturulan çekme isteğini seçin, ardından 'e İleri'yi seçin.

    Olay tetikleyicileri listesinden oluşturulan seçili çekme isteğini gösteren ekran görüntüsü.

  8. Eylem sayfasında, URL kutusuna ngrok url'sini girin. Sunucunuza test olayı göndermek için test seçin.

    Girilen URL'yi ve hizmet kancasını test etmek için seçilen testi gösteren ekran görüntüsü.

    Ngrok konsol penceresinde, içeri gelen bir POST, sunucunuzun hizmet kancası olayını aldığını belirten bir 200 OK olarak görüntülenir.

    HTTP Requests
-------------

POST /                         200 OK

    Test Bildirimi penceresinde Yanıt sekmesini seçerek sunucunuzdan gelen yanıtın ayrıntılarını görüntüleyin. POST işleyicinizdeki dizenin uzunluğuyla eşleşen 17 karakter uzunluğunda bir içerik görmelisiniz (örneğin, "POST alındı").

    Testin sonuçları için seçilen yanıt sekmesini gösteren ekran görüntüsü.

  9. Test Bildirimi penceresini kapatın ve hizmet kancasını oluşturmak için Son seçeneğini seçin.

3'ten 9'a kadar olan adımları tekrar geçin, ancak bu kez Çekme isteği güncelleştirildi olayını yapılandırın.

Önemli

Önceki adımları iki kez uyguladığınızdan ve hem Çekme isteği oluşturuldu hem de Çekme isteği güncellendi olayları için hizmet kancaları oluşturduğunuzdan emin olun.

PR'lere durumu yayınla

Yeni PR'ler oluşturulduğunda sunucunuz servis kancası olaylarını alabildiğine göre, PR'ye durum bildirimini geri gönder olacak şekilde bunu güncelleştirin.

  1. Hizmet kancası istekleri, olayı açıklayan bir JSON yükü içerir. Hizmet kancası tarafından döndürülen JSON'u ayrıştırmaya yardımcı olmak için body-parser paketini yükleyin.

    npm install body-parser

  2. app.js'ı application/json'i ayrıştırmak için body-parser kullanarak güncelleyin.

    var bodyParser = require('body-parser')

app.use(bodyParser.json())

  3. Azure Repos'a REST API çağrıları yapmayı kolaylaştırmak için azure-devops-node-api paketini yükleyin.

    npm install azure-devops-node-api

  4. azure-devops-node-api paketini kullanmak, hesabınızla bağlantının ayrıntılarını ayarlamak ve Git API'sinin bir örneğini almak için app.js güncelleştirin.

    const vsts = require("azure-devops-node-api")

const collectionURL = process.env.COLLECTIONURL    
const token = process.env.TOKEN

var authHandler = vsts.getBearerHandler(token)
var connection = new vsts.WebApi(collectionURL, authHandler)
var vstsGit = connection.getGitApi()

  5. koleksiyon URL'niz için bir ortam değişkeni oluşturun ve <your account> yerine Azure DevOps kuruluşunuzun adını yazın.

    setx COLLECTIONURL "https://dev.azure.com/<your account>"

  6. Microsoft Entra ID belirteci alarak uygulamanızda kullanın. Microsoft Entra Id belirteçleri, Azure DevOps REST API'leri için önerilen kimlik doğrulama yöntemidir. Bu belirteçleri aşağıdaki yollarla alabilirsiniz:

    • 1. Seçenek: Azure CLI (geliştirme/test için) 
      az account get-access-token --resource 499b84ac-1321-427f-aa17-267ca6975798 --query "accessToken" --output tsv
    • Seçenek 2: Hizmet Sorumlusu (üretim için)
      1. Microsoft Entra ID'de bir uygulama kaydetme
      2. Uygulama için istemci sırrı oluşturma
      3. Azure DevOps'ta uygulamaya uygun izinleri verme
      4. Belirteçleri program aracılığıyla almak için hizmet sorumlusu kimlik bilgilerini kullanın

    Daha fazla bilgi için bkz . Microsoft Entra kimlik doğrulaması.

  7. Microsoft Entra ID belirteciniz için bir ortam değişkeni oluşturun.

    setx TOKEN "your-entra-id-token-here"

Üretim uygulamaları için, statik belirteçler kullanmak yerine program aracılığıyla Microsoft Entra ID belirteçlerini edinmeniz gerekir. Node.jsiçin Microsoft Kimlik Doğrulama Kitaplığı 'nı (MSAL) kullanarak bunu şu şekilde uygulayacaksınız:

  1. MSAL Node paketini yükleyin:

    npm install @azure/msal-node

  2. Belirteç sağlayıcısı modülü oluşturma (tokenProvider.js):

    const { ConfidentialClientApplication } = require('@azure/msal-node');

const clientConfig = {
    auth: {
        clientId: process.env.CLIENT_ID,
        clientSecret: process.env.CLIENT_SECRET,
        authority: `https://login.microsoftonline.com/${process.env.TENANT_ID}`
    }
};

const cca = new ConfidentialClientApplication(clientConfig);

async function getAccessToken() {
    const clientCredentialRequest = {
        scopes: ['499b84ac-1321-427f-aa17-267ca6975798/.default']
    };

    try {
        const response = await cca.acquireTokenByClientCredential(clientCredentialRequest);
        return response.accessToken;
    } catch (error) {
        console.error('Error acquiring token:', error);
        throw error;
    }
}

module.exports = { getAccessToken };

  3. Belirtecinizi app.js belirteç sağlayıcısını kullanacak şekilde güncelleştirin:

    const { getAccessToken } = require('./tokenProvider');

// Instead of using a static token, get a fresh token
app.post("/", async function (req, res) {
    try {
        const token = await getAccessToken();
        var authHandler = vsts.getBearerHandler(token);
        var connection = new vsts.WebApi(collectionURL, authHandler);

        // ... rest of your POST handler code
    } catch (error) {
        console.error('Authentication error:', error);
        res.status(500).send('Authentication failed');
    }
});

  4. Çekme isteği ayrıntılarını web kancası yükünden okumak için post() işlevini güncelleyin. Durumu geri göndermek için bu değerlere ihtiyacınız var.

    var repoId = req.body.resource.repository.id
var pullRequestId = req.body.resource.pullRequestId
var title = req.body.resource.title

  5. PR'ye göndermek için durum nesnesini oluşturun.

    State, GitStatusState türünde bir sabit listesidir. PR'nin durum kontrolünü geçtiğini ve birleştirmeye hazır olduğunu belirtmek için succeeded kullanın.

    description, Durum bölümünde ve çekme isteği ayrıntıları görünümünde etkinlik akışında kullanıcıya görüntülenen bir dize değeridir.

    targetUrl, Durum bölümünde ve etkinlik akışında açıklama metni için bağlantı oluşturmak için kullanılan bir URL'dir. Bu url, kullanıcıların durum hakkında daha fazla bilgi almak için gidebileceği yerdir( örneğin, bir derleme raporu veya test çalıştırması). URL belirtilmezse, açıklama bağlantısız metin olarak görünür.

    Bağlam name ve genre, durumu kategorize etmek ve diğer hizmetlerin durum paylaşımlarından ayırmak için kullanılır.

        var prStatus = {
        "state": "succeeded",
        "description": "Ready for review",
        "targetUrl": "https://visualstudio.microsoft.com",
        "context": {
            "name": "wip-checker",
            "genre": "continuous-integration"
        }
    }

  6. succeeded durumunu hemen göndermek yerine, çekme isteği (PR) başlığını inceleyin. Kullanıcının, başlığa WIP ekleyerek çekme isteğinin devam eden bir iş olup olmadığını belirtip belirtmediğini kontrol edin. Öyleyse, PR'ye geri gönderilmiş durumu değiştirin.

        if (title.includes("WIP")) {
        prStatus.state = "pending"
        prStatus.description = "Work in progress"
    }

  7. Son olarak, createPullRequestStatus() yöntemini kullanarak durumu gönderin. Durum nesnesi, depo kimliği ve çekme isteği kimliği gereklidir. Gönderinin sonucunu görebilmek için yanıtı düğüm konsoluna gönderin.

    vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
    console.log(result)
})

  8. Sonuçta elde edilen yöntem şöyle görünmelidir:

    app.post("/", async function (req, res) {
    try {
        // 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"
        }

        // Get the Git API instance and post the status to the PR
        const gitApi = await vstsGit
        const result = await gitApi.createPullRequestStatus(prStatus, repoId, pullRequestId)
        console.log(result)

        res.send("Received the POST")
    } catch (error) {
        console.error('Error processing PR status:', error)
        res.status(500).send('Error processing request')
    }
})

  9. app.js kaydedin ve düğüm uygulamanızı yeniden başlatın.

    node app.js

Durum sunucusunu test etmek için yeni bir pull request oluştur.

Sunucunuz çalıştığına ve hizmet kancası bildirimlerini dinlediğine göre, test etmek için bir pull isteği oluşturun.

  1. Dosyalar görünümünden başlayın. Deponuzdaki readme.md dosyasını (veya readme.md yoksa başka bir dosyayı) düzenleyin.

    Bağlam menüsünden seçili Düzenle düğmesini gösteren ekran görüntüsü.

  2. Düzenleme yapın ve değişiklikleri depoya işleyin.

    Araç çubuğundan dosyayı ve seçili İşleme düğmesini düzenlemeyi gösteren ekran görüntüsü.

  3. Değişiklikleri yeni bir dala işlediğinizden emin olun ki sonraki adımda bir çekme isteği (PR) oluşturabilirsiniz.

    Ekran görüntüsünde yeni dal adı girilmiş ve seçilmiş İşleme düğmesi gösterilmektedir.

  4. Çekme isteği oluştur bağlantısını seçin.

    Öneri panelinden

  5. Uygulamanın işlevselliğini test etmek için başlığa WIP ekleyin. Çekme isteğini oluşturmak için Oluştur'u seçin.

    Varsayılan çekme isteği başlığına eklenen WIP'yi gösteren ekran görüntüsü.

  6. Çekme isteği oluşturulduğunda, durum bölümünde yükte belirtilen URL'ye bağlanan Çalışma devam ediyor girdisi gösterilir.

    Devam eden çalışma girdisinin olduğu durum bölümünü gösteren ekran görüntüsü.

  7. Çekme isteği başlığını güncelleyin ve WIP metnini kaldırın ve "Devam eden çalışma" durumunun "İnceleme için hazır"olarak değiştiğine dikkat edin.

  • Last updated on