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

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

Çekme isteği (PR) iş akışı, geliştiricilere hem eşlerden hem de otomatik araçlardan kodları hakkında geri bildirim alma fırsatı sunar. Üçüncü taraf araçlar ve hizmetler, ÇEKME İsteği Durumu API'sini kullanarak çekme isteği iş akışına katılabilir. Bu makale, Azure DevOps Services Git deposundaki ÇEKME'leri doğrulamak için durum sunucusu oluşturma işleminde size yol gösterir. Ç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

Node.js’yi yükleme

Node.js yüklemek için platformunuza uygun LTS sürümünü indirin . İndirme, yerel makinenize Node.js çalışma zamanını yüklemek için çalıştırabileceğiniz bir yükleyici içerir. Node.js yüklerken, yüklemenin varsayılan olarak seçilen npm paket yöneticisi bölümünü tuttuğunuzdan emin olun.

Express kullanarak temel bir web sunucusu oluşturma

Bu bölümdeki adımlarda, web sunucusu oluşturmayı basitleştiren çeşitli HTTP yardımcı programı yöntemleri sağlayan Node.js için basit bir web çerçevesi olan Express kullanılır. Bu çerçeve, çekme isteği olaylarını 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. Komutunu kullanarak npm init proje için yeni package.json bir dosya oluşturun.

    npm init
    

    Giriş noktası dışındaki tüm seçeneklerin varsayılanlarını kabul etmek için Enter tuşuna basın. Bunu app.js olarak değiştirin

    entry point: (index.js) app.js
    
  3. Aşağıdaki komutu kullanarak pr-server dizinine Express'i yükleyin. Bu işlem Express'i yükler ve bağımlılıklar listesine kaydeder.

    npm install express
    
  4. Çekme isteği durum sunucusu için derlemek üzere basit bir Express uygulaması oluşturun. Aşağıdaki adımlar Express Hello dünya örneğini temel alır. Klasöründen aşağıdaki komutu çalıştırarak proje klasörünü VS Code'da pr-server açın.

    code .
    
  5. Yeni bir dosya (Ctrl + N) oluşturun ve 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!')
    })
    
  6. Dosyayı app.js olarak kaydedin.

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

    node app.js
    

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

HTTP POST isteklerini dinleme

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

  1. Dosyanın sonuna app.js 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
    

Çekme isteği olayları için hizmet 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ı ayarlamak isteyeceksiniz, böylece durum sunucusuna bildirilebilir. Birincisi Çekme isteği oluşturulan olayı için, ikincisi çekme isteği güncelleştirilmiş olayı için olacaktır.

Hizmet kancası bildirimlerini almak için bir bağlantı noktasını genel İnternet'te kullanıma sunmanız gerekir. ngrok yardımcı programı, bunu geliştirme ortamında yapmak için çok yararlı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, adresine localhost:3000iletilen bir genel URL oluşturur. Bir sonraki adımda ihtiyaç duyacağınız URL'ye dikkat edin. Şuna benzer olacaktır:

    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. Gezinti menüsünde dişlinin üzerine gelin ve Hizmet Kancaları'nı seçin.

    Yönetici menüsünden Hizmet kancaları'nı seçin

  5. Bu ilk hizmet kancanızsa + Abonelik oluştur'u seçin.

    Araç çubuğundan Yeni abonelik oluştur'u seçin

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

    Yeni bir hizmet kancası aboneliği oluşturmak için yeşil artıyı seçin.

  6. Yeni Hizmet Kancaları Aboneliği iletişim kutusunda, hizmetler listesinden Web Kancaları'nı ve ardından İleri'yi seçin.

    Hizmet listesinden web kancaları seçme

  7. Olay tetikleyicileri listesinden oluşturulan çekme isteği'ni ve ardından İleri'yi seçin.

    Olay tetikleyicileri listesinden oluşturulan çekme isteğini seçin

  8. Eylem sayfasında, URL kutusuna ngrok'tan URL'yi girin. Test'i seçerek sunucunuza bir test olayı gönderin.

    HIZMET kancasını test etmek için URL'yi girin ve Test et'i seçin

    ngrok konsol penceresinde, sunucunuzun hizmet kancası olayını aldığını belirten bir 200 OKgelen POST görürsünüz.

    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 (yani "POST alındı") 17 içerik uzunluğu görmeniz gerekir.

    Testin sonuçlarını görmek için yanıt sekmesini seçin

  9. Hizmet kancasını oluşturmak için Test Bildirimi penceresini kapatın ve Son'u seçin.

3-9 arası adımları yeniden uygulayın, ancak bu kez Çekme isteği güncelleştirilmiş olayını yapılandırın.

Önemli

Önceki adımları iki kez ilerletip hem Çekme isteği oluşturulanhem de Çekme isteği güncelleştirilmiş olayları için hizmet kancaları oluşturduğunuzdan emin olun.

