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

아티클
04/18/2023

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

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

이 빠른 시작에서는 파이프라인을 사용하여 npm(노드 패키지 관리자)을 사용하여 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 - 파이프라인 만들기

Azure Pipelines에 로그인합니다. 브라우저로 이동하여 https://dev.azure.com/my-organization-name Azure DevOps dashboard 표시합니다.
프로젝트로 이동하여 파이프라인 새>파이프라인 만들기를 선택합니다.
소스 코드의 위치로 GitHub 를 선택합니다.
로그인하기 위해 GitHub로 리디렉션되는 경우 GitHub 자격 증명을 입력합니다.
리포지토리 목록이 나타나면 Node.js 샘플 리포지토리를 선택합니다.
Azure Pipelines는 리포지토리의 코드를 분석하고 파이프라인에 대한 템플릿을 Node.js 권장합니다. 해당 템플릿을 선택합니다.
Azure Pipelines는 파이프라인에 대한 YAML 파일을 생성합니다. 저장을선택하고커밋을 기본 분기에 직접 실행 > 한 다음 저장 후 다시 실행을 선택합니다.
새 실행이 시작됩니다. 실행이 끝날 때까지 기다립니다.

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

파이프라인을 만들고YAML 템플릿을 선택합니다.
파이프라인에 대한 에이전트 풀 및 YAML 파일 경로를 설정합니다.
파이프라인을 저장하고 빌드를 큐에 대기합니다. 빌드 #nnnnnnnn.n이 큐에 대기 중인 메시지가 나타나면 번호 링크를 선택하여 파이프라인의 작동을 확인합니다.

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

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

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

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

파이프라인에 새 작업을 추가하여 npm package, package.json을 복사하고 아티팩트 게시를 수행합니다. 파일 복사 작업은 소스 코드 파일이 다운로드되는 에이전트의 로컬 경로에서 파일을 복사하고 대상에 푸시되기 전에 아티팩트가 복사되는 에이전트의 로컬 경로에 파일을 저장합니다. src 및 public 폴더만 복사본을 가져옵니다. 파이프라인 아티팩트 게시 태스크는 이전 파일 복사 작업에서 파일을 다운로드하여 파이프라인 빌드와 함께 게시할 파이프라인 아티팩트로 사용할 수 있도록 합니다.
```
- task: CopyFiles@2
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: |
       src/*
       public/*
    targetFolder: '$(Build.ArtifactStagingDirectory)'
  displayName: 'Copy project files'

- task: PublishPipelineArtifact@1
  inputs:
    artifactName: e2e-server
    targetPath: '$(Build.ArtifactStagingDirectory)'
    publishLocation: 'pipeline'
  displayName: 'Publish npm artifact'
```

4 - 파이프라인 실행

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

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

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

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

사용자 고유의 리포지토리에 샘플 코드가 있으면 첫 번째 파이프라인을 만들고빈 프로세스 템플릿을 선택합니다.
파이프라인 편집기에서 작업 탭에서 프로세스를 선택하고 다음과 같이 속성을 변경합니다.
- 에이전트 큐:Hosted Ubuntu Latest
파이프라인에 다음 작업을 지정된 순서로 추가합니다.
- npm
  - 명령:install
- npm
  - 표시 이름:npm test
  - 명령:custom
  - 명령 및 인수:test
- 테스트 결과 게시
  - 속성에 대한 모든 기본값을 그대로 둡니다.
- 보관 파일
  - 보관할 루트 폴더 또는 파일:$(System.DefaultWorkingDirectory)
  - 경로 보관에 루트 폴더 이름 앞에 추가: 선택
- 빌드 아티팩트 게시
  - 속성에 대한 모든 기본값을 그대로 둡니다.
파이프라인을 저장하고, 빌드를 큐에 넣어 작동하는지 확인합니다.

다음 단계

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

JavaScript 구성