Azure DevOps を使用して継続的インテグレーションと継続的配置を実装するImplement Continuous Integration and Continuous deployment using Azure DevOps

Azure DevOps (Visual Studio Team Services / Team Foundation Server) には、開発者が開発プロジェクト用に DevOps、継続的インテグレーション、継続的配置を実装するのを支援する一連のツールとサービスが備わっています。Azure DevOps (Visual Studio Team Services / Team Foundation Server) consists of a set of tools and services that help developers implement DevOps, Continuous Integration, and Continuous Deployment processes for their development projects.

この記事では、SharePoint Framework のビルド、単体テスト、配置を自動化するための継続的インテグレーションと継続的配置を使用した Azure DevOps 環境のセットアップに関係する手順を説明します。This article explains the steps involved in setting up your Azure DevOps environment with Continuous Integration and Continuous Deployment to automate your SharePoint Framework builds, unit tests, and deployment.

継続的インテグレーションContinuous Integration

開発者は継続的インテグレーション (CI) を使用すると、単体テストを使用したビルドの検証や、新しいコード変更を送信するたびにソリューションをパッケージ化する処理を自動化することによって、共有リポジトリにコードを統合できます。Continuous Integration (CI) helps developers integrate code into a shared repository by automatically verifying the build using unit tests and packaging the solution each time new code changes are submitted.

SharePoint Framework を使用した継続的インテグレーション向けに Azure DevOps をセットアップするには、次の手順を実行する必要があります。Setting up Azure DevOps for Continuous Integration with a SharePoint Framework solution requires the following steps:

  1. ビルド定義の作成Creating the Build Definition
  2. NodeJS のインストールInstalling NodeJS
  3. 依存関係の復元Restoring dependencies
  4. 単体テストの実行Executing Unit Tests
  5. テスト結果のインポートImporting test results
  6. コード カバレッジ情報のインポートImporting code coverage information
  7. ソリューションのバンドルBundling the solution
  8. ソリューションのパッケージ化Packaging the solution
  9. 成果物の準備Preparing the artifacts
  10. 成果物の発行Publishing the artifacts

ビルド定義の作成Creating the Build Definition

ビルド定義には、その名前が示すとおり、ビルドのためのすべての定義と構成が含まれます。The Build Definition, as its name suggests, includes all the definitions and their configurations for the build. 継続的インテグレーションのセットアップを開始するには、まず、新しいビルド定義を作成し、それをリポジトリにリンクします。Start setting up your Continuous Integration by creating a new build definition and link it to your repository. リポジトリへのビルド定義のリンクlinking the build definition to the repository

注意

ビルド定義は、プロセス テンプレートとして記述することができます。Build definitions can be described as a process template. それは、ビルドがトリガーされるたびにソース コード上で次々に実行されることになる構成済みタスクの集合です。It is a set of configured tasks that will be executed one after another on the source code every time a build is triggered. 複数のタスクをフェーズでグループ化することができます。既定では、1 つのビルド定義には少なくとも 1 つのフェーズが含まれます。Tasks can be grouped in phases, by default a build definition contains at least one phase. フェーズ名の隣にある大きなプラス記号をクリックすると、新しいタスクをフェーズに追加できます。You can add new tasks to the phase by clicking on the big plus sign next to the phase name.

NodeJS バージョン 10 のインストールInstalling NodeJS version 10

ビルド定義を作成したら、最初に NodeJS をインストールする必要があります。Once the Build Definition has been created, the first thing you need to do is install NodeJS. SharePoint Framework はバージョン 10 に依存しているため、必ずバージョン 10 をインストールしてください。Make sure to install version 10, as SharePoint Framework depends on it. Node 10 のインストールinstalling node 10

注意

10.xVersion Spec フィールドで指定してください。Make sure you specify 10.x in the Version Spec field. プロジェクトが SharePoint Framework 1.7.1 以前に基づいている場合は、バージョン 8.x を使用します。If your project is based on SharePoint Framework 1.7.1 or earlier, use version 8.x.

依存関係の復元Restoring dependencies

サード パーティの依存関係はソース管理に格納されないため、プロジェクトのビルドを開始する前に依存関係を復元する必要があります。Because third party dependencies are not stored in the source control, you need to restore those before starting to build the project. そのためには、npm タスクを追加し、コマンドを install に設定します。To do so add a npm task and set the command to install. 依存関係のインストールinstalling dependencies

単体テストの実行Executing Unit Tests

