42. Azure 파이프라인과 GitHub 통합 1편

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

 

 

 

 

이 랩은 전체 5개의 과제로 이루어져 있으며 2편에 걸쳐 분리 포스팅 하고자 한다. 먼저 1편을 정리한다.

 

 

 

개요

GitHub는 모든 모양과 크기의 애플리케이션을 포함하는 1억 개 이상의 리포지토리를 호스트한다. 그러나 GitHub는 시작에 불과하며 이러한 애플리케이션은 잠재력을 최대한 발휘하기 위해 여전히 구축, 출시 및 관리해야 한다.

Azure 파이프라인은 어떤 플랫폼이나 클라우드에 대해서도 지속적으로 빌드, 테스트 및 배포할 수 있도록 해준다. 리눅스, MacOS 및 윈도우즈용 클라우드 호스팅 에이전트, 네이티브 컨테이너를 지원하는 강력한 워크플로우, Kubernetes, VM 및 Serverless 환경으로의 유연한 배포 등을 보유하고 있다.

Azure 파이프라인은 모든 GitHub 오픈 소스 프로젝트에 무제한(분) CI/CD 및 10개의 병렬 작업을 무료로 제공한다. 모든 오픈 소스 프로젝트는 유료 고객이 사용하는 동일한 인프라에서 실행되며, 즉, 동일한 빠른 성능과 높은 서비스 품질을 얻을 수 있다는 것을 의미한다. Atom, CPython, Pipenv, Tox, Visual Studio Code, TypeScript 등 CI/CD용 Azure 파이프라인을 이미 사용하고 있으며, 그 목록은 매일 증가하고 있다.

이 랩에서는 GitHub 프로젝트를 통해 Azure 파이프라인을 설정하는 것이 얼마나 쉬운지 그리고 작업 항목에서 코드 변경, 커밋, 빌드 및 릴리즈에 이르는 엔드 투 엔드 추적성을 달성할 수 있는 방법을 살펴보게 된다.

 

 

 

 

선행 조건

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

• https://github.com에서 GitHub 계정

• https://azure.com에서 Azure 계정

• https://dev.azure.com에서 Azure DevOps 계정

• https://marketplace.visualstudio.com/items?itemName=keesschollaart.arm-outputs에서 Azure DevOps 계정에 설치된 ARM Output 확장

• https://git-scm.com/downloads에서 Git 설치

• https://code.visualstudio.com에서 Visual Studio Code 설치

• https://marketplace.visualstudio.com/items?itemName=ms-azure-devops.azure-pipelines에서 설치된 Visual Studio Code에 Azure 파이프라인 확장

• https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github에서 설치된 Visual Studio Code에 GitHub Pull Requests 확장

 

 

 

환경 설정

1. GitHub에서 Microsoft/ContosoAir 리포지토리로 이동한다.

 

2. 아직 GitHub에 로그인하지 않은 경우 지금 로그인한다. 

 

 

3. 페이지의 오른쪽 상단에서 fork를 클릭하여 리포지토리를 자신의 계정으로 포크한다.

 

 

4. 리포지토리가 포크되면 GitHub 리포지토리를 로컬로 복제하고 Visual Studio Code에서 열어야 한다.

 

5. 포크한 리포지토리 URL 복제를 복사한다.

 

 

6. Visual Studio 코드를 시작한다.  Ctrl+Shift+P 를 눌러 명령 팔레트를 가져오고 Git: Clone을 입력하여 Git 리포지토리를 복제한다. 원격 리포지토리의 URL을 묻는 메시지가 표시된다. 이전에 복사한 URL을 붙여 넣는다. 로컬 리포지토리를 저장할 디렉터리를 선택한다. 메시지가 표시되면 Open Repository를 선택한다. 

 

 

랩 시나리오

