VS Code拡張機能：GitHub Actionsで自動CI/CDを構築する

GitHub Actionsを使って、VS Code拡張機能のCI/CDパイプライン全体を構築する方法を見ていきましょう。

基本的な要件は、新しいコミットをmasterブランチにプッシュしたときに、以下を実行できる自動CI/CDを構築することでした。

• テスト：Mac、Windows、Linuxでテストを実行する。

• リリース：Angular Commit Message Conventionsに基づくリリースノートを自動生成して、新しいGitHubリリースを作成します。

• 公開：新しいバージョンをVisual Studio Marketplaceに公開する。

最後にもう一つ。これらすべてをGitHub Actionsだけで実行したいと思っていました :) つまり、すべての設定と実行に必要なのはGitHubリポジトリだけです。

きっかけ

すべては、YAMLファイルを右クリックして、ローカルのKubernetesクラスターに適用したり、クラスターから削除したりできる小さなVS Code拡張機能を作ろうと思ったことから始まりました。

すぐに、VS Codeの拡張機能の作成に関するドキュメントがとても優れていることに気づきました。新しいTypeScript拡張機能を書いてローカルでデバッグするのはあっという間でした。しかし、Microsoftがドキュメントで推奨しているCI/CD全体の流れには、少し足りない点があることに気づいたのです。

テスト

この部分は公式ドキュメントでも比較的よく説明されています。Mac、Windows、Linuxでテストを実行するGitHubのActionが具体的に紹介されており、私もこれを使いました。

リリースと公開

リリースと公開のプロセスはすべてvsceツールを使って行います。まず準備として、公開に関するドキュメントに従い、特に以下を実施します。

• Azure DevOpsから個人用アクセストークンを取得する

• publisherを作成する（publisher名はpackage.jsonのpublisher セクションと一致させる必要があります）

これらがそろえば、vsceを使って拡張機能をパッケージ化、公開、非公開にできます。これらは手作業で行う必要があり、理想的とは言えません。

さらに、公開時に拡張機能のバージョンを設定する方法にも課題があります。設定方法はいくつかあります。

• package.jsonのversionフィールドを変更してvsce publishを実行する

• たとえばvsce publish minorを使って、バージョンを自動的にインクリメントする（必要に応じてmajor/patchも指定可能）

• vsce publish 2.0.1を使って特定のバージョンを指定する

これはとても不便です。コミット規約に基づいてバージョンを自動設定し、リリースノートも自動生成したいと思いました。そのためにsemantic-releaseを使います。 :)

それでは始めましょう。実際に行った手順に沿って、CI/CDパイプラインを一つずつ構築していきます。

拡張機能を作成する

公式ドキュメントに従い、テンプレートから新しいTypeScript拡張機能を作成するための新しいリポジトリを、比較的簡単に用意できました。その後、機能を変更し、YAMLファイルを右クリックすると、ローカルのKubernetesクラスターに適用したり、クラスターから削除したりできるようにしました。自分にとって、とても便利で素晴らしい機能です。

空のGitHub Actionsワークフローを作成する

.github/workflows/<workflow name>.yamlに空のYAMLファイルを作成します。ファイル名はci.yamlにしました。

masterへのプッシュ時にワークフローを実行するよう指定する

YAMLワークフローを次のように変更します。

on:
  push:
    branches:
      - master

jobs:
< to be filled with jobs>

上の部分は、masterへのプッシュ時にそのActionを実行するようGitHubに指示しています。下の部分は実行するジョブを定義します（内容はこれから追加します）。

テストの自動化

前述のとおり、テストはMac、Windows、Linuxで実行したいと思っています。実際にドキュメントで紹介されている特定のActionを使い、専用のジョブを追加します。

  test:
    name: Test
    strategy:
      matrix:
        os: [macos-latest, ubuntu-latest, windows-latest]
    runs-on: ${{ matrix.os }}
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: Install dependencies
        run: npm install
      - name: Run headless test
        uses: GabrielBB/xvfb-action@v1.0
        with:
          run: npm test

