Azure Pipelines용 JavaScript 사용자 지정

Azure Pipelines를 사용하여 자체 인프라를 설정하지 않고도 JavaScript 앱을 빌드할 수 있습니다. npm, Node, Yarn 및 Gulp와 같은 JavaScript 앱을 빌드, 테스트 및 실행하는 데 일반적으로 사용하는 도구는 Azure Pipelines의 Microsoft 호스팅 에이전트에 미리 설치됩니다.

사전 설치된 Node.js 및 npm 버전은 Microsoft 호스팅 에이전트를 참조하세요. Microsoft 호스팅 에이전트에 이러한 도구의 특정 버전을 설치하려면 프로세스 시작 부분에 노드 도구 설치 관리자 작업을 추가합니다. 자체 호스팅 에이전트를 사용할 수도 있습니다.

JavaScript를 사용하여 첫 번째 파이프라인을 만들려면 JavaScript 빠른 시작을 참조 하세요.

특정 버전의 Node.js 사용

Microsoft 호스팅 에이전트에 아직 설치되지 않은 Node.js 및 npm 버전이 필요한 경우 Node 도구 설치 관리자 작업을 사용합니다. 파일에 다음 코드 조각을 추가합니다 azure-pipelines.yml .

참고 항목

호스트된 에이전트는 정기적으로 업데이트되며, 이 작업을 설정하면 파이프라인이 실행 될 때마다 최신 부 버전으로 업데이트하는 데 상당한 시간이 소요됩니다. 파이프라인에서 특정 노드 버전이 필요한 경우에만 이 작업을 사용합니다.

- task: UseNode@1
  inputs:
    version: '16.x' # replace this value with the version that you need for your project

npm 도구만 업데이트하려면 빌드 프로세스에서 명령을 실행 npm i -g npm@version-number 합니다.

여러 노드 버전 사용

노드 도구 설치 관리자 작업을 사용하여 여러 버전의 노드에서 앱을 빌드하고 테스트할 수 있습니다.

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_16_x:
      node_version: 16.x
    node_13_x:
      node_version: 18.x

steps:
- task: UseNode@1
  inputs:
    version: $(node_version)

- script: npm install

빌드 에이전트에 도구 설치

프로젝트 package.json 또는 package-lock.json 파일에 개발 종속성이 있는 도구가 있는 경우 npm을 통해 도구 및 종속성을 설치합니다. 정확한 버전의 도구는 빌드 에이전트에 있는 다른 버전과 격리된 프로젝트에 정의됩니다.

스크립트 또는 npm 작업을 사용합니다.

스크립트를 사용하여 package.json 설치

- script: npm install --only=dev

npm 작업을 사용하여 package.json 설치

- task: Npm@1
  inputs:
     command: 'install'

npm npx 패키지 실행기를 사용하여 이러한 방식으로 설치된 도구를 실행합니다. 이 도구는 경로 확인에 이런 방식으로 설치된 도구를 검색합니다. 다음 예제에서는 테스트 실행기를 mocha 호출하지만 전역적으로 설치된(통해 npm install -g) 버전을 사용하기 전에 개발 종속성으로 설치된 버전을 찾습니다.

- script: npx mocha

프로젝트에 필요하지만 개발 종속성 package.json으로 설정되지 않은 도구를 설치하려면 파이프라인의 스크립트 단계에서 호출 npm install -g 합니다.

다음 예제에서는 을 사용하여 npm최신 버전의 Angular CLI를 설치합니다. 그러면 나머지 파이프라인은 다른 script 단계의 ng 도구를 사용할 수 있습니다.

참고 항목

Microsoft에서 호스트하는 Linux 에이전트에서 명령 sudo앞에 다음과 같이 sudo npm install -g앞에 있습니다.

- script: npm install -g @angular/cli

팁

이러한 작업은 파이프라인이 실행될 때마다 실행되므로 도구 설치가 빌드 시간에 미치는 영향을 염두에 두어야 합니다. 오버헤드가 빌드 성능에 심각한 영향을 주는 경우 필요한 도구 버전으로 자체 호스팅 에이전트를 구성하는 것이 좋습니다.

종속성 관리

