Azure Pipelines を使用して継続的インテグレーションと継続的配置を実装する

[アーティクル]
03/21/2023

Azure Pipelines は、Azure DevOps のビルドとリリース機能の新しいバージョンです。

この記事では、SharePoint Framework のビルド、単体テスト、配置を自動化するための継続的インテグレーションと継続的配置を使用した Azure Pipelines 環境のセットアップに関係する手順を説明します。

Azure Multi-stage Pipelines と Azure DevOps のビルドおよびリリースのどちらかを選択する

現在、継続的インテグレーションと Azure DevOps での展開を実装するには、次の 2 つのアプローチがあります。 Azure のビルドとリリースは歴史的なもので、グラフィカルなエディションのエクスペリエンスを特徴とし、ユーザーには表示されない JSON ドキュメントに定義を保存します。

Azure Multi-stage Pipelines は、透過的、バージョン履歴、再現性のあるリポジトリの YAML ファイルとして保存されているパイプライン定義に依存します。どちらのアプローチも、SharePoint フレームワークのために記述されています。

Azure ビルドとリリース
Azure Multi-stage Pipelines (この記事)

継続的インテグレーションと継続的テストの実装

継続的インテグレーションと継続的テストのステージは、以下の YAML テンプレートで記述します。プロジェクトのルートにある azure-pipelines-build-template.yml という名前の新しいファイルにある、以下のコンテンツをコピーします。

parameters:
  name: ''
jobs:
  - job: ${{ parameters.name }}
    pool:
      vmImage: 'ubuntu-latest'
      demands:
      - npm
      - node.js
      - java
    variables:
      npm_config_cache: $(Pipeline.Workspace)/.npm

    steps:
      - checkout: self

      - task: NodeTool@0
        displayName: 'Use Node 10.x'
        inputs:
          versionSpec: 10.x
          checkLatest: true

      - task: CacheBeta@1
        inputs:
          key: npm | $(Agent.OS) | package-lock.json
          path: $(npm_config_cache)
          cacheHitVar: CACHE_RESTORED
      - script: npm ci
        displayName: 'npm ci'

      - task: Gulp@0
        displayName: 'Bundle project'
        inputs:
          targets: bundle
          arguments: '--ship'

      - script: npm test
        displayName: 'npm test'

      - task: PublishTestResults@2
        displayName: Publish test results
        inputs:
          testResultsFormat: JUnit
          testResultsFiles: '**/junit.xml'
          #failTaskOnFailedTests: true #if we want to fail the build on failed unit tests

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

      - task: Gulp@0
        displayName: 'Package Solution'
        inputs:
          targets: 'package-solution'
          arguments: '--ship'

      - task: CopyFiles@2
        displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
        inputs:
          Contents: |
            sharepoint/**/*.sppkg
          TargetFolder: '$(Build.ArtifactStagingDirectory)'

      - task: PublishBuildArtifacts@1
        displayName: 'Publish Artifact: drop'

注:

単体テストを実装していない場合や単体テストを実行したくない場合には、PublishCodeCoverageResults、PublishTestResults、npm テスト タスクをコメントアウトしたり、削除したりすることができます。

注:

このファイルの最新バージョンは、サンプルで入手することができます

継続的配置の実装

継続的配置のステージは、次の YAML テンプレートで記述されています。プロジェクトのルートにある azure-pipelines-deploy-template.yml という名前の新しいファイルにある、以下のコンテンツをコピーします。

parameters:
  # unique name of the job
  job_name: deploy_sppkg
  # friendly name of the job
  display_name: Upload & deploy *.sppkg to SharePoint app catalog
  # name of target environment deploying to
  target_environment: ''
  # app catalog scope (tenant|sitecollection)
  m365cli_app_catalog_scope: 'tenant'
  variable_group_name: ''
