44. Azure 보드와 GitHub 통합

<참조> https://azuredevopslabs.com/labs/vstsextend/github-azureboards/

 

 

 

 

 

 

 

Azure 보드는 칸반 보드, 백로그, 팀 대시보드, 그리고 커스텀 리포팅 등을 포괄하는 풍부한 프로젝트 관리 기능을 제공한다. Azure DevOps를 GitHub 리포지토리와 연결하여 팀은 풍부한 프로젝트 관리 능력을 활용할 수 있다. GitHub 커밋과 풀 요청 사이에 링크를 만들어 Azure 보드에서 추적된 항목으로 작업할 수 있다. 이를 통해 작업을 계획하고 추적하기 위해 Azure 보드를 사용하면서 원활한 방법으로 소프트웨어 개발에 GitHub를 사용할 수 있도록 해준다.

 

이번 랩에서는 GitHub와 함께  Azure 보드를 설정하는 것이 얼마나 쉬운지 그리고 작업 항목에서 코드 변경, 커밋 빌드 및 릴리즈 까지 엔드 투 엔드 추적성을 어떻게 이룰 수 있는지 살펴보게 될 것이다.

 

 

 

 

 

전제 조건

이 랩을 위해서는 다음 항목이 요구된다.

• Azure 파이프라인과 함께 GitHub 통합 랩

 

실습 1:  Azure DevOps로 GitHub 프로젝트 관리하기

 

과제 1: GitHub를 Azure 보드와 연결하기

1. 웹앱 탭으로 돌아가 Login을 클릭한다.

 

 

2. 임의의 이메일과 패스워드로 로그인한다.

 

 

3, Book을 클릭한다.

 

 

4. 공항 드롭다운이 펼쳐지면 도시별로 알파벳순 정렬되지 않은 것에 주의한다.

 

우리의 시나리오에서는 도시별 공항 리스트의 정렬 순서를 바꾸고 싶다고 가정해보자. 예약 양식에 나열된 공항들을 도시별로 알파벳 순으로 정렬하기 위해 새로운 유저 스토리를 만들 것이다. 보통, 우리는 더 높은 수준에서 유저 스토리를 만들고 어떻게 스토리가 구현되는지를 정의하기 위한 태스크를 추가하지만, 여기에서 우리의 데모 목적을 위해 그것을 하나의 작업 항목으로 남겨둘 것이다.

 

 

 

5. Azure DevOps 탭으로  돌아간다. 

 

6. Boards | Backlogs. 로 이동한다.

Boards 네비게이트가 보이지 않을 경우 Project settings 으로 이동하여 Azure Boards 를 활성화 한다.

 

 

 

7. New Work Item을 클릭하고 User can select airport by city라는 제목으로 사용자 스토리를 추가한다. 작성하려면 Enter를 누른다.

 

 

8. View as board를 클릭한다.

 

 

9. 새로 만든 사용자 스토리를 Active 컬럼으로 끈다.

 

 

10. 사용자 스토리를 Active 컬럼에 놓으면 사용자에게 할당되고 해당 status가 Active로 설정된다. 나중에 커밋 및 풀 요청 중에 참조할 수 있도록 작업 ID를 기록해둔다. (혹시 컬럼이 To Do, Doing, Done으로 되어 있다면 프로젝트 프로세스가 Basic으로 되어있어 때문이므로 그냥 Doing으로 이동시키면 된다.)

통합을 완료하려면 이 프로젝트와 GitHub 리포지토리 간의 연결을 연결해야 한다.

 

 

과제 2: GitHub용 Azure 보드 앱 구성

이제 GitHub 리포지토리 연결의 설치 프로세스 및 구성을 단순화하는 GitHub 마켓플레이스에서 Azure Board를 사용할 수 있다. 

1. 이를 설치하려면 GitHub의 Azure Boards 페이지로 이동한다.

 

2. Set up a plan을 선택한다.

 

 

3. Azure 보드는 시작할 수 있는 무료 라이선스(개인용으로 처음 5명의 사용자 및 공용 리포지토리의 경우 더 많은 사용자)를 제공한다. Install it for free를 선택한다.

 

 

4. Complete the order and begin installation 버튼을 선택하여 설치를 시작한다. 

 

5. Azure 보드(또는 모든 리포지토리)에 연결하려는 리포지토리를 선택하고 Install & Authorize를 클릭한다.

 

 

6. GitHub.com에 연결하려는 Azure DevOps 조직 및 Azure Boards 프로젝트를 선택한다.

한 번에 하나의 프로젝트만 연결할 수 있다. 연결하려는 다른 프로젝트가 있는 경우 나중에 추가 프로젝트 또는 저장소 구성에 설명 된대로 이를 수행 할 수 있다.

 

 

 

7. 모든 리포지토리를 선택한 경우 통합을 완료하기 위해 Azure Boards 프로젝트와 함께 사용할 GitHub 리포지토리를 확인해야 한다. 

 

 

과제 3: 태스크 완성을 위해 커밋하기

1. Visual Studio Code로 돌아간다.

이 작업을 위한 새 브랜치를 만드는 것으로 시작하겠다. 작업 자체는 매우 간단하다. 사용자 환경에 공항이 제공되는 장소를 찾고 도시 이름별로 정렬되어 있는지 확인하기 만하면 된다.

 

 

2. 창 하단에 있는 master 브랜치를 클릭한다.

 

 

3. 화면 상단에서 Create new branch를 클릭한다.

 

 