빌드에서 Yarn 또는 Azure Artifacts를 사용하여 공용 npm 레지스트리에서 패키지를 다운로드합니다. 이 레지스트리는 파일에 지정 .npmrc 한 프라이빗 npm 레지스트리의 형식입니다.

npm 사용

다음 방법으로 npm을 사용하여 빌드용 패키지를 다운로드할 수 있습니다.

• 인증 없이 레지스트리에서 패키지를 다운로드하는 가장 간단한 방법이기 때문에 파이프라인에서 직접 실행 npm install 합니다. 빌드를 실행할 에이전트에 대한 개발 종속성이 필요하지 않은 경우 이 옵션을 사용하여 빌드 시간을 --only=prod 단축할 npm install수 있습니다.
• npm 작업을 사용합니다. 이 작업은 인증된 레지스트리를 사용하는 경우에 유용합니다.
• npm 인증 작업을 사용합니다. 이 작업은 Gulp, Grunt 또는 Maven과 같은 작업 실행기 내에서 실행할 npm install 때 유용합니다.

npm 레지스트리를 지정하려면 리포지토리의 파일에 URL을 .npmrc 넣습니다. 피드가 인증되면 프로젝트 설정의 서비스 탭에서 npm 서비스 연결을 만들어 자격 증명을 관리합니다.

파이프라인에 스크립트가 있는 npm 패키지를 설치하려면 다음 코드 조각을 추가합니다 azure-pipelines.yml.

- script: npm install

파일에 지정된 프라이빗 레지스트리를 .npmrc 사용하려면 다음 코드 조각을 추가합니다 azure-pipelines.yml.

- task: Npm@1
  inputs:
    customEndpoint: <Name of npm service connection>

Gulp와 같은 작업 실행기를 통해 npm 명령에 레지스트리 자격 증명을 전달하려면 작업 실행기를 호출하기 azure-pipelines.yml 전에 다음 작업을 추가합니다.

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

npm 레지스트리에서 패키지를 복원할 때 연결 문제로 인해 빌드가 때때로 실패하는 경우 업스트림 원본과 함께 Azure Artifacts를 사용하고 패키지를 캐시할 수 있습니다. Azure Artifacts에 연결할 때 파이프라인의 자격 증명이 자동으로 사용됩니다. 이러한 자격 증명은 일반적으로 프로젝트 컬렉션 빌드 서비스 계정에서 파생됩니다.

Microsoft에서 호스팅하는 에이전트를 사용하는 경우 빌드를 실행할 때마다 새 머신을 얻게 됩니다. 즉, 매번 종속성을 복원하는 데 상당한 시간이 걸릴 수 있습니다. 완화하려면 Azure Artifacts 또는 자체 호스팅 에이전트를 사용할 수 있습니다. 그런 다음 패키지 캐시를 사용하는 이점을 얻을 수 있습니다.

Yarn 사용

스크립트 단계를 사용하여 Yarn을 호출하여 종속성을 복원합니다. Yarn은 일부 Microsoft 호스팅 에이전트에 사전 설치됩니다. 다른 도구와 마찬가지로 자체 호스팅 에이전트에 설치하고 구성할 수 있습니다.

- script: yarn install

JavaScript 컴파일러 실행

Babel 및 TypeScript tsc 컴파일러와 같은 컴파일러를 사용하여 소스 코드를 Node.js 런타임 또는 웹 브라우저에서 사용할 수 있는 버전으로 변환합니다.

컴파일러를 실행하는 스크립트 개체 가 프로젝트 package.json 파일에 설정된 경우 스크립트 태스크를 사용하여 파이프라인에서 호출합니다.

- script: npm run compile

스크립트 작업을 사용하여 파이프라인에서 직접 컴파일러를 호출할 수 있습니다. 이러한 명령은 복제된 소스 코드 리포지토리의 루트에서 실행됩니다.

- script: tsc --target ES6 --strict true --project tsconfigs/production.json

단위 테스트 실행

JUnit XML 형식으로 서식이 지정된 결과를 생성하도록 JavaScript 테스트를 실행하도록 파이프라인을 구성합니다. 그런 다음, 기본 제공 게시 테스트 결과 작업을 사용하여 결과를 게시할 수 있습니다.