ご覧のとおり、これによりTestというジョブが追加され、Mac、Windows、Ubuntuで実行されます。このジョブには4つのステップがあります。

• チェックアウト：組み込みActionを使ってリポジトリをチェックアウトする

• Node.jsのセットアップ：組み込みActionを使ってNode 12を設定する

• 依存関係のインストール：npm installを実行する

• ヘッドレステストの実行：公式ドキュメントで推奨されているGabrielBB/xvfb-action@v1.0 Actionを使ってテストを実行する（さらにいくつか改善を加えています）

このステップの後、Actionsタブで次のように表示されました。

各テストには、次のステップが表示されます。

公開とリリース

次のような新しいステップを追加しましょう。

  publish:
    name: Release and publish
    needs: test
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: Install dependencies
        run: npm install
      - name: Release
        env:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release
      - name: Vscode release plugin
        uses: JCofman/vscodeaction@master
        env:
          PUBLISHER_TOKEN: ${{ secrets.PUBLISHER_TOKEN }}
        with:
          args: publish -p $PUBLISHER_TOKEN 

心配しないでください。順を追って説明します。

まずは前のステップと同じく、コードをチェックアウトし、Node 12をセットアップして、npm installを実行します。次の2つのステップが最も重要なので、それぞれ詳しく見ていきましょう。

リリース

ここでは、適切なリリースノートを含む新しいGitHubリリースを作成して公開します。そのためにsemantic-releaseを呼び出すだけです :) このActionはコミットメッセージを確認してリリースノートを作成し、追加したコミットに対応するsemverバージョンで新しいGitHubリリースを作成します。また、そのリリースバージョンをpackage.jsonにも設定するので、次の段階で役立ちます。

semantic-releaseを適切に設定するには、次の作業が必要です。

• 環境変数GITHUB_TOKENを渡す（GitHubシークレットとして設定）：最小限のrepo権限を持つ個人用GitHubトークン
  

  

• 環境変数NPM_TOKENを渡す（GitHubシークレットとして設定）：npmパッケージをリリースするためのnpmトークン。私の場合、npmパッケージをリリースする必要はありませんでした。その場合は、package.jsonで"private": trueを設定します。設定後はこの環境変数を渡す必要はありません（この情報はこちらで見つけました）。

• 開発依存関係として@semantic-release/githubをインストールする

• package.jsonで次のように設定する：

  "release": {"branches": "master","verifyConditions": ,"publish": ,"success": ,"fail": },

このステップを完了すると、適切なGitHubリリースが表示されるようになりました。

公開

ここでは、正しいバージョンの拡張機能をVS Code Marketplaceにアップロードします。前の「リリース」セクションでの作業により、package.jsonには正しいパッケージバージョンが設定されています。あとはvsce publish -p <my token>を実行するだけです。

プラグインをリリースする既存のGitHub Action、JCofman/vscodeactionを見つけました。必要なのは、PUBLISHER_TOKENを環境変数として渡すことだけです（ここでもGitHubシークレットを使います）。

このステップの後、ActionsタブにRelease and publishジョブが表示され、次の内容が含まれます。

結果

新しい拡張機能はMarketplaceとVS Codeの拡張機能検索で見つけられます。

リポジトリはhttps://github.com/shaimendel/vscode-plugin-cicd-github-actionsで確認できます。ワークフローは[ci.yaml].に設定されています。

まとめ

これで、新しいVS Code拡張機能のCI/CDを完全に自動化できました。新しいPRがmasterにマージされるたびに、次の処理を実行します。

• 複数のOSでコードをテストする

• 質の高いリリースノートを添えて、新しいGitHubリリースを作成する

• 新しい拡張機能をMarketplaceに公開する

これらすべてをGitHub Actionsだけで実現しました！大成功です。 :)