Создайте и разверните Angular App с Azure DevOps

Один из моих клиентов хотел развернуть угловое приложение в Azure App Service. Azure Devops уже использовался в другом проекте, поэтому было очевидно использовать его для этого нового.

Я работаю над MacOS, поэтому HomeBrew может помочь установить пакеты. Если вы находитесь в Windows или Linux, вы можете найти Последние файлы для установки Анкет

На macOS, когда Homebrew уже установлен, вам просто нужно запустить команду:

brew install node

После установки узла вы можете получить последний угловой CLI. Эта утилита может помочь в различных задачах. Одним из них является создание новых угловых проектов с нуля. Чтобы установить Angular CLI во всем мире, вы можете использовать эту команду:

npm install -g @angular/cli

CLI будет доступен в любом месте вашей системы.

Теперь мы можем создать новый угловой проект. Команда очень проста:

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

Эта команда создаст новый проект под названием Helloworld с настройками по умолчанию. Это может занять немного времени из -за количества модулей, чтобы добавить.

Перейти в папку проекта

cd HelloWorld

Вы можете попробовать приложение, используя команду:

ng serve

Эта команда генерирует приложение и создаст сервер узлов на порту 4200. Просто запустите свой браузер по адресу http://localhost: 4200/ Чтобы увидеть страницу по умолчанию.

Вы можете использовать Control C в терминале для выхода.

Поздравляю, наше заявление готово к развертыванию! Пришло время добавить часть CI/CD.

Я не буду объяснять, как создать здесь проект Azure DevOps. Это очень просто, и если у вас есть сомнения, вы можете Прочитайте документацию Анкет

Теперь мы должны создать новый трубопровод. Первая часть — создание приложения

- 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'

Код довольно простой:

1. Мы устанавливаем узел на агент
2. Мы устанавливаем угловой CLI
3. Мы устанавливаем пакеты NPM
4. Мы строим угловое применение
5. Мы застегливываем файлы
6. Мы публикуем 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 -файл и публикуем его в Azure App Service с задачей Deploy Zip.

Полный код проекта — размещен на GitHub Анкет Если вы заинтересованы только кодом конвейера Azure, Вы можете прочитать это там Анкет

Оригинал: «https://dev.to/mcklmt/build-and-deploy-angular-app-with-azure-devops-3nnf»