Node.js 사용하여 끌어오기 요청 상태 서버 만들기

아티클
03/25/2024

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

PR(끌어오기 요청) 워크플로는 개발자에게 피어 및 자동화된 도구에서 코드에 대한 피드백을 얻을 수 있는 기회를 제공합니다. 타사 도구 및 서비스는 PR 상태 API를 사용하여 PR 워크플로에 참여할 수 있습니다. 이 문서에서는 Azure DevOps Services Git 리포지토리에서 PR의 유효성을 검사하는 상태 서버를 만드는 프로세스를 안내합니다. PR 상태 대한 자세한 내용은 끌어오기 요청 상태 사용하여 끌어오기 요청 워크플로 사용자 지정 및 확장을 참조하세요.

필수 조건

Git 리포지토리를 사용하는 Azure DevOps의 조직입니다. 조직이 없는 경우 등록하여 무제한 프라이빗 Git 리포지토리에서 코드를 업로드하고 공유합니다.
VS Code 또는 원하는 다른 코드 편집기를 설치합니다. 이 가이드의 지침은 VS Code를 사용하지만 다른 코드 편집기 단계는 비슷합니다.

Node.js 설치

Node.js 설치하려면 플랫폼에 적합한 LTS 릴리스를 다운로드 합니다. 다운로드에는 로컬 컴퓨터에 Node.js 런타임을 설치하기 위해 실행할 수 있는 설치 관리자가 포함되어 있습니다. Node.js 설치할 때는 기본적으로 선택된 설치의 npm 패키지 관리자 부분을 유지해야 합니다.

Express를 사용하여 기본 웹 서버 만들기

이 섹션의 단계에서는 웹 서버 만들기를 간소화하는 여러 HTTP 유틸리티 메서드를 제공하는 Node.js 간단한 웹 프레임워크인 Express를 사용합니다. 이 프레임워크는 PR 이벤트를 수신 대기하는 데 필요한 기본 함수를 제공합니다.

명령줄에서 웹 서버에 대한 새 프로젝트 폴더를 만듭니다.
```
mkdir pr-server
cd pr-server
```
명령을 npm init 사용하여 프로젝트에 대한 새 package.json 파일을 만듭니다.
```
npm init
```
Enter 키를 눌러 진입점을 제외한 모든 옵션의 기본값을 적용합니다. 다음으로 변경 app.js
```
entry point: (index.js) app.js
```
다음 명령을 사용하여 pr-server 디렉터리에 Express를 설치합니다. 그러면 Express가 설치되고 종속성 목록에 저장됩니다.
```
npm install express
```
PR 상태 서버에 대해 빌드할 간단한 Express 앱을 만듭니다. 다음 단계는 Express Hello 월드 예제를 기반으로 합니다. 폴더에서 다음 명령을 실행하여 VS Code에서 프로젝트 폴더를 pr-server 엽니다.
```
code .
```

새 파일을 (Ctrl + 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!')
})

파일을 app.js로 저장합니다.
다음 명령을 사용하여 기본 웹 서버를 실행합니다.
```
node app.js
```
으로 이동하여 서버가 실행 중인지 확인합니다 http://localhost:3000/.

HTTP POST 요청 수신 대기

웹 서버는 Azure DevOps Services에서 요청을 수신 POST 하므로 서버에서 해당 요청을 처리해야 합니다.

파일의 app.js 끝에 다음 코드를 추가하고 파일을 저장합니다.
```
app.post('/', function (req, res) {
    res.send('Received the POST')
})
```
다음 명령을 사용하여 웹 서버를 다시 실행합니다.
```
node app.js
```

PR 이벤트에 대한 서비스 후크 구성

서비스 후크는 특정 이벤트가 발생할 때 외부 서비스에 경고할 수 있는 Azure DevOps Services 기능입니다. 이 샘플에서는 PR 이벤트에 대해 두 개의 서비스 후크를 설정하여 상태 서버에 알림을 받을 수 있도록 합니다. 첫 번째는 끌어오기 요청 생성 이벤트에 대한 것이고, 두 번째는 끌어오기 요청 업데이트 이벤트에 대한 것입니다.