jobs:
- deployment: ${{ parameters.job_name }}
  displayName: ${{ parameters.display_name }}
  pool:
    vmImage: 'ubuntu-latest'
  environment: ${{ parameters.target_environment }}
  variables:
  - group: ${{parameters.variable_group_name}} #m365_user_login, m365_user_password, m365_app_catalog_site_url
  strategy:
    runOnce:
      deploy:
        steps:
        - checkout: none
        - download: current
          artifact: drop
          patterns: '**/*.sppkg'
        - script: sudo npm install --global @pnp/cli-microsoft365
          displayName: Install CLI for Microsoft365
        - script: m365 login $(m365_app_catalog_site_url) --authType password --userName $(m365_user_login) --password $(m365_user_password)
          displayName: Login to Microsoft 365
        - script: |
            CMD_GET_SPPKG_NAME=$(find $(Pipeline.Workspace)/drop -name '*.sppkg' -exec basename {} \;)
            echo "##vso[task.setvariable variable=SpPkgFileName;isOutput=true]${CMD_GET_SPPKG_NAME}"
          displayName: Get generated *.sppkg filename
          name: GetSharePointPackage
        - script: m365 spo app add --filePath "$(Pipeline.Workspace)/drop/sharepoint/solution/$(GetSharePointPackage.SpPkgFileName)" --appCatalogUrl $(m365_app_catalog_site_url) --scope ${{ parameters.m365cli_app_catalog_scope }} --overwrite
          displayName: Upload SharePoint package to Site Collection App Catalog
        - script: m365 spo app deploy --name $(GetSharePointPackage.SpPkgFileName) --appCatalogUrl $(m365_app_catalog_site_url) --scope ${{ parameters.m365cli_app_catalog_scope }}
          displayName: Deploy SharePoint package

注:

このファイルの最新バージョンは、サンプルで入手することができます

パイプライン構造の定義

ビルドと展開のステージがそれぞれのテンプレートで定義されているので、複数ステージパイプラインとして組み立てる必要があります。このドキュメントでは、パイプラインの構造と、さまざまな使用環境について説明します。プロジェクトのルートにある azure-pipelines.yml という名前の新しいファイルにある、以下のコンテンツをコピーします。

name: $(TeamProject)_$(BuildDefinitionName)_$(SourceBranchName)_$(Date:yyyyMMdd)$(Rev:.r)
resources:
- repo: self

trigger:
  branches:
    include:
    - master
    - develop

stages:
- stage: build
  displayName: build
  jobs:
    - template: ./azure-pipelines-build-template.yml
      parameters:
        name: 'buildsolution'
- stage: 'deployqa'
  # uncomment if you want deployments to occur only for a specific branch
  #condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/develop'))
  jobs:
    - template: ./azure-pipelines-deploy-template.yml
      parameters:
        job_name: deploy_solution
        target_environment: 'qa'
        variable_group_name: qa_configuration

注:

このファイルの最新バージョンは、サンプルで入手することができます

注:

deployqa ステージを複製し、異なるパラメータを指定することで、複数の環境を定義することができます。これを行う場合には、ステージ名、ジョブ名、ターゲット環境、変数グループ名が一意であることをご確認ください。

注:

条件を活用して、さまざまな環境に条件付きで展開することができます。

環境の資格情報の構成

シークレットは、セキュリティ上の理由から、絶対にリポジトリにコミットしないでください。前の手順で説明したパイプラインでは、変数グループを使用して構成値を秘密にしています。変数グループは環境ごとに作成する必要があり、名前はパイプライン定義 (ここでは qa_configuration) に記載されているものに一致する必要があります。変数グループを作成するには、次の手順を実行します。

Azure DevOps にサインインし、プロジェクトに移動します
[パイプライン] にある [ライブラリ] を選択します
新しい変数グループを追加し、名前がパイプライン定義で定義されているものに一致することを確認します
次の変数をグループに追加し、[保存] を選択します
- m365_user_login: SharePoint テナント管理者のユーザーログイン
- m365_user_password: アカウントのユーザーパスワード
- m365_app_catalog_site_url: アプリカタログサイトコレクションの URL

注:

変数値入力の横にある [ロックパッド] アイコンを選択すると、その値を重要なものとしてマークし、Azure DevOps で他のユーザーやログに対して値を非表示にすることができます。

Azure Pipelines を使用して継続的インテグレーションと継続的配置を実装する

Azure Multi-stage Pipelines と Azure DevOps のビルドおよびリリースのどちらかを選択する

継続的インテグレーションと継続的テストの実装

継続的配置の実装

パイプライン構造の定義

環境の資格情報の構成

その他のリソース