Azure DevOpsの拡張機能を自作する -Hello World編-
Azure DevOps の拡張機能を自作する機運が高まってきたので色々調べながらとりあえず Hello World まで到達したので、その手順を備忘録として残しておきます。 なお、ここで記載している内容は2020年3月28日時点の以下のページに記載されている手順に則っています。 このページは英語で書かれていますが、一通りの手順を実施することで全く知識が無くても Hello World に到達できるようになっています。
なお、今回作成するのは以下のように Azure Repos にMy Hub
というメニューを追加して、ログインユーザー名を表示する画面を追加します。
環境構築
Azure DevOpsに自分自身がownerになるorganizationを作る
Azure DevOps では拡張機能を自身が所属する organization にインストールするには権限が必要です。 最も手っ取り早いのは個人用の organization を作成することです。
会社で Azure DevOps を使用していて拡張機能をインストールする権限を持っていない場合、organization の owner に権限を与えてもらうか、owner 自身に拡張機能のインストールを依頼する必要があります。
拡張機能を作成するための環境を構築する
- Node.jsをインストールする
- Azure DevOps用の拡張機能パッケージツール(TFX)をインストールする
以下から Node.js をインストールします。とりあえず LTS をインストールしておけば問題ありません。
Node.js をインストールしたら、TFX はコマンドプロンプトから以下のコマンドを実行することでインストールできます。
npm install -g tfx-cli
拡張機能を公開するためのPublisherを作成する
Azure DevOps のすべての拡張機能はパブリッシャーによって提供されます。 Marketplace で公開されているものだけでなく、自作して個人や特定の organization 内だけで使用するものについても同様です。
Publisher を作成するタイミングは拡張機能を作ってからでもいいのですが、ここで入力した以下の情報を拡張機能のマニフェストファイルに埋め込む必要があるので先に作っておいたほうが楽ちんです。
- ID
Publisher を作成するには以下の URL から必要な情報を入力します。
https://aka.ms/vsmarketplace-manage
なお、この手順の詳細は以下のページのほうがわかりやすいので、わからない場合はこちらを参照してください。
拡張機能を作る
基本的に以下の手順に従えば拡張機能を作成することができます。
ここではざっくり手順を紹介していきます。
- 拡張機能を作成するためのフォルダを作成する。場所はどこでもいい。
- npm パッケージマニフェストを初期化する。上記で作成したディレクトリで
npm init -y
コマンドを実行する。 - Microsoft VSS Web Extension SDK パッケージをインストールする。
npm install vss-web-extension-sdk --save
コマンドを実行する。 - 手順1.で作成したフォルダに
vss-extension.json
1ファイルを追加する。ファイルの内容は上記 URL の 4. を参照してください。 - Publisher 作成時に入力した
ID
をvss-extension.json
のpublisher
に記載する。 - 今回追加する画面の
my-hub.html
ファイルを追加する。こちらも、ファイルの内容は上記 URL の 5. を参照してください。 - 手順1. で作成したディレクトリで
tfx extension create
を実行する。
=== Completed operation: create extension ===
と出力されたら完成です。
作成したフォルダ内に.vsix
ファイルが作成されるはずです。
ここまで実行すると以下のようなフォルダ構成になります。
(私は VS Code を使って Git で管理していたので.git
, .vscode
フォルダがあります)
Azure DevOpsにインストールする
Azure DevOps に作成した拡張機能をインストールするには先ほど作成した Publisher から.vsix
を公開します。
拡張機能の管理ポータルへアクセスして [New extension] - [Azure DevOps] を選択します。
ダイアログに先程作成した.vsix
をドラッグ・アンド・ドロップして [Upload] ボタンを押したら完了です。
Version にチェックマークがついていればアップロードは完了です。
続いてアップロードした拡張機能を organizatin にインストールします。 今回は private な拡張機能を作っているため、organization に対して拡張機能を共有する必要があります。 共有はアップロードした拡張機能のメニューから [Share/Unshare] を選択して共有先の organization 名を入力すればOKです。
拡張機能のメニューから [View Extension] を選択すると拡張機能のページに遷移するので、あとは他の拡張機能と同じようにインストールすれば完了です。
organization の Azure Repos メニューにMy Hub
が追加されているはずです。
ドキュメントがしっかりしているおかげでほとんど詰まること無く、また大体1時間程度で Azure DevOps の拡張機能のインストールまでできました。
この時点では Hello World 程度で SDK の機能は殆ど触れていません。しかし、.vsix
の作成方法やアップロード手順を知るには十分です。
What's next...
Azure Pipelines やその他サービスのチュートリアルです。 作りたい拡張機能に合わせてこの辺を通していけばよさそうです。