JavaScript 앱용 파이프라인

이 문서에서는 Azure Pipelines가 JavaScript 앱에서 작동하는 방법을 설명합니다. Microsoft 호스팅 에이전트는 인프라를 설정하지 않고도 npm, Node.js, Yarn 및 Gulp와 같은 일반적인 JavaScript 빌드, 테스트 및 배포 도구를 미리 설치합니다. 자체 호스팅 에이전트를 구성할 수도 있습니다.

JavaScript용 파이프라인을 빠르게 만들려면 JavaScript 빠른 시작을 참조하세요.

노드 도구 설치 관리자

사전 설치되지 않은 Node.js 및 npm 버전을 설치하거나 자체 호스팅 에이전트에 도구를 설치하려면 다음을 수행합니다.

• npm의 경우 파이프라인에서 npm i -g npm@version-number 명령을 실행합니다.
• Node.js파이프라인에 Node.js 에코시스템 v1(UseNode@1) 작업을 추가합니다.

- task: UseNode@1
  inputs:
    version: '16.x' # replace with the version you need

여러 노드 버전 사용

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 작업 또는 명령줄 작업을 사용합니다.

스크립트를 사용하려면 다음을 수행합니다.

- script: npm install --only=dev

npm 작업을 사용하려면 다음을 수행합니다.

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

이러한 방식으로 설치하는 도구는 PATH 해상도에서 도구를 검색하는 npm npx 패키지 실행기를 사용합니다. 다음 예제에서는 테스트 실행기를 mocha 호출하고 전역적으로 npm install -g설치된 버전 대신 개발 종속성 버전을 사용합니다.

- script: npx mocha

package.json개발 종속성으로 설정되지 않은 프로젝트에 필요한 도구를 설치하려면 파이프라인의 스크립트에서 호출 npm install -g 합니다. 다음 예제에서는 을 사용하여 최신 버전의 npm를 설치합니다. 파이프라인의 다른 스크립트는 Angular ng 명령을 사용할 수 있습니다.

- script: npm install -g @angular/cli

종속성 패키지 다운로드

Yarn 또는 Azure Artifacts를 사용하여 *.npmrc 파일에 지정한 공용 npm 레지스트리 또는 프라이빗 npm 레지스트리에서 패키지를 다운로드할 수 있습니다. npm 레지스트리를 지정하려면 해당 URL을 코드 리포지토리의 *.npmrc 파일에 추가합니다.

npm 사용

npm을 사용하여 다음과 같은 방법으로 파이프라인에서 빌드 패키지를 다운로드할 수 있습니다.

• 인증 없이 패키지를 다운로드하는 가장 간단한 방법은 직접 실행 npm install합니다.
• 인증된 레지스트리를 사용하려면 npm 작업을 추가합니다.
• 작업 실행기 Gulp, Grunt 또는 Maven 내부에서 실행 npm install 하려면 npm 인증 작업을 사용합니다.

npm 패키지를 직접 설치하려면 azure-pipelines.yml 다음 스크립트를 사용합니다. 빌드 에이전트에 개발 종속성이 필요하지 않은 경우, 빌드 시간을 단축하기 위해 --only=prod 옵션을 npm install에 추가할 수 있습니다.

- script: npm install --only=prod

*.npmrc 파일에 지정된 프라이빗 레지스트리를 사용하려면 azure-pipelines.yml에 Npm@1 작업을 추가합니다.

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

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

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

Yarn 사용

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

- script: yarn install

파이프라인에서 CLI 또는 Bash 작업을 사용하여 Yarn을 호출할 수도 있습니다.

JavaScript 컴파일러

JavaScript 앱은 Babel 및 TypeScripttsc 컴파일러와 같은 컴파일러를 사용하여 소스 코드를 Node.js 런타임 또는 웹 브라우저에서 사용할 수 있는 버전으로 변환합니다. 컴파일러를 실행하기 위해 프로젝트 package.json 파일에 스크립트 개체를 설정한 경우 파이프라인에서 호출할 수 있습니다.

- script: npm run compile

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

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

프로젝트 package.json 컴파일 스크립트를 정의하는 경우 npm 작업을 사용하여 코드를 빌드할 수 있습니다. 컴파일 스크립트를 정의하지 않으면 Bash 작업을 사용하여 코드를 컴파일할 수 있습니다.

단위 테스트

JUnit XML 형식으로 결과를 생성하도록 JavaScript 테스트를 실행하도록 파이프라인을 구성할 수 있습니다. 그런 다음 테스트 결과 게시 태스크를 사용하여 결과를 게시 할 수 있습니다.

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

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

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

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

프로젝트의 test 파일에서 스크립트를 정의한 경우, npm test를 사용하여 이를 호출할 수 있습니다.

- script: npm test

테스트 결과 게시

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

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

코드 검사 결과 게시

테스트 스크립트가 Istanbul과 같은 코드 검사 도구를 실행하는 경우 코드 검사 결과 게시 태스크를 추가합니다. 그런 다음 빌드 요약에서 검사 메트릭을 보고 추가 분석을 위해 HTML 보고서를 다운로드할 수 있습니다.

이 작업에는 Cobertura 또는 JaCoCo 보고서 출력이 예상됩니다. 코드 커버리지 도구가 올바른 출력을 생성하는 데 필요한 옵션으로 실행되는지 확인하십시오. 예를 들어, --report cobertura.

