Azure Devops 設定 .NetCore 和 Vue CI/CD Deploy 至 Azure App Service

Devops > Azure Azure .NetCore Vue

發布時間 : 2022-04-09 23:38

字數:951 觀看數 :

評論:

前言
目標
.Net Core 專案前置作業
設定 .Net Core 專案 azure-pipelines.yml
Vue 專案前置作業
設定 Vue 專案 azure-pipelines.yml
設定 Azure Devops Pipeline (CI流程)
設定 Azure Devops Pipeline Releases (CD流程)
建立完成後確認 Pipelines、Releases 是否正常

前言

本篇記錄透過 Azure Devops Pipeline Deploy .NetCore 和 Vue 的專案

目標

當專案指定的分支有異動時，透過Azure Devops Pipeline 自動 Deploy 至 Azure App Service
區分不同環境的設定值

.Net Core 專案前置作業

預先設定好 Azure App Service
預先準備好 .Net Core 專案
確認 *.csproj 相同路徑下含有 appsettings.dev.json、appsettings.prod.json
確認 *.sln 相同路徑下含有 azure-pipelines.yml
確認分支含有 master、DEV
可參考 .NetCore3.1 範例專案

設定 .Net Core 專案 azure-pipelines.yml

.Net Core 區分不同環境是透過環境變數 ASPNETCORE_ENVIRONMENT 來區分
master 分支指定 ASPNETCORE_ENVIRONMENT = prod 則會吃到 appsettings.prod.json 的設定
DEV 分支指定 ASPNETCORE_ENVIRONMENT = dev 則會吃到 appsettings.dev.json 的設定

# ASP.NET Core (.NET Framework)
# Build and test ASP.NET Core projects targeting the full .NET Framework.
# Add steps that publish symbols, save build artifacts, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/dotnet-core

trigger:
- master
- DEV

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

  ${{if contains(variables['Build.SourceBranchName'], 'master')}}:
      EnvironmentName: 'prod'
  ${{if contains(variables['Build.SourceBranchName'], 'DEV')}}:
      EnvironmentName: 'dev'


steps:
- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      [Environment]::SetEnvironmentVariable("ASPNETCORE_ENVIRONMENT", "$(EnvironmentName)", "Machine")
- task: DotNetCoreCLI@2
  displayName: Restore
  inputs:
    command: restore
    projects: '$(solution)'

- task: DotNetCoreCLI@2
  displayName: Build
  inputs:
    projects: '$(solution)'
    arguments: '--configuration $(BuildConfiguration)'

- task: DotNetCoreCLI@2
  displayName: Publish
  inputs:
    command: publish
    publishWebProjects: True
    arguments: '--configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory) '

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact'
  inputs:
    PathtoPublish: '$(build.artifactstagingdirectory)'

Vue 專案前置作業

預先設定好 Azure App Service
預先準備好 Vue 專案
確認package.json 相同路徑下含有 .env.dev、.env.prod檔案、azure-pipelines.yml
package.json 設定 build-dev 、 build-prod
確認package.json 相同路徑下含有 azure-pipelines.yml
確認分支含有 master、DEV
可參考 Vue 2 範例專案

設定 Vue 專案 azure-pipelines.yml

Vue 區分不同環境設定可透過 vue-cli-service build –mode ${env}
master 分支指定 env = prod 則會吃到 .env.prod 的設定
DEV 分支指定 env = dev 則會吃到 .env.dev 的設定

# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- master
- DEV

pool:
  vmImage: vs2017-win2016

variables:
  ${{if contains(variables['Build.SourceBranchName'], 'master')}}:
      Temp_Env: 'prod'
  ${{if contains(variables['Build.SourceBranchName'], 'DEV')}}:
      Temp_Env: 'dev'

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- task: Npm@1
  displayName: 'npm build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build-$(Temp_Env)'

- task: ArchiveFiles@2
  displayName: Archive
  inputs:
    rootFolderOrFile: '$(build.sourcesDirectory)/dist'
    includeRootFolder: false
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.SourceVersion)_$(Build.BuildId).zip'


- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: build'
  inputs:
    ArtifactName: build