서비스 후크 알림을 받으려면 공용 인터넷에 포트를 노출해야 합니다. ngrok 유틸리티는 개발 환경에서 이 작업을 수행하는 데 매우 유용합니다.

플랫폼에 적합한 ngrok 릴리스를 다운로드 하고 압축을 풉
ngrok를 사용하여 샘플 서버와 동일한 포트인 포트 3000에서 수신 대기를 시작합니다. 새 명령 창에서 다음 명령을 실행합니다.
```
ngrok http 3000
```
Ngrok는 전달되는 공용 URL을 만듭니다 localhost:3000. URL은 다음 단계에서 필요합니다. 다음과 비슷하게 표시됩니다.
```
http://c3c1bffa.ngrok.io
```
예를 들어 Azure DevOps에서 프로젝트로 이동합니다. https://dev.azure.com/<your account>/<your project name>
탐색 메뉴에서 기어를 마우스로 가리키고 서비스 후크를 선택합니다.
첫 번째 서비스 후크인 경우 + 구독 만들기를 선택합니다.

다른 서비스 후크를 이미 구성한 경우 녹색 더 (+) 하기 를 선택하여 새 서비스 후크 구독을 만듭니다.
새 서비스 후크 구독 대화 상자의 서비스 목록에서 웹 후크를 선택한 다음, 다음을 선택합니다.
이벤트 트리거 목록에서 만든 끌어오기 요청을 선택한 다음, 다음을 선택합니다.
작업 페이지의 URL 상자에 ngrok의 URL을 입력합니다. 테스트를 선택하여 서버에 테스트 이벤트를 보냅니다.

ngrok 콘솔 창에 서버가 서비스 후크 이벤트를 수신했음을 나타내는 들어오는 POST 200 OK항목이 표시됩니다.
```
HTTP Requests
-------------

POST /                         200 OK
```
테스트 알림 창에서 응답 탭을 선택하여 서버의 응답 세부 정보를 확인합니다. POST 처리기(예: "POST 수신됨")의 문자열 길이와 일치하는 콘텐츠 길이가 17이어야 합니다.
테스트 알림 창을 닫고 마침을 선택하여 서비스 후크를 만듭니다.

3-9단계를 다시 진행하지만 이번에는 끌어오기 요청 업데이트 이벤트를 구성합니다.

Important

이전 단계를 두 번 진행하여 끌어오기 요청 생성 및 끌어오기 요청 업데이트 이벤트 모두에 대한 서비스 후크를 만들어야 합니다.

PR에 상태 게시

이제 서버가 새 PR을 만들 때 서비스 후크 이벤트를 수신할 수 있으므로 PR에 상태 게시하도록 업데이트합니다.

서비스 후크 요청에는 이벤트를 설명하는 JSON 페이로드가 포함됩니다. 서비스 후크에서 반환된 JSON을 구문 분석하는 데 도움이 되도록 본문 파서 패키지를 설치합니다.
```
npm install body-parser
```
app.js 구문 분석에 본문 파서 사용을 업데이트합니다application/json.
```
var bodyParser = require('body-parser')

app.use(bodyParser.json())
```
Azure Repos에 대한 REST API 호출을 간소화하려면 azure-devops-node-api 패키지를 설치합니다.
```
npm install azure-devops-node-api 
```

azure-devops-node-api 패키지를 사용하도록 업데이트 app.js 하고, 계정에 대한 연결에 대한 세부 정보를 설정하고, 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);
    } 
);