- 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 와 같은 도구를 사용하여 헤드리스 브라우저에서 테스트를 실행한 다음 테스트 결과를 게시할 수 있습니다. 브라우저 테스트를 구성하고 결과를 게시하려면 다음 단계를 수행합니다.

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

패키징 및 배달

앱을 빌드하고 테스트한 후에는 다음을 수행할 수 있습니다.

• 빌드 출력을 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 파일을 통해 npm 버전과 같은 버전 정보를 관리한다고 가정합니다.

- script: npm publish

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

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

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

npm 패키지의 버전 관리 및 게시에 대한 자세한 내용은 npm 패키지 게시 및 빌드 프로세스의 일부로 npm 패키지의 버전을 지정하는 방법을 참조하세요.

웹앱 패키지 및 배포

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

다음 예제에서는 .를 호출합니다 webpack. 이 프로세스가 작동하려면 webpack 프로젝트 파일에서 개발 종속성으로 구성해야 합니다. 이 스크립트는 프로젝트의 루트 폴더에 webpack 파일이 없는 한 기본 구성으로 실행됩니다.

- script: webpack

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

- script: npm run build

파이프라인에서 CLI 또는 Bash 작업을 사용하여 패키징 도구(예: webpack Angular) ng build를 호출할 수도 있습니다.

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

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

이 보관 파일을 웹앱에 게시하려면 Azure Pipelines를 사용하여 Azure App Service에 배포를 참조하세요.

JavaScript 프레임워크

파이프라인에 패키지를 설치하여 다양한 JavaScript 프레임워크를 지원할 수 있습니다.

Angular

Angular 앱의 경우 Angular 관련 명령(예: ng test, ng build및 ng e2e)을 실행할 수 있습니다. 파이프라인에서 Angular CLI 명령을 사용하려면 빌드 에이전트에 Angular/cli npm 패키지를 설치합니다.

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

파이프라인에서 브라우저 실행이 필요한 테스트의 경우, ng test 명령을 사용하여 Karma를 실행하는 것과 같은 상황에서는 표준 브라우저 대신 헤드리스 브라우저를 사용하세요. Angular 시작 앱에서:

• browsers karma.conf.js 프로젝트 파일의 항목을 .로 browsers: ['Chrome']browsers: ['ChromeHeadless']변경합니다.
• singleRun karma.conf.js 프로젝트 파일의 항목을 .로 falsetrue변경합니다. 이 변경은 Karma 프로세스가 실행된 후 중지되도록 하는 데 도움이 됩니다.

React 및 Vue

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

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

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

빌드 파일은 새 폴더에 있으며 Vue 또는 React용 빌드에 대해 dist입니다. 다음 예제에서는 릴리스할 준비가 된 아티팩 www트를 빌드합니다. 파이프라인은 Node.js사용 , 파일 복사 및 빌드 아티팩트 게시 작업을 사용합니다.

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

앱을 릴리스하려면 릴리스 작업을 dist 또는 build 아티팩트로 가리키고 Azure Web App 작업을 사용하십시오.

Webpack

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

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

작업 실행기 빌드

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

Gulp

- script: gulp # add any needed options

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

- script: gulp

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

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

Grunt

- script: grunt # add any needed options

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

- script: grunt

Troubleshooting

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

• 개발 머신의 Node.js 버전과 작업 실행기가 에이전트의 버전과 일치하는지 확인합니다.

  파이프라인과 같은 node --version 명령줄 스크립트를 포함하여 에이전트에 설치된 버전을 확인할 수 있습니다. 작업을 사용하여 Use Node.js 에이전트에 동일한 버전을 설치하거나 명령을 실행 npm install 하여 도구 버전을 업데이트합니다.

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

• 다른 버전의 Node.js관리하는 데 사용하는 nvm 경우 대신 Node.js(UseNode@1) 작업으로 전환하는 것이 좋습니다. nvm 는 macOS 이미지에 기록적인 이유로 설치됩니다. nvm 는 셸 별칭을 추가하고 변경하여 PATH여러 Node.js 버전을 관리합니다. 이는 Azure Pipelines가 새 프로세스에서 각 작업을 실행하는 방식과 제대로 상호 작용하지 않습니다. 자세한 내용은 파이프라인 실행을 참조하세요.

  태스크는 Use Node.js 이 모델을 올바르게 처리합니다. 그러나 작업에 사용 nvm이 필요한 경우 각 파이프라인의 시작 부분에 다음 스크립트를 추가할 수 있습니다.

  steps:
  - bash: |
      NODE_VERSION=16  # or your preferred version
      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

'치명적인 오류: CALL_AND_RETRY_LAST 할당 실패 - JavaScript 힙 메모리 부족' 메시지와 함께 파이프라인 오류를 해결하려면 어떻게 해야 하나요?

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

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

한 가지 옵션은 버전 제어와 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

관련 콘텐츠

• Azure Artifacts 및 패키지 관리 서비스에 대한 자세한 내용은 Azure Artifacts의 패키지 관리를 참조하세요.
• 작업에 대한 자세한 내용은 빌드, 릴리스 및 테스트 작업을 참조하세요.