Durumu PR'lere gönderme

Yeni PR'ler oluşturulduğunda sunucunuz hizmet kancası olaylarını alabildiğine göre, bunu pr'ye geri gönderme durumu olarak 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-ayrıştırıcı paketini yükleyin.

    npm install body-parser
    
  2. öğesini ayrıştırma için gövde ayrıştırıcısını kullanacak şekilde güncelleştirin app.jsapplication/json.

    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 kullanacak, hesabınıza bağlantının ayrıntılarını ayarlayıp Git API'sinin bir örneğini alacak şekilde güncelleştirin app.js .

    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. Koleksiyon URL'niz için bir ortam değişkeni oluşturun ve değerini Azure DevOps kuruluşunuzun adıyla değiştirin <your account> .

    setx COLLECTIONURL "https://dev.azure.com/<your account>"
    
  6. Şu yönergeleri izleyerek uygulamanızın kullanması için bir kişisel kimlik doğrulama belirteci (PAT) oluşturun: Kişisel erişim belirteçleriyle kimlik doğrulaması. Hesabınıza erişmek için kullandığınız her hizmet için uygun şekilde adlandırarak yeni bir PAT oluşturmanız gerekir.

  7. PAT'niz için bir ortam değişkeni oluşturun.

    setx TOKEN "yourtokengoeshere"
    
  8. post() hizmet kanca yükünden çekme isteği ayrıntılarını okumak için işlevini güncelleştirin. Durumu geri göndermek için bu değerlere ihtiyacınız olacaktır.

    var repoId = req.body.resource.repository.id
    var pullRequestId = req.body.resource.pullRequestId
    var title = req.body.resource.title
    
  9. Çekme isteğine göndermek için durum nesnesini oluşturun.

    State GitStatusState türünde bir sabit listesidir. Çekme isteğinin durum denetimini geçtiğini ve birleştirmeye hazır olduğunu belirtmek için kullanın succeeded .

    description, Durum bölümünde kullanıcıya ve çekme isteği ayrıntıları görünümünde etkinlik akışında görüntülenecek 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ılacak bir URL'dir. Burası kullanıcıların durum hakkında daha fazla bilgi almak için gidebilecekleri yerdir( örneğin, 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 kategorilere ayırmak ve diğer hizmetlerin deftere nakil durumundan 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"
            }
        }
    
  10. Yalnızca durumu körü körüne succeeded göndermek yerine, kullanıcının başlığa WIP ekleyerek çekme isteğinin devam eden bir iş olup olmadığını belirtip belirtmediğini görmek için çekme isteği başlığını inceleyin. Öyleyse, çekme isteğine geri gönderilen durumu değiştirin.

        if (title.includes("WIP")) {
            prStatus.state = "pending"
            prStatus.description = "Work in progress"
        }
    
  11. Son olarak, yöntemini kullanarak durumu gönderin createPullRequestStatus() . Durum nesnesi, depo kimliği ve çekme isteği kimliği gerekir. Gönderinin sonucunu görebilmek için yanıtı düğüm konsoluna gönderin.

    vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
        console.log(result)
    })
    
  12. Sonuçta elde edilen yöntem şöyle görünmelidir:

    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. Düğüm uygulamanızı kaydedin app.js ve yeniden başlatın.

    node app.js
    

Durum sunucusunu test etmek için yeni bir çekme isteği oluşturma

Sunucunuz çalıştığına ve hizmet kancası bildirimlerini dinlediğini göre, test etmek için bir çekme 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 Düzenle'yi seçin

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

    Dosyayı düzenleyin ve araç çubuğundan İşle'yi seçin

  3. Sonraki adımda çekme isteği oluşturabilmek için değişiklikleri yeni bir dala işlemeyi unutmayın.

    Yeni bir dal adı girin ve İşle'yi seçin

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

    Öneri çubuğundan Çekme isteği oluştur'u seçin

  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.

    WiP'yi varsayılan çekme isteği başlığına ekleme

  6. Çekme isteği oluşturulduktan sonra, yükte belirtilen URL'ye bağlanan Devam ediyor girdisi ile durum bölümünü görürsünüz.

    Devam eden çalışma girdisinin olduğu Durum bölümü.

  7. Çekme isteği başlığını güncelleştirin ve WIP metnini kaldırın ve durumun Çalışma devam ediyor durumundan Gözden geçirılmaya hazır olarak değiştiğine dikkat edin.

Sonraki Adımlar

  • Bu makalede, hizmet kancaları aracılığıyla PR olaylarını dinleyen ve durum API'sini kullanarak durum iletileri gönderebilen bir hizmet oluşturmanın temellerini öğrendiniz. Çekme isteği durum API'si hakkında daha fazla bilgi için REST API belgelerine bakın.
  • Dış hizmet için dal ilkesi yapılandırın.