4. "airport-sorting"이름을 입력하고 Enter를 누른다. 그러면 새 브랜치가 활성화된다.

 

 

5. Explorer 탭에서 src/services/airports.service.js를 연다.

 

 

6. getAll 함수를 찾고 기존 코드를 아래 코드로 바꾼다. 도시별로 공항이 정렬된다.

getAll(){
        return this._airports.filter(a => a.code).map(avoidEmptyCity).sort((a, b) => (a.city > b.city) ? 1 : -1);
    }

 

 

7. Ctrl+S 를 눌러 파일을 저장한다.

앞서 살펴본 Azure 보드 태스크에 연결하는 특수 구문이 포함된 주석을 사용하여 커밋한다. 이제 "Fixes AB # ID"라는 문구를 포함하기만 하면 이 커밋은 프로젝트 관리에서 추적 할 수 있게 될 것이다.

 

 

8. Source Control 탭으로 전환하고 “Changes airport sorting. Fixes AB#1689.” 커밋 메시지를 입력한다. 그러나 1689을 (각자의) Azure 보드 태스크의 실제 ID로 바꾼다. Ctrl + Enter를 누르고 메시지가 나타나면 커밋을 확인한다.

AB# 언급을 사용하여 GitHub에서 Azure 보드 작업 항목으로 연결하는 방법에 대한 자세한 내용은 여기를 참조한다.

 

 

 

9. 화면 하단의 Publish Changes 버튼을 클릭한다.

 

 

10. 푸시가 완료되면 GitHub 브라우저 탭으로 돌아간다. 

커밋이 푸시되면 해당 변경 사항을 마스터 브랜치로 되돌리는 풀 요청을 생성한다. 이 경우 커밋에서 제목을 상속하지만 풀 요청에 "Fixes AB#ID"를 언급하면 ​​풀 요청이 병합 될 때 대상 작업 항목이 연결되고 완료한다.

 

 

11. 자체적으로 나타나는 Compare & pull request를 클릭한다. 그렇지 않은 경우 Pull request를 클릭한다.

 

 

12. 프로젝트를 가리키도록 base fork를 변경한다. 기본 base fork가 원래 Microsoft 리포지토리를 가리키고 있으므로 base fork를 변경해야한다.

 

 

13.제목은 이전에 입력한 커밋 메시지로 초기화되어야 한다. Create pull request을 클릭한다.

 

 

14. Visual Studio Code로 돌아간다.

이제 풀 요청의 다른 쪽으로 전환하여 검토자 역할을 맡을 것이다. 우리는 Visual Studio Code를 사용해서 풀 요청을 확인하고, 변경 사항을 분석하고, 코멘트를 할 수 있다. 우리가 수정안을 신뢰한다고 가정할 때, 우리는 풀 요청을 병합하여 마스터를 업데이트하고 CI/CD를 시작할 수 있다.

 

 

15. GitHub Pull Requests | All 마우스 오른쪽 버튼으로 클릭하고 Checkout Pull Request를 선택한다.

 

 

16. CI/CD 파이프라인이 자동으로 진행되어 완료한다.

 

 

17. 웹 앱 사이트를 새로 고친다. 예약 페이지로 돌아가서 (다시 로그인해야 함) 이제 공항이 도시별로 정렬되어 있는지 확인한다

 

 

 

18. 칸반 보드에 열려있는 Azure DevOps 탭으로 돌아간다.

우리가 작업하던 사용자 스토리가 승인된 풀 요청으로 연결되었기 때문에 Azure DevOps는 작업 항목의 상태를 자동으로 "Closed"으로 전환한다. 관련 GitHub 커밋 및 풀 요청이 작업 항목에 연결된 것도 확인할 수 있다.

(2020.08.28 이미지 캡쳐만 다시함.)

 

 

19. 커밋 및 풀 요청이 이제 개발 아래에 표시된다.

(2020.08.28 이미지 캡쳐만 다시함.)

 

과제 3: 태스크 완성을 위해 커밋하기

GitHub 이슈를 Azure 보드의 작업 항목에 연결할 수도 있다.

1. 이슈에 링크하려면 링크 탭을 선택한 다음 Add Link -> Existing item을 선택한다.

(2020.08.28 이미지 캡쳐만 다시함.)

 

개발 섹션에서 Add Link를 선택하여 GitHub 커밋 또는 풀 요청을 수동으로 연결할 수도 있다. 이는 AB#{ID} 메서드를 사용하여 커밋 또는 풀 요청을 연결하지 못한 상황에서 유용하다.

 

 

 

2. 링크 추가 대화 상자에서 GitHub 링크 유형 중 하나를 선택하고 커밋, 풀 요청 또는 이슈에에 대한 URL을 입력 한 다음 OK를 선택한다.

여기에서 GitHub 커밋 링크 유형을 사용하여 GitHub 커밋에 대한 링크를 추가하고 커밋 URL을 입력 한 다음 확인을 선택한다. 

Azure 보드는 사용자가 유효한 링크를 입력했는지 확인하기 위해 검사를 수행한다. 그러 다음 아래와 같이 개발 섹션 아래에 커밋이 나타난다.

 

 

3. 개발 섹션에서 링크 보기 또는 열기: 작업 항목 양식의 개발 섹션에는 GitHub 아이콘을 사용하여 GitHub 커밋 및 풀 요청에 생성 된 링크가 나열된다. 제공된 링크를 선택하여 GitHub에서 커밋 또는 풀 요청을 연다.