이 랩에서는 Azure DevOps의 통합 및 자동화 장점에 대해 보여줄 것이다. 우리는 Node.js를 이용하여 자사의 대표 웹 사이트를 개발한 가공 항공사 콘토소 에어(Contoso Air)를 돕는 역할을 맡게 될 것이다. 운영 개선을 위해 공공 서비스를 신속하게 업데이트하고 DevOps와 클라우드의 이점을 최대한 활용할 수 있도록 지속적인 통합과 지속적인 전달을 위한 파이프라인을 구현하고자 한다.

이 사이트는 Azure에서 호스팅 될 것이며, 그들은 수작업의 개입 없이 애플리케이션을 배포하고 호스팅하는 데 필요한 모든 인프라를 스핀업 할 수 있도록 전체 프로세스를 자동화하고자 한다. 일단 이 과정이 완료되면, 기술팀이 비즈니스 가치 창출에 더 집중할 수 있도록 해 줄 것이다.

 

실습 1:  Azure 파이프라인으로 자동화된 CI/CD 파이프라인 설정하기

이번 실습에서는 콘토소항공이 DevOps 시나리오의 핵심 요소를 개편하는 데 도움을 줄 것이다. 다른 항공사들과 마찬가지로, 그들은 사업 기회를 창출하고 관리하기 위해 그들의 웹사이트에 의존한다. 그러나, 그들이 소스 코드에서 프로덕션 시스템으로의 변경을 이동시키기 위해 현재 보유하고 있는 프로세스는 시간이 많이 걸리고 휴먼 에러에 노출되어 있다. 그들은 소스 코드를 관리하기 위해 GitHub를 사용하고 그들의 프로덕션 사이트를 Azure에 호스팅하기를 원하므로 중간에 모든 것을 자동화하는 것이 우리의 일이 될 것이다.

여기에는 Azure DevOps에서 지속적인 통합 빌드를 호출하기 위해 GitHub 리포지토리에 커밋하는 파이프라인 설정이 포함된다. 빌드가 완료되면, Azure로 비트를 푸시하여 지속적인 전달 배포를 호출할 것이며, 필요한 경우 필요한 리소스를 생성한다. 우리가 제일 먼저 해야 할 일은 GitHub와 Azure DevOps를 연결하는 것이며, GitHub 마켓플레이스에서 Azure Pipelines 확장을 통해 이를 수행할 수 있다.

 

과제 1: GitHub Marketplace에서 Azure Pipelines 설치하기

1. GitHub 포크의 루트에 열려있는 브라우저 탭으로 전환한다.

 

2. GitHub Marketplace로 이동한다.

 

 

3. “pipelines” 이라고 검색하여 Azure Pipelines을 클릭한다.

 

 

4. 하단으로 스크롤하여 Install it for free를 클릭한다. 이전에 Azure Pipelines를 설치한 경우 대신 Configure access를 선택하여 6-8 단계를 건너 띈다.

 

 

5. GitHub 계정이 여러 개인 경우 Switch billing account 드롭 다운에서 프로젝트를 포크한 계정을 선택한다.

 

 

6. Complete order and begin installation를 클릭한다.

 

 

7. 포함할 리포지토리 (또는 All repositories)를 선택하고 설치를 클릭한다.

 

과제 2: 지속적인 통합 파이프라인 구성하기

Azure 파이프라인이 설치 및 구성되었으므로 파이프라인 구축을 시작할 수 있지만 파이프라인을 저장할 프로젝트를 선택해야 한다. 기존 것을 선택하거나 또는 새로운 Azure DevOps 프로젝트를 만들어 지속적인 통합 및 지속적인 전달에 필요한 파이프라인을 유지하고 실행할 수 있다. 가장 먼저 할 일은 CI 파이프라인을 만드는 것이다.

 

1. 사용할 조직 및 Azure DevOps 프로젝트를 선택한다. 없는 경우 무료로 만들 수 있다.

(GitHub에 이미 Azure Pipelines이 설치되어 있는 경우는 기존 실습환경에서 "ContosoAir" 라는 프로젝트를 새로 만들어서 시작하면 된다.)

 

 

2. 포크한 리포지토리를 선택한다.

