Azure DevOps 搭配 YAML 實現 CI 的設定方式

2025-06-20

筆記如何設定 Azure DevOps 的 CI 流程，使用 Nodejs 搭配 Vite 的專案為例。

logo

說明

# Node.js with Vue
# Build a Node.js project that uses Vue with Yarn.

trigger:
- staging

pool:
  name: default # Which user agent pool to use

# Install Node.js and specify the version to use.
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js 18.x'

# It's a good practice to install Yarn itself if the agent doesn't have it.
- script: npm install -g yarn
  displayName: 'Install Yarn'
  
- script:
    yarn install
  displayName: 'Run yarn install'
  workingDirectory: 'src/MyVite.Web' # Set working directory for this project

# Important ! install and build must in seperate steps
- script:
    yarn build
  displayName: 'Run yarn build'
  workingDirectory: 'src/MyVite.Web' # Set working directory for this project

# Publish the build output as an artifact for the release pipeline
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: drop'
  inputs:
    PathtoPublish: '$(Build.SourcesDirectory)/src/MyVite.Web/dist' # Absolute path to the build output
    ArtifactName: 'drop' # The name of the artifact for the release pipeline
    publishLocation: 'Container' # Standard location for artifacts in Azure Pipelines

如果要在管線內直接部署至 Azure Static Web Apps，如果 Build Machine Image 是 Linux 可以直接使用 Azure Static Web App 的 Task

- task: AzureStaticWebApp@0
  inputs:
    app_location: 'src/MyVite.Web'
    api_location: 'src/MyVite.Web/api'
    output_location: 'src/MyVite.Web/dist'
    azure_static_web_apps_api_token: $(deployment_token)

否則可以透過 Static Web Apps CLI 來部署，但在安裝上有一些前置需求

  • Build Machine 必須要安裝 Python
  • Build Tools 必須包含 Desktop development with C++ workload
  - task: UsePythonVersion@0
    inputs:
      versionSpec: "3.13.5"
      addToPath: true
    displayName: "Install Python"

  - script: |
    yarn add @azure/static-web-apps-cli
    displayName: "Install Azure SWA CLI"

  - script: |
    npx @azure/static-web-apps-cli deploy ./src/MyVite.Web/dist --deployment-token $(deployKey)
    displayName: "Deploy to Azure Static Web Apps"
#Blog