내 고객 중 한 명이 Azure App Service에 Angular 애플리케이션을 배포하기를 원했습니다. Azure DevOps는 이미 다른 프로젝트에서 사용되었으므로 이 새 프로젝트에 사용하는 것이 당연했습니다.

NodeJS 설치

MacOS에서 작업하므로 homebrew가 패키지 설치를 도울 수 있습니다. Windows 또는 Linux를 사용 중인 경우 the last files to install there을 찾을 수 있습니다.

homebrew가 이미 설치된 MacOS에서는 다음 명령을 실행하기만 하면 됩니다.

brew install node

Angular CLI 설치

노드가 설치되면 마지막 Angular CLI를 얻을 수 있습니다. 이 유틸리티는 다양한 작업에 도움이 될 수 있습니다. 그 중 하나는 처음부터 새로운 Angular 프로젝트를 만드는 것입니다.
Angular CLI를 전역으로 설치하려면 다음 명령을 사용할 수 있습니다.

npm install -g @angular/cli

CLI는 시스템 어디에서나 사용할 수 있습니다.

새 Angular 프로젝트 만들기

이제 새로운 Angular 프로젝트를 만들 수 있습니다. 명령은 매우 간단합니다.

ng new HelloWorld --strict false --routing false --style css

이 명령은 기본 설정으로 HelloWorld라는 새 프로젝트를 만듭니다. 추가할 모듈 수로 인해 약간의 시간이 걸릴 수 있습니다.

애플리케이션 테스트

프로젝트 폴더로 이동

cd HelloWorld

다음 명령을 사용하여 애플리케이션을 사용해 볼 수 있습니다.

ng serve

이 명령은 애플리케이션을 생성하고 포트 4200에 노드 서버를 생성합니다. 기본 페이지를 보려면 http://localhost:4200/에서 브라우저를 시작하십시오.



터미널에서 Control C를 사용하여 종료할 수 있습니다.

Azure 파이프라인 만들기

축하합니다. 애플리케이션을 배포할 준비가 되었습니다! CI/CD 부분을 추가할 차례입니다.

여기서 Azure DevOps 프로젝트를 만드는 방법은 설명하지 않겠습니다. 매우 간단하며 의심이 가는 경우 할 수 있습니다read the documentation .

이제 새 파이프라인을 만들어야 합니다.
첫 번째 부분은 애플리케이션 구축입니다.

- stage: Build
  displayName: Build stage
  jobs:
  - job: BuildJob
    pool:
      vmImage: 'ubuntu-20.04'
    steps:
      - task: NodeTool@0
        inputs:
          versionSpec: '10.x'
        displayName: 'Install Node.js'

      - script: |
          cd '$(System.DefaultWorkingDirectory)/HelloWorld'
          npm install -g @angular/cli
          npm install
          ng build --prod
        displayName: 'npm install and build'
      - task: ArchiveFiles@2
        displayName: 'Archive files'
        inputs:
          rootFolderOrFile: '$(System.DefaultWorkingDirectory)/HelloWorld/dist/HelloWorld/'
          includeRootFolder: false
          archiveType: zip
          archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
          replaceExistingArchive: true

      - task: PublishBuildArtifacts@1
        inputs:
          PathtoPublish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
          ArtifactName: 'drop'
          publishLocation: 'Container'

코드는 매우 간단합니다.

에이전트에 노드를 설치합니다

Angular CLI를 설치합니다

.

NPM 패키지를 설치합니다

.

Angular 애플리케이션을 빌드합니다

.

파일을 압축합니다

.

zip을 아티팩트로 게시합니다

.

두 번째 부분은 애플리케이션을 배포하는 것입니다.

- stage: Deploy
  displayName: 'Deploy Web App'
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: DeploymentJob
    pool:
      vmImage: 'ubuntu-20.04'
    environment: $(environmentName)
    strategy:
      runOnce:
        deploy:
          steps:

          - task: AzureWebApp@1
            displayName: 'Deploy Azure Web App : $(webAppName)'
            inputs:
              azureSubscription: $(azureSubscription)
              appName: $(webAppName)
              appType: webAppLinux
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip 

이 단계에서는 행동만 취하면 됩니다. 아티팩트를 zip 파일로 가져오고 zip 배포 작업을 통해 Azure App Service에 게시합니다.

완전한 코드

프로젝트의 전체 코드는 hosted on GitHub 입니다. Azure 파이프라인의 코드에만 관심이 있다면 you can read it there .