SharePoint Framework は既定値 (1.8.0以降) によるテスト フレームワークは提供せず、このサンプルで Jest を活用します。The SharePoint Framework does not provide a testing framework by default (since 1.8.0), we will leverage Jest with this sample. これらのモジュールは後の手順でインストールされ、可能性のある問題や不具合に関するフィードバックを可能な限り早急に取得するため、少なくともご使用のコードのビジネス ロジックのテストを実行することをぜひお勧めします。These modules will be installed in a later step and it is highly recommended at a minimum to test the business logic of your code to get feedback on any potential issues or regressions as soon as possible. Azure DevOps で単体テストを実行するには、npm タスクを追加します。To have Azure DevOps execute your unit tests, add a npm task. commandcustomcustom command フィールドに設定し、testと入力します。Set the command to custom and custom command field, enter test. それからWorking Directory オプションを$(Build.SourcesDirectory)に設定します。Then set the Working Directory option to $(Build.SourcesDirectory).

単体テストの実行

Jest の構成Configuring Jest

既定値では、SharePoint Framework プロジェクトには Framework のテストは含まれていません。By default SharePoint Framework projects does not include a testing Framework. このサンプルでJestを活用します。We will leverage Jest in this sample.

npm i jest jest-junit @voitanos/jest-preset-spfx-react16 -D

注意

SharePoint Framework 1.7.1 以前で生成されたプロジェクトは React バージョン 15 に依存します。Projects generated on SharePoint Framework 1.7.1 and earlier rely on React version 15. React 15 を使用している場合は、代わりに @voitanos/jest-preset-spfx-react15 をインストールする必要があります。If you are using React 15, you need to install @voitanos/jest-preset-spfx-react15 instead. 他の Framework (Knockout、...) の場合は、代わりに別のプリセットのインストールが必要になる場合があります。For other Frameworks (Knockout, ...) you might need to install a different preset instead.

Jest を設定することも必要です。この設定を行うには、config/jest.config.json ファイルを作成し、以下のコンテンツを追加します。You also need to configure Jest, to do so create a file config/jest.config.json and add the following content.

{
  "preset": "@voitanos/jest-preset-spfx-react16",
  "rootDir": "../src",
  "coverageReporters": [
    "text",
    "json",
    "lcov",
    "text-summary",
    "cobertura"
  ],
  "reporters": [
    "default",
    ["jest-junit", {
      "suiteName": "jest tests",
      "outputDirectory": "temp/test/junit",
      "outputName": "junit.xml"
    }]
  ]
}

コマンドを入力する場合、Jest を活用するにはプロジェクトを構成することも必要です。You also need to configure your project to leverage jest when typing commands. この構成を行うには、package.jsonファイルを作成し、これら2つのscriptsを次の値で追加/置換します。To do so edit the package.json file and add/replace these two scripts with the following values:

    "test": "./node_modules/.bin/jest --config ./config/jest.config.json",
    "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"

単体テストの作成Writing a unit test

最初の単体テストを作成するには、新しいファイルを作成src/webparts/webPartName/tests/webPartName.spec.ts し、次の内容を追加します。To write your first unit test, create a new file src/webparts/webPartName/tests/webPartName.spec.ts and add the following content:

import 'jest'

describe("webPartName", () => {
  test("should add numbers Sync fluent", () => {
    const result = 1 + 3;
    expect(result).toBe(4); // fluent API
  });
});

注意

Jest を使用して単体テストを作成するにはここを参照してください。You can learn more about writing unit tests using Jest and Chai here. Jest と Enzyme を使用したリアクション アプリケーションのテストの詳細については、ここを参照してください (セットアップ パートは無視できます)。You can learn more about testing react applications with Jest and Enzyme here (you can ignore the setup part).

テスト結果のインポートImporting test results

ビルド結果に添付されたテスト結果の情報を取得するには、テスト ランナーからのテスト結果を Azure DevOps へインポートする必要があります。 In order to get test results information attached with the build results, you need to import these test results from the test runner into Azure DevOps. このためには、新しいPublish Test Results タスクを追加します。To do so, add a new Publish Test Results task. Test results filesフィールドを**/junit.xmlに、Search folder$(Build.SourcesDirectory)に設定します。Set the Test results files field to **/junit.xml and the Search folder to $(Build.SourcesDirectory).
テスト結果のインポートimporting test results

コード カバレッジ情報のインポートImporting code coverage information

