やる気駆動型エンジニアの備忘録

WPF(XAML+C#)の話題を中心に.NET/Android/CI やたまに趣味に関するブログです

Azure DevOpsの拡張機能を自作する -Hello World編-

Azure DevOps の拡張機能を自作する機運が高まってきたので色々調べながらとりあえず Hello World まで到達したので、その手順を備忘録として残しておきます。 なお、ここで記載している内容は2020年3月28日時点の以下のページに記載されている手順に則っています。 このページは英語で書かれていますが、一通りの手順を実施することで全く知識が無くても Hello World に到達できるようになっています。

docs.microsoft.com

なお、今回作成するのは以下のように Azure Repos にMy Hubというメニューを追加して、ログインユーザー名を表示する画面を追加します。

f:id:iyemon018:20200328223636p:plain

環境構築

Azure DevOpsに自分自身がownerになるorganizationを作る

Azure DevOps では拡張機能を自身が所属する organization にインストールするには権限が必要です。 最も手っ取り早いのは個人用の organization を作成することです。

会社で Azure DevOps を使用していて拡張機能をインストールする権限を持っていない場合、organization の owner に権限を与えてもらうか、owner 自身に拡張機能のインストールを依頼する必要があります。

拡張機能を作成するための環境を構築する

  1. Node.jsをインストールする
  2. Azure DevOps用の拡張機能パッケージツール(TFX)をインストールする

以下から Node.js をインストールします。とりあえず LTS をインストールしておけば問題ありません。

nodejs.org

Node.js をインストールしたら、TFX はコマンドプロンプトから以下のコマンドを実行することでインストールできます。

npm install -g tfx-cli

拡張機能を公開するためのPublisherを作成する

Azure DevOps のすべての拡張機能はパブリッシャーによって提供されます。 Marketplace で公開されているものだけでなく、自作して個人や特定の organization 内だけで使用するものについても同様です。

Publisher を作成するタイミングは拡張機能を作ってからでもいいのですが、ここで入力した以下の情報を拡張機能マニフェストファイルに埋め込む必要があるので先に作っておいたほうが楽ちんです。

  • ID

Publisher を作成するには以下の URL から必要な情報を入力します。

https://aka.ms/vsmarketplace-manage

なお、この手順の詳細は以下のページのほうがわかりやすいので、わからない場合はこちらを参照してください。

docs.microsoft.com

拡張機能を作る

基本的に以下の手順に従えば拡張機能を作成することができます。

docs.microsoft.com

ここではざっくり手順を紹介していきます。

  1. 拡張機能を作成するためのフォルダを作成する。場所はどこでもいい。
  2. npm パッケージマニフェストを初期化する。上記で作成したディレクトリでnpm init -yコマンドを実行する。
  3. Microsoft VSS Web Extension SDK パッケージをインストールする。npm install vss-web-extension-sdk --saveコマンドを実行する。
  4. 手順1.で作成したフォルダにvss-extension.json1ファイルを追加する。ファイルの内容は上記 URL の 4. を参照してください。
  5. Publisher 作成時に入力したIDvss-extension.jsonpublisherに記載する。
  6. 今回追加する画面のmy-hub.htmlファイルを追加する。こちらも、ファイルの内容は上記 URL の 5. を参照してください。
  7. 手順1. で作成したディレクトリでtfx extension createを実行する。

=== Completed operation: create extension ===と出力されたら完成です。 作成したフォルダ内に.vsixファイルが作成されるはずです。

ここまで実行すると以下のようなフォルダ構成になります。 (私は VS Code を使って Git で管理していたので.git, .vscode フォルダがあります)

f:id:iyemon018:20200328231928p:plain

Azure DevOpsにインストールする

Azure DevOps に作成した拡張機能をインストールするには先ほど作成した Publisher から.vsixを公開します。 拡張機能の管理ポータルへアクセスして [New extension] - [Azure DevOps] を選択します。 ダイアログに先程作成した.vsixをドラッグ・アンド・ドロップして [Upload] ボタンを押したら完了です。

f:id:iyemon018:20200328232936p:plain

Version にチェックマークがついていればアップロードは完了です。

f:id:iyemon018:20200328234157p:plain

続いてアップロードした拡張機能を organizatin にインストールします。 今回は private な拡張機能を作っているため、organization に対して拡張機能を共有する必要があります。 共有はアップロードした拡張機能のメニューから [Share/Unshare] を選択して共有先の organization 名を入力すればOKです。

f:id:iyemon018:20200328234955p:plain

拡張機能のメニューから [View Extension] を選択すると拡張機能のページに遷移するので、あとは他の拡張機能と同じようにインストールすれば完了です。 organization の Azure Repos メニューにMy Hubが追加されているはずです。

f:id:iyemon018:20200329000620p:plain


ドキュメントがしっかりしているおかげでほとんど詰まること無く、また大体1時間程度で Azure DevOps の拡張機能のインストールまでできました。 この時点では Hello World 程度で SDK の機能は殆ど触れていません。しかし、.vsixの作成方法やアップロード手順を知るには十分です。

What's next...

Azure Pipelines やその他サービスのチュートリアルです。 作りたい拡張機能に合わせてこの辺を通していけばよさそうです。


  1. vss-extension.jsonは Azure DevOps 専用のマニフェストファイルです。詳細はこちらのページを参照してください。