테스트 프레임워크에서 JUnit 출력을 지원하지 않는 경우 mocha-junit-reporter와 같은 파트너 보고 모듈을 통해 지원을 추가합니다. JUnit 기자를 사용하도록 테스트 스크립트를 업데이트하거나, 기자가 명령줄 옵션을 지원하는 경우 해당 옵션을 작업 정의에 전달할 수 있습니다.

다음 표에서는 XML 결과를 생성하는 데 사용할 수 있는 가장 일반적으로 사용되는 테스트 실행기 및 기자를 나열합니다.

테스트 실행기	XML 보고서를 생성하는 기자
mocha	모차 주니트 기자 사이프러스 다중 기자
재 스민	재스민 기자
jest	jest-junit jest-junit-reporter
업	카르마 주니트 기자
Ava	tap-xunit

다음 예제에서는 mocha-junit-reporter를 사용하고 스크립트를 사용하여 직접 호출합니다mocha test. 이 스크립트는 기본 위치에서 ./test-results.xmlJUnit XML 출력을 생성합니다.

- script: mocha test --reporter mocha-junit-reporter

프로젝트 package.json 파일npm test에서 스크립트를 정의 test 한 경우 .

- script: npm test

테스트 결과 게시

결과를 게시하려면 테스트 결과 게시 태스크를 사용합니다.

- task: PublishTestResults@2
  condition: succeededOrFailed()
  inputs:
    testRunner: JUnit
    testResultsFiles: '**/test-results.xml'

코드 검사 결과 게시

테스트 스크립트가 이스탄불과 같은 코드 검사 도구를 실행하는 경우 코드 검사 결과 게시 태스크를 추가합니다. 이렇게 하면 빌드 요약에서 검사 메트릭을 찾고 추가 분석을 위해 HTML 보고서를 다운로드할 수 있습니다. 작업에는 Cobertura 또는 JaCoCo 보고 출력이 필요하므로 코드 검사 도구가 올바른 출력을 생성하는 데 필요한 옵션으로 실행되도록 합니다. 예들 들어 --report cobertura입니다.

다음 예제에서는 mocha-junit-reporter와 함께 nyc, Istanbul 명령줄 인터페이스를 사용하고 명령을 호출합니다npm test.

- script: |
    nyc --reporter=cobertura --reporter=html \
    npm test -- --reporter mocha-junit-reporter --reporter-options mochaFile=./test-results.xml
  displayName: 'Build code coverage report'

- task: PublishCodeCoverageResults@2
  inputs: 
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'

엔드 투 엔드 브라우저 테스트

Protractor 또는 Karma와 같은 도구를 사용하여 파이프라인의 일부로 헤드리스 브라우저에서 테스트를 실행합니다. 그런 다음, 다음 단계를 사용하여 빌드 결과를 Azure DevOps에 게시합니다.

1. 헤드리스 Chrome 또는 Firefox와 같은 헤드리스 브라우저 테스트 드라이버 또는 빌드 에이전트에 PhantomJS와 같은 브라우저 모의 도구를 설치합니다.
2. 도구 설명서에 따라 선택한 헤드리스 브라우저/드라이버 옵션을 사용하도록 테스트 프레임워크를 구성합니다.
3. JUnit 형식의 테스트 결과를 출력하도록 테스트 프레임워크(일반적으로 보고자 플러그 인 또는 구성 포함)를 구성합니다.
4. 헤드리스 브라우저 인스턴스를 시작하는 데 필요한 CLI 명령을 실행하도록 스크립트 작업을 설정합니다.
5. 단위 테스트와 함께 파이프라인 단계에서 엔드 투 엔드 테스트를 실행합니다.
6. 단위 테스트와 함께 동일한 테스트 결과 게시 작업을 사용하여 결과를 게시합니다.

웹앱 패키지

배포할 준비가 된 정적 자산에 중간 출력 및 종속성을 사용하여 모든 애플리케이션 모듈을 번들로 묶도록 애플리케이션을 패키지합니다. 컴파일 및 테스트 후 파이프라인 단계를 추가하여 Angular CLI를 사용하여 webpack 또는 ng 빌드와 같은 도구를 실행합니다.