コード カバレッジがビルドの状態と一緒にレポートされるようにするには、その情報をインポートするためのタスクを追加する必要があります。In order to get code coverage reported with the build status you need to add a task to import that information. コード カバレッジ情報を構成するには、publish code coverage results タスクを追加します。To configure the code coverage information, add the publish code coverage results tasks. ツールを Cobertura に、Summary files$(Build.SourcesDirectory)/**/*-coverage.xml にそれぞれ設定してください。Make sure you set the tool to Cobertura, Summary files to $(Build.SourcesDirectory)/**/*-coverage.xml and to .

カバレッジ情報のインポート

ソリューションのバンドルBundling the solution

Web ブラウザーが認識できる静的アセットを取得するには、最初にソリューションをバンドルする必要があります。You first need to bundle your solution in order to get static assets that can be understood by a web browser. もう 1 つの gulp タスクを追加し、gulpfile パスを設定します。また、Gulp Tasks フィールドを bundle に設定し、--shipArguments に追加します。Add another gulp task, set the gulpfile path, set the Gulp Tasks field to bundle and add --ship in the Arguments. アセットのバンドルbundling the assets

ソリューションのパッケージ化Packaging the solution

静的アセットを取得できたので、次の手順として、SharePoint が配置できるパッケージにそれらのアセットを結合します。Now that you have static assets, the next step is to combine the assets into a package SharePoint will be able to deploy. もう 1 つの gulp タスクを追加し、gulpfile パスを設定します。また、Gulp Tasks フィールドを package-solution に設定し、--shipArguments に追加します。Add another gulp task, set the gulpfile path, set the Gulp Tasks field to package-solution and add --ship in the Arguments.

ソリューションのパッケージ化

成果物の準備Preparing the artifacts

既定で、Azure DevOps ビルドでは、ファイルはまったく保持されません。By default, an Azure DevOps build does not retain any files. リリースに必要なファイルを確実に保持するには、保持するファイルを明示的に指示する必要があります。To ensure that the required files needed for the release are retained, you need to explicitly indicate which files should be kept.
Copy Files タスクを追加し、Contents**\*.sppkg (前のタスクで作成された SharePoint パッケージ) に、ターゲット フォルダーを $(build.artifactstagingdirectory)/drop にそれぞれ設定します。Add a Copy Files task and set the Contents to **\*.sppkg (the SharePoint Package created with the previous task) and the target folder to $(build.artifactstagingdirectory)/drop.

成果物の取得

成果物の発行Publishing the artifacts

この時点で、配置に必要なすべてのファイルが特別な成果物フォルダーに収集されました。次に、Azure DevOps に対して、ビルドの実行後にもこれらのファイルを保持するよう指示する必要があります。Now that you have collected all the files needed for deployment in a special artifacts folder, you still need to instruct Azure DevOps to keep these files after the execution of the build. そのためには、Publish artifacts タスクを追加し、Path to publish$(build.artifactstagingdirectory)/drop に、Artifact namedrop にそれぞれ設定します。To do so add a Publish artifacts task and set the Path to publish to $(build.artifactstagingdirectory)/drop and the Artifact name to drop. 成果物の発行publishing the artifacts

継続的配置Continuous Deployment

継続的配置 (CD) では、ビルド プロセスから検証済みコード パッケージを取得して、それをステージング環境または運用環境に配置します。Continuous Deployment (CD) takes validated code packages from build process and deploys them into a staging or production environment. 開発者は、配置が成功したかどうかを追跡して、特定のパッケージ バージョンに問題を絞り込むことができます。Developers can track which deployments were successful or not and narrow down issues to specific package versions.

SharePoint Framework ソリューションを伴う継続的配置向けに Azure DevOps をセットアップするには、次の手順を実行する必要があります。Setting up Azure DevOps for Continuous Deployments with a SharePoint Framework solution requires the following steps:

  1. リリース定義の作成Creating the Release Definition
  2. ビルド成果物のリンクLinking the Build Artifact
  3. 環境の作成Creating the Environment
  4. NodeJS のインストールInstalling NodeJS
  5. Office 365 CLI のインストールInstalling the Office 365 CLI
  6. アプリ カタログへの接続Connecting to the App Catalog
  7. アプリ カタログへのソリューション パッケージの追加Adding the Solution Package to the App Catalog
  8. アプリケーションの配置Deploying the Application
  9. 環境用変数の設定Setting the Variables for the Environment

リリース定義の作成Creating the Release Definition

最初に空のテンプレートを使用して、新しいリリース定義を作成します。Start by creating a new Release Definition with an empty template. リリース定義は、次に示す配置用の要素を識別するために使用するプロセスです。A Release Definition is a process that is used to identify the following elements for the deployment:

  • 環境Environment
  • 配置タスクDeployment tasks
  • ビルド成果物Build artifacts