컬렉션 URL에 대한 환경 변수를 만들고 Azure DevOps 조직의 이름으로 바꿉 <your account> 니다.
```
setx COLLECTIONURL "https://dev.azure.com/<your account>"
```
앱에서 사용할 PAT(개인 인증 토큰)를 만듭니다. 다음 지침에 따라 개인 액세스 토큰으로 인증합니다. 계정에 액세스하는 데 사용하는 모든 서비스에 대해 새 PAT를 만들어 적절하게 이름을 지정해야 합니다.
PAT에 대한 환경 변수를 만듭니다.
```
setx TOKEN "yourtokengoeshere"
```
post() 서비스 후크 페이로드에서 PR 세부 정보를 읽도록 함수를 업데이트합니다. 상태 게시하려면 이러한 값이 필요합니다.
```
var repoId = req.body.resource.repository.id
var pullRequestId = req.body.resource.pullRequestId
var title = req.body.resource.title
```
PR에 게시할 상태 개체를 빌드합니다.

State 는 GitStatusState 형식의 열거형 입니다. PR이 상태 검사 통과하고 병합할 준비가 되었음을 나타내는 데 사용합니다succeeded.

이 값은 description 상태 섹션의 사용자에게 표시되고 PR 세부 정보 보기의 활동 피드에 표시되는 문자열 값입니다.

상태 targetUrl 섹션 및 활동 피드에서 설명 텍스트에 대한 링크를 만드는 데 사용되는 URL입니다. 사용자가 빌드 보고서 또는 테스트 실행과 같은 상태 대한 자세한 정보를 얻을 수 있는 곳입니다. URL을 지정하지 않으면 설명이 링크가 없는 텍스트로 표시됩니다.

컨텍스트 name 이며 genre 상태 분류하고 상태 게시하는 다른 서비스와 구분하는 데 사용됩니다.
```
    var prStatus = {
        "state": "succeeded",
        "description": "Ready for review",
        "targetUrl": "https://visualstudio.microsoft.com",
        "context": {
            "name": "wip-checker",
            "genre": "continuous-integration"
        }
    }
```
상태 맹목적으로 게시 succeeded 하는 대신 PR 제목을 검사하여 사용자가 타이틀에 WIP를 추가하여 PR이 진행 중인 작업인지 여부를 확인합니다. 그렇다면 PR에 다시 게시된 상태 변경합니다.
```
    if (title.includes("WIP")) {
        prStatus.state = "pending"
        prStatus.description = "Work in progress"
    }
```
마지막으로 메서드를 사용하여 상태 게시합니다createPullRequestStatus(). 상태 개체, 리포지토리 ID 및 끌어오기 요청 ID가 필요합니다. 게시 결과를 볼 수 있도록 노드 콘솔에 응답을 출력합니다.
```
vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
    console.log(result)
})
```

결과 메서드는 다음과 같이 표시됩니다.

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")
})

노드 앱을 저장 app.js 하고 다시 시작합니다.
```
node app.js
```

상태 서버를 테스트하는 새 PR 만들기

서버가 실행 중이고 서비스 후크 알림을 수신 대기했으므로 끌어오기 요청을 만들어 테스트합니다.

파일 보기에서 시작합니다. 리포지토리에서 readme.md 파일을 편집합니다(또는 readme.md 없는 경우 다른 파일).
편집하고 변경 내용을 리포지토리에 커밋합니다.
다음 단계에서 PR을 만들 수 있도록 변경 내용을 새 분기에 커밋해야 합니다.
끌어오기 요청 만들기 링크를 선택합니다.
타이틀에 WIP를 추가하여 앱의 기능을 테스트합니다. 만들기를 선택하여 PR을 만듭니다.
PR이 만들어지면 페이로드에 지정된 URL에 연결되는 진행 중인 작업 항목과 함께 상태 섹션이 표시됩니다.
PR 제목을 업데이트하고 WIP 텍스트를 제거하고 상태 진행 중인 작업에서 검토 준비로 변경됩니다.

다음 단계

이 문서에서는 서비스 후크를 통해 PR 이벤트를 수신 대기하고 상태 API를 사용하여 상태 메시지를 게시할 수 있는 서비스를 만드는 방법에 대한 기본 사항을 알아보았습니다. 끌어오기 요청 상태 API에 대한 자세한 내용은 REST API 설명서를 참조하세요.
외부 서비스에 대한 분기 정책을 구성합니다.

다음을 통해 공유