모든 빌드 파이프라인은 단순히 일련의 태스크다. 파일 복사, 소스 컴파일 또는 아티팩트 게시 등 기존 작업 라이브러리는 대부분의 시나리오를 다룬다. 아직 다루지 않은 특수한 요구 사항이 있는 경우 직접 만들 수도 있다. 빌드 파이프라인을 설명하는데 유용한 마크 업 구문인 YAML을 사용하겠다. 소스 프로젝트 분석을 기반으로 Node.js 파이프라인을 시작점으로 사용한다. 프로젝트에 필요한 최종 YAML로 내용을 교체한다.

 

 

 

3. 프롬프트가 표시되면 권장 템플릿으로 Node.JS를 선택한다.

 

 

4. 기본 템플릿을 아래 YAML로 바꾼다.

pool:
  vmImage: 'ubuntu-16.04'
trigger:
  - master
steps:
  - task: CopyFiles@2
    displayName: 'Copy Files to: $(build.artifactstagingdirectory)/Templates'
    inputs:
      SourceFolder: deployment
      Contents: '*.json'
      TargetFolder: '$(build.artifactstagingdirectory)/Templates'
  - task: Npm@1
    displayName: 'npm custom'
    inputs:
      command: custom
      verbose: false
      customCommand: 'install --production'
  - task: ArchiveFiles@2
    displayName: 'Archive $(Build.SourcesDirectory)'
    inputs:
      rootFolderOrFile: '$(Build.SourcesDirectory)'
      includeRootFolder: false
  - task: PublishBuildArtifacts@1
    displayName: 'Publish Artifact: drop'

 

 

5. Save and run을 클릭한다.

 

 

6. Save and run을 확인하여 YAML 정의를 리포지토리의 마스터 브랜치에 직접 커밋한다.

 

 

7. 빌드를 따라 완료한다.

 

 

과제 3: 빌드 상태 배지 추가하기

양질의 프로젝트에 대한 중요한 표시는 빌드 상태 배지다. 누군가 프로젝트가 현재 성공적인 빌드 상태임을 나타내는 배지가 있는 프로젝트를 발견하게 되면 그것은 프로젝트가 효과적으로 유지된다는 표시이다.

 

1. 빌드 파이프라인을 클릭하여 개요 페이지로 이동한다.

 

 

2. 줄임표 (…) 드롭 다운에서  Status badge를 선택한다.

 

 

3. Status badge UI는 원하는 위치에 빌드 상태를 빠르고 쉽게 통합 할 수 있는 방법을 제공한다. 제공된 대시보드에서 제공된 URL을 사용하거나 마크 다운 스니펫을 사용하여 Wiki 페이지와 같은 위치에 상태 배지를 추가 할 수 있다. Sample Markdown의 Copy to clipboard 버튼을 클릭한다.

 

 

4. Visual Studio Code로 돌아가서 README.md 파일을 연다.

 

5. 파일 시작 부분에 클립 보드 내용을 붙여 넣는다. Ctrl+S를 눌러 파일을 저장한다.

 

 

6. Source Control 탭에서 Added build status badge와 같은 커밋 메시지를 입력하고 Ctrl+Enter를 눌러 커밋한다. 메시지가 표시되면 확인한다.

 

 

7. Git에서는 변경 사항만 먼저 스테이징하면 커밋에 포함된다. VS 코드가 모든 변경 사항을 자동으로 스테이징하고 직접 커밋하도록 할지 묻는 메시지가 표시되면 Always를 선택한다.

 

 

8. git에서 user .name 및 user.email을 구성하라는 오류 메시지가 표시되면 명령 프롬프트를 열고 다음 명령을 입력하여 사용자 이름 및 이메일 주소를 설정한다.

git config --global user.name "Your Name" git config --global user.email "Your Email Address"

 

 

9. 창의 맨 아래에 있는 Synchronize Changes 버튼을 눌러 커밋를 서버로 푸시한다. 메시지가 표시되면 확인한다.

 

 

10. 아직 로그인하지 않은 경우 GitHub에 로그인 해야 한다.

 

11. 브라우저에서 readme 파일로 이동하면 상태가 표시된다.

 

 

2편에서 계속