첫 번째 예제에서는 .를 호출합니다 webpack. 이 작업을 수행하려면 package.json webpack 프로젝트 파일에서 개발 종속성으로 구성해야 합니다. 프로젝트의 루트 폴더에 파일이 없는 한 webpack.config.js 기본 구성으로 실행됩니다webpack.

- script: webpack

다음 예제에서는 npm 작업을 사용하여 프로젝트 package.json 정의된 스크립트 개체를 호출 npm run build build 합니다. 프로젝트에서 스크립트 개체를 사용하면 빌드 논리가 소스 코드로 이동되고 파이프라인 외부로 이동합니다.

- script: npm run build

JavaScript 프레임워크 구현

Angular

Angular 앱의 경우 ng 테스트, ng 빌드 및 ng e2e와 같은 Angular 관련 명령을 포함할 수 있습니다. 파이프라인에서 Angular CLI 명령을 사용하려면 빌드 에이전트에 Angular/cli npm 패키지를 설치합니다.

참고 항목

Microsoft에서 호스트하는 Linux 에이전트에서 명령 sudo앞에 다음과 같이 sudo npm install -g앞에 있습니다.

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod

Karma를 실행하는 시작 앱의 ng 테스트 명령과 같이 브라우저를 실행해야 하는 파이프라인의 테스트 의 경우 표준 브라우저 대신 헤드리스 브라우저를 사용합니다. Angular 시작 앱에서:

1. browsers karma.conf.js 프로젝트 파일의 항목을 .로 browsers: ['Chrome'] browsers: ['ChromeHeadless']변경합니다.

2. singleRun karma.conf.js 프로젝트 파일의 false true항목을 값에서 .로 변경합니다. 이 변경은 Karma 프로세스가 실행된 후 중지되도록 하는 데 도움이 됩니다.

React 및 Vue

React 및 Vue 앱에 대한 모든 종속성이 package.json 파일에 캡처됩니다. azure-pipelines.yml 파일에는 표준 Node.js 스크립트가 포함되어 있습니다.

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

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

빌드 파일은 (Vue의 경우) 또는 build (React의 경우) 새 폴더 dist 에 있습니다. 이 코드 조각은 릴리스할 준비가 된 아티팩 www 트를 빌드합니다. 노드 설치 관리자, 파일복사 및 빌드 아티팩트 게시 작업을 사용합니다.

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

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

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

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

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

릴리스하려면 릴리스 작업을 또는 build 아티팩트로 dist 가리키고 Azure Web App 배포 작업을 사용합니다.

실행

Webpack 구성 파일을 사용하여 Babel 또는 TypeScript와 같은 컴파일러를 지정하여 JSX 또는 TypeScript를 일반 JavaScript로 변환하고 앱을 번들로 묶을 수 있습니다.

- script: |
    npm install webpack webpack-cli --save-dev
    npx webpack --config webpack.config.js

작업 실행기 빌드

Gulp 또는 Grunt를 작업 실행기로 사용하여 JavaScript 앱을 빌드하고 테스트하는 것이 일반적입니다.

Gulp

Gulp는 Microsoft 호스팅 에이전트에 미리 설치됩니다. gulp YAML 파일에서 명령을 실행합니다.

- script: gulp                       # include any additional options that are needed

gulpfile.js 파일의 단계에 npm 레지스트리를 사용하여 인증해야 하는 경우:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: gulp                       # include any additional options that are needed

테스트 결과 게시 태스크를 추가하여 JUnit 또는 xUnit 테스트 결과를 서버에 게시합니다.

- task: PublishTestResults@2
  inputs:
    testResultsFiles: '**/TEST-RESULTS.xml'
    testRunTitle: 'Test results for JavaScript using gulp'

코드 검사 결과 게시 태스크를 추가하여 코드 검사 결과를 서버에 게시합니다. 빌드 요약에서 검사 메트릭을 찾을 수 있으며 추가 분석을 위해 HTML 보고서를 다운로드할 수 있습니다.

- task: PublishCodeCoverageResults@1
  inputs: 
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

Grunt

Grunt는 Microsoft 호스팅 에이전트에 미리 설치됩니다. YAML 파일에서 grunt 명령을 실행하려면 다음을 수행합니다.

- script: grunt                      # include any additional options that are needed

파일의 단계에 Gruntfile.js npm 레지스트리를 사용하여 인증이 필요한 경우:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: grunt                      # include any additional options that are needed

코드 패키지 및 배달

앱을 빌드하고 테스트한 후에는 빌드 출력을 Azure Pipelines에 업로드하거나, npm 또는 Maven 패키지를 만들고 게시하거나, 빌드 출력을 웹 애플리케이션에 배포하기 위해 .zip 파일에 패키지할 수 있습니다.

Azure Pipelines에 파일 게시

파일의 전체 작업 디렉터리를 업로드하려면 빌드 아티팩트 게시 작업을 사용하고 파일에 다음을 추가합니다azure-pipelines.yml.

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'

파일의 하위 집합을 업로드하려면 먼저 파일 복사 태스크를 사용하여 작업 디렉터리에서 준비 디렉터리로 필요한 파일을 복사한 다음 빌드 아티팩트 게시 작업을 사용합니다.

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: |
      **\*.js
      package.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1

npm 레지스트리에 모듈 게시

프로젝트의 출력이 웹 애플리케이션이 npm 아닌 다른 프로젝트에서 사용할 모듈인 경우 npm 작업을 사용하여 로컬 레지스트리 또는 공용 npm 레지스트리에 모듈을 게시합니다. 게시할 때마다 고유한 이름/버전 조합을 제공합니다.

예제

첫 번째 예제에서는 버전 제어에서 파일의 변경 내용을 통해 버전 정보(예: npm 버전을 통해)를 관리한다고 가정합니다package.json. 다음 예제에서는 스크립트 태스크를 사용하여 공용 레지스트리에 게시합니다.

- script: npm publish

다음 예제에서는 리포지토리의 .npmrc 파일에 정의된 사용자 지정 레지스트리에 게시합니다. 빌드가 실행됨에 따라 연결에 인증 자격 증명을 삽입하도록 npm 서비스 연결을 설정합니다.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useExternalRegistry
     publishEndpoint: https://my.npmregistry.com

마지막 예제에서는 모듈을 Azure DevOps Services 패키지 관리 피드에 게시합니다.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useFeed
     publishFeed: https://my.npmregistry.com

npm 패키지의 버전 관리 및 게시에 대한 자세한 내용은 npm 패키지 게시 및 빌드 프로세스의 일부로 npm 패키지의 버전을 지정하려면 어떻게 해야 하나요?를 참조하세요.

웹 앱 배포

웹앱에 게시할 준비가 된 .zip 파일 보관 파일을 만들려면 파일 보관 태스크를 사용합니다.

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false

이 보관 파일을 웹앱에 게시하려면 Azure 웹앱 배포를 참조하세요.

이미지를 빌드하고 컨테이너 레지스트리에 푸시

소스 코드가 성공적으로 빌드되고 단위 테스트가 성공적으로 수행되면 이미지를 빌드하고 컨테이너 레지스트리에 푸시할 수도 있습니다.

문제 해결

개발 머신에서 프로젝트를 빌드할 수 있지만 Azure Pipelines에서 빌드하는 데 문제가 있는 경우 다음과 같은 잠재적 원인 및 수정 작업을 살펴봅니다.

• 개발 머신의 Node.js 및 작업 실행기가 에이전트의 버전과 일치하는지 확인합니다. 파이프라인과 같은 node --version 명령줄 스크립트를 포함하여 에이전트에 설치된 항목을 확인할 수 있습니다. 이 지침에 설명된 대로 노드 도구 설치 관리자 를 사용하여 에이전트에 동일한 버전을 배포하거나 명령을 실행 npm install 하여 도구를 원하는 버전으로 업데이트합니다.

• 패키지를 복원하는 동안 빌드가 간헐적으로 실패하는 경우 npm 레지스트리에 문제가 있거나 Azure 데이터 센터와 레지스트리 간에 네트워킹 문제가 있습니다. 우리는 이러한 요인을 제어 할 수 없습니다. npm 레지스트리와 함께 Azure Artifacts를 업스트림 원본으로 사용하면 빌드의 안정성이 향상되는지 살펴봅니다.

• 다른 버전의 Node.js 관리하는 데 사용하는 nvm 경우 대신 노드 도구 설치 관리자 작업으로 전환하는 것이 좋습니다. (nvmmacOS 이미지에 기록상의 이유로 설치됩니다.) nvm 는 셸 별칭을 추가하고 변경하여 PATH여러 Node.js 버전을 관리합니다. 이는 Azure Pipelines가 새 프로세스에서 각 작업을 실행하는 방식과 제대로 상호 작용하지 않습니다.

  노드 도구 설치 관리자 태스크는 이 모델을 올바르게 처리합니다. 그러나 작업을 사용해야 하는 경우 각 파이프라인의 nvm시작 부분에 다음 스크립트를 추가할 수 있습니다.

  steps:
  - bash: |
      NODE_VERSION=16  # or whatever your preferred version is
      npm config delete prefix  # avoid a warning
      . ${NVM_DIR}/nvm.sh
      nvm use ${NODE_VERSION}
      nvm alias default ${NODE_VERSION}
      VERSION_PATH="$(nvm_version_path ${NODE_VERSION})"
      echo "##vso[task.prependPath]$VERSION_PATH"
  

  그런 다음 다른 node 명령줄 도구는 파이프라인 작업의 나머지 부분에 대해 작동합니다. 명령을 사용하는 nvm 각 단계에서 다음 코드로 스크립트를 시작합니다.

  - bash: |
      . ${NVM_DIR}/nvm.sh
      nvm <command>
  

FAQ

Q: Azure Artifacts 및 패키지 관리 서비스에 대한 자세한 내용은 어디에서 확인할 수 있나요?

A: Azure Artifacts의 패키지 관리

Q: 작업에 대한 자세한 내용은 어디에서 확인할 수 있나요?

A: 빌드, 릴리스 및 테스트 작업

Q: '치명적인 오류: CALL_AND_RETRY_LAST 할당 실패 - JavaScript 힙 메모리 부족'이라는 메시지와 함께 파이프라인 오류를 수정할 어떻게 할까요? 있나요?

A: 이 오류 유형은 Node.js 패키지가 메모리 사용 제한을 초과할 때 발생합니다. 이 문제를 해결하려면 같은 NODE_OPTIONS 변수를 추가하고 --max_old_space_size=16384 값을 할당합니다.

Q: 빌드 프로세스의 일부로 npm 패키지의 버전을 지정하려면 어떻게 해야 하나요?

A: 한 가지 옵션은 버전 제어와 npm 버전의 조합을 사용하는 것입니다. 파이프라인 실행이 끝나면 리포지토리를 새 버전으로 업데이트할 수 있습니다. 이 YAML에는 GitHub 리포지토리가 있으며 패키지는 npmjs에 배포됩니다. npmjs의 패키지 버전과 package.json 파일이 일치하지 않으면 빌드가 실패합니다.

variables:
    MAP_NPMTOKEN: $(NPMTOKEN) # Mapping secret var

trigger:
- none

pool:
  vmImage: 'ubuntu-latest'

steps: # Checking out connected repo
- checkout: self
  persistCredentials: true
  clean: true
    
- task: npmAuthenticate@0
  inputs:
    workingFile: .npmrc
    customEndpoint: 'my-npm-connection'
    
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

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

- script: |
    npm pack
  displayName: 'Package for release'

- bash: | # Grab the package version
    v=`node -p "const p = require('./package.json'); p.version;"`
    echo "##vso[task.setvariable variable=packageVersion]$v"

- task: CopyFiles@2
  inputs:
      contents: '*.tgz'
      targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy archives to artifacts staging directory'

- task: CopyFiles@2
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: 'package.json' 
    targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy package.json'

- task: PublishBuildArtifacts@1 
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/npm'
    artifactName: npm
  displayName: 'Publish npm artifact'

- script: |  # Config can be set in .npmrc
    npm config set //registry.npmjs.org/:_authToken=$(MAP_NPMTOKEN) 
    npm config set scope "@myscope"
    # npm config list
    # npm --version
    npm version patch --force
    npm publish --access public

- task: CmdLine@2 # Push changes to GitHub (substitute your repo)
  inputs:
    script: |
      git config --global user.email "username@contoso.com"
      git config --global user.name "Azure Pipeline"
      git add package.json
      git commit -a -m "Test Commit from Azure DevOps"
      git push -u origin HEAD:main