リリース定義の作成

ビルド成果物のリンクLinking the Build Artifact

Add an artifact をクリックし、作成済みのビルド定義を選択します。Click on Add an artifact and select the build definition you previously created. 後続のタスクで使用することになるので、設定した Source Alias の名前をメモします。Write down the Source Alias name you set, as you will need to use it in subsequent tasks.

成果物のリンク

環境の作成Creating the Environment

継続的配置環境を作成する場合、名前を指定し、配置前承認や成果物フィルター (つまり、ビルドが特定のブランチに基づいている場合にのみ配置する) などの構成を行えます。その場合には、環境ボックスの周囲にあるボタンをクリックするか、タイトルを直接クリックします。When you create your continuous deployment environment, you can give a name and configure pre-deployment approvals, artifact filters (i.e. deploy only if the build comes from this or that branch), and much more by clicking on the buttons around the environment box or directly on the title.

環境の作成

NodeJS のインストールInstalling NodeJS

1 job, 0 tasks をクリックすると、ビルド定義と同様に機能するタスク構成ビューにアクセスできます。By click on 1 job, 0 tasks you can access the tasks configuration view, which works similarly to the build definition. このビューでは、特定の環境でのみ実行するタスク セットを選択できます。Here, you can select the set of tasks that will run only for this specific environment. それには、NodeJS バージョン 10 以降のインストールも含まれます。This includes installing NodeJS version 10 or later. Node tool installer タスクを追加し、10.XVersion Spec フィールドで定義します。Add a Node tool installer task and define 10.X in the Version Spec field. プロジェクトが SharePoint Framework バージョン 1.7.1 以前に基づいている場合は、バージョン 8.X を使用します。If your project is based on SharePoint Framework version 1.7.1 or earlier, use version 8.X.

Node 10 のインストール

Office 365 CLI のインストールInstalling the Office 365 CLI

Office 365 共通言語インターフェイス (CLI) は OfficeDev PnP コミュニティが構築したオープン ソース プロジェクトです。The Office 365 Common Language Interface (CLI) is an open source project built by the OfficeDev PnP Community. リリース定義の一部として CLI を活用するには、最初にインストールすることが必要です。In order to leverage the CLI as part of your Release Definition, you first need to install it. インストールすると、配置を扱うコマンドを利用できるようになります。Then, you will be able to take advantage of commands available to handle deployment. npm タスクを追加し、Custom コマンドを選択して、install -g @pnp/office365-cliCommand and Arguments フィールドに入力します。Add a npm task, select a Custom command and type install -g @pnp/office365-cli in the Command and Arguments field.

Office 365 CLI のインストール

注意

Office 365 CLI の詳細をご確認くださいLearn more about the Office 365 CLI

SharePoint Online への接続Connecting to SharePoint Online

配置環境でアプリ カタログを使用するには、その前にテナントのアプリ カタログに照らして認証する必要があります。Before using the App Catalog in your deployment environment, you first need to authenticate against the App Catalog of your tenant. そのためには、Command Line タスクを追加し、以下のコマンドを script フィールドに貼り付けてo365 login -t password -u $(username) -p $(password) アプリ カタログに接続します。To do so, add a Command Line task and paste in the following command into the script field o365 login -t password -u $(username) -p $(password) connecting to the app catalog

注意

Office CLI を使用して初めてテナントに接続する場合は、まずアカウントで対話型ログオンを実行する必要があります。If you are using Office CLI to connect to your tenant for the first time, you need to perform an interactive logon with the account first. アカウントに代わってテナントにアクセスする Office CLI で使われる PnP Office 365 管理シェル アプリケーションへのアクセスを許可するには、これが必要となります。This is required to grant access to PnP Office 365 Management Shell application which is used by Office CLI to access your tenant on the account's behalf. これを行わない場合、非対話的なログオンに失敗します。Your task will otherwise fail to logon non-interactively. Office 365 CLI ユーザー ガイドで提供される詳細Details available on Office 365 CLI User Guide

アプリ カタログへのソリューション パッケージの追加Adding the Solution Package to the App Catalog

ソリューション パッケージをアプリ カタログにアップロードします。そのためには、別の Command Line タスクを追加し、以下のコマンド ラインを Script フィールドに貼り付けます。o365 spo app add -p $(System.DefaultWorkingDirectory)/SpFxDevOps/drop/SharePoint/solution/sp-fx-devops.sppkg --overwriteUpload the solution package to your App Catalog by adding another Command Line task and pasting the following command line in the Script field o365 spo app add -p $(System.DefaultWorkingDirectory)/SpFxDevOps/drop/SharePoint/solution/sp-fx-devops.sppkg --overwrite

注意

パッケージのパスは、ご使用のソリューション名や (プロジェクト構成を確認してください)、以前に定義した Source Alias によって異なります。一致していることを確認してください。The path of the package depends on your solution name (see your project configuration) as well as the Source Alias you defined earlier, make sure they match.

注意

--appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope site を追加することで、サイト コレクション アプリ カタログにソリューションをアップロードできます。You can upload a solution to a site collection app catalog by adding --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope site

カタログへのパッケージのアップロード

アプリケーションの配置Deploying the Application

セットアップの最後の手順では、アプリケーションをアプリ カタログに配置し、対象テナント内のすべてのサイト コレクションで最新バージョンとして利用できるようにします。The final step in the setup is to deploy the application to the App Catalog to make it available to all site collections within the tenant as its latest version. 別の Command Line タスクを追加して、Script フィールドにコマンド ライン o365 spo app deploy --name sp-fx-devops.sppkg を貼り付けますAdd another Command Line task and paste the following command line in the Script field o365 spo app deploy --name sp-fx-devops.sppkg

注意

パッケージ名を更新してください。Make sure you update the package name.

注意

--appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope site を追加することで、サイト コレクション アプリ カタログからソリューションを展開できます。You can deploy a solution from a site collection app catalog by adding --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope site

カタログへのパッケージの配置

環境用変数の設定Setting the Variables for the Environment

最後の手順で構成したタスクは、Azure DevOps プロセス変数 ($(variableName) 構文で簡単に識別できます) に依存しています。The tasks you configured in the last step rely on Azure DevOps process variables (easily identified with the $(variableName) syntax). ビルド定義を実行するには、その前にそれらの変数を定義しておく必要があります。You need to define those variables before being able to run the build definition. そのためには、[Variables] タブをクリックします。To do so, click on the Variables tab.
次の変数を追加しますAdd the following variables | 名前Name | Value | | ------ | ------ | | catalogsitecatalogsite | 省略可能です。Optional. サイト コレクション アプリ カタログにアップロードする場合のアプリ カタログ サイトのサーバー相対パス (例: sites/appcatalog)Server relative Path of the App Catalog Site eg sites/appcatalog when uploading to a site collection App Catalog | | passwordpassword | テナントで管理者アクセス許可を持つユーザーのパスワード。他のユーザーに対してマスクするため、ロックパッドを必ず有効にしてくださいPassword of the user with administrative permissions on the tenant, do not forget to check the lockpad to mask it to other users | | usernameusername | テナントで管理者アクセス許可を持つユーザーのユーザー名Username of the user with administrative permissions on the tenant | | tenanttenant | 省略可能です。Optional. サイト コレクション アプリ カタログにアップロードする場合の https://tenant.sharepoint.com のテナント名 (例: tenant)Tenant name in https://tenant.sharepoint.com eg tenant when uploading to a site collection App Catalog |

変数のセットアップ

注意

リリース定義を保存してください。Make sure you save your release definition.

テストTesting

新しく作成した継続的配置プロセスをテストするには、Azure DevOps の [Builds] セクションに戻り、ビルド定義を選択して [Queue] をクリックします。To test your newly created Continuous Deployment process, return to the Builds section in Azure DevOps, select your build definition and click on Queue. ブランチを選択して、[Queue] をクリックします。Select your branch and click on Queue. 新しいビルドが作成され、ビルドが開始されます。A new build will be created and will start building.

ビルドのキュー登録

数分でビルドが完了し、次のような結果ページが表示されます。After a couple of minutes, your build should complete and show a result page like this one.

ビルドの結果

Azure DevOps の [Release] セクションに移動すると、新しいリリースが自動的に開始されているはずです。If you navigate to the Release section of Azure DevOps, a new release should have started automatically. 数分後にリリースが完了し、SharePoint Framework ソリューションが対象テナントに配置されます。After a few minutes your release should complete, and your SharePoint Framework solution is deployed to your tenant.

リリースの結果

Azure DevOps で SharePoint Framework ソリューション向けの DevOps パイプラインがセットアップされ、シナリオに合わせてさらにカスタマイズできるようになります。Your DevOps pipeline for your SharePoint Framework solution in Azure DevOps is now set up and ready to be customized further to your scenario.

関連項目See Also