빠른 시작 - Azure Pipelines를 사용하여 Node.js 패키지 빌드 및 게시

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

Azure DevOps 파이프라인을 사용하여 JavaScript 앱을 빌드, 배포 및 테스트할 수 있습니다.

이 빠른 시작에서는 파이프라인을 사용하여 npm(Node Package Manager)을 사용하여 Node.js 패키지를 만들고 파이프라인 아티팩트를 게시하는 방법을 안내합니다.

필수 구성 요소

Azure DevOps에는 다음 항목이 있어야 합니다.

  • 리포지토리를 만들 수 있는 GitHub 계정입니다. 체험 계정 만들기
  • Azure DevOps 조직 및 프로젝트. 체험 계정 만들기
  • Microsoft 호스팅 에이전트에서 파이프라인을 실행하는 기능. 병렬 작업을 구매하거나 무료 계층을 요청할 수 있습니다.

YAML은 TFS 2018에 사용할 수 없습니다.

1 - 샘플 코드 포크

GitHub에서 다음 샘플 Express.js 서버 앱을 포크합니다.

https://github.com/Azure-Samples/js-e2e-express-server

2 - 파이프라인 만들기

  1. Azure Pipelines에 로그인합니다. 브라우저로 https://dev.azure.com/my-organization-name 이동하여 Azure DevOps 대시보드를 표시합니다.

  2. 프로젝트로 이동하여 파이프라인 새 파이프라인>만들기를 선택합니다.

  3. 소스 코드의 위치로 GitHub 를 선택합니다.

  4. 로그인하기 위해 GitHub로 리디렉션되는 경우 GitHub 자격 증명을 입력합니다.

  5. 리포지토리 목록이 나타나면 Node.js 샘플 리포지토리를 선택합니다.

  6. Azure Pipelines는 리포지토리의 코드를 분석하고 파이프라인에 대한 템플릿을 Node.js 권장합니다. 해당 템플릿을 선택합니다.

  7. Azure Pipelines는 파이프라인에 대한 YAML 파일을 생성합니다. 저장을선택하고기본 분기에 직접 커밋을 실행 > 한 다음 저장을 선택하고 다시 실행합니다.

  8. 새 실행이 시작됩니다. 실행이 끝날 때까지 기다립니다.

완료되면 리포지토리에 사용자 지정할 준비가 된 YAML 파일 azure-pipelines.yml 이 작동합니다.

  1. 파이프라인을 만들고YAML 템플릿을 선택합니다.

  2. 파이프라인에 대한 에이전트 풀YAML 파일 경로를 설정합니다.

  3. 파이프라인을 저장하고 빌드를 큐에 대기합니다. Build #nnnnnnnn.n이 큐에 대기 중인 메시지가 나타나면 번호 링크를 선택하여 파이프라인의 작동을 확인합니다.

3 - 패키지 빌드 및 아티팩트 게시

  1. azure-pipelines.yml 파일을 편집합니다.

  2. Node.js 버전 16 LTS를 사용하도록Node.js 도구 설치 관리자 작업을 업데이트합니다.

    trigger:
    - main
    
    pool:
      vmImage: 'ubuntu-latest'
    
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '16.x'
      displayName: 'Install Node.js'
    
    - script: |
        npm install
      displayName: 'npm install'
    
    - script: |
        npm run build
      displayName: 'npm build'
    
  3. 파이프라인에 새 작업을 추가하여 npm 패키지, package.json을 복사하고 아티팩트 게시를 수행합니다. 파일 복사 태스크는 소스 코드 파일이 다운로드되는 에이전트의 로컬 경로에서 파일을 복사하고 대상에 푸시되기 전에 아티팩트가 복사되는 에이전트의 로컬 경로에 파일을 저장합니다. 이러한 파일은 npm 폴더에 저장됩니다. 파이프라인 아티팩트파이프라인 아티팩트 게시 태스크는 이전 파일 복사 태스크에서 파일을 다운로드하여 파이프라인 빌드와 함께 게시될 파이프라인 아티팩트로 사용할 수 있도록 합니다.

    - task: CopyFiles@2
      inputs:
        sourceFolder: '$(Build.SourcesDirectory)'
        contents: '*.tgz' 
        targetFolder: $(Build.ArtifactStagingDirectory)/npm
      displayName: 'Copy npm package'
    
    - task: CopyFiles@2
      inputs:
        sourceFolder: '$(Build.SourcesDirectory)'
        contents: 'package.json' 
        targetFolder: $(Build.ArtifactStagingDirectory)/npm
      displayName: 'Copy package.json'   
    
    - task: PublishPipelineArtifact@1
      inputs:
        targetPath: '$(Build.ArtifactStagingDirectory)/npm'
        artifactName: npm
      displayName: 'Publish npm artifact'
    

4 - 파이프라인 실행

파이프라인을 저장하고 실행합니다. 파이프라인이 실행된 후 작업이 성공적으로 실행되었고 게시된 아티팩트가 표시되는지 확인합니다.

아티팩트를 사용한 성공적인 파이프라인 실행 스크린샷

  1. GitHub에서 다음 리포지토리를 포크합니다.

    https://github.com/Azure-Samples/js-e2e-express-server
    
  2. 사용자 고유의 리포지토리에 샘플 코드가 있으면 첫 번째 파이프라인을 만들고빈 프로세스 템플릿을 선택합니다.

  3. 파이프라인 편집기에서 작업 탭에서 프로세스를 선택하고 다음과 같이 속성을 변경합니다.

    • 에이전트 큐:Hosted Ubuntu 1604
  4. 파이프라인에 지정된 순서로 다음 작업을 추가합니다.

    • npm

      • 명령:install
    • npm

      • 표시 이름:npm test
      • 명령:custom
      • 명령 및 인수:test
    • 테스트 결과 게시

      • 속성에 대한 모든 기본값을 그대로 둡니다.
    • 파일 보관

      • 보관할 루트 폴더 또는 파일:$(System.DefaultWorkingDirectory)
      • 보관 경로에 루트 폴더 이름 앞에 추가: 선택
    • 빌드 아티팩트 게시

      • 속성에 대한 모든 기본값을 그대로 둡니다.
  5. 파이프라인을 저장하고 빌드를 큐에 대기하여 작업을 확인합니다.

다음 단계

축하합니다! 이 빠른 시작을 성공적으로 완료했습니다!