GitHub Copilot Metrics ViewerをAzure Static Web Appsへデプロイする
0. はじめに
今回は、GitHub Copilot Metrics API を利用して、GitHub Copilotの使用状況を可視化したいと思います。GitHub Copilot Metrics APIとは、2024/04/23 よりパブリックβ版として利用可能となっており、過去28日間の利用状況（提案されたコード行数、受け入れられたコード行数）が閲覧可能な仕組みとなります。
このアプリケーションは、 GitHub 組織またはエンタープライズ アカウントの GitHub Copilot に関連するさまざまなメトリックを含む一連のグラフを表示します。これらの視覚化は、データを明確に表現するように設計されており、GitHub Copilot の影響と採用を簡単に理解して分析できます。このアプリは、GitHub Copilot Metrics APIを利用します。
この記事では、copilot-metrics-viewerをローカルだけではなく、クラウド環境（GitHub Actions経由で、Azure Static Web Apps）へデプロイする手順を詳細化しています。
1. ローカル動作確認
基本的にはReadmeに従って設定をしていけばよいです。
.envファイルに手を入れていきます。
# Determines if mocked data should be used instead of making API calls.
VUE_APP_MOCKED_DATA=true
# Determines the scope of the API calls.
# Can be 'enterprise' or 'organization' to target API calls to an enterprise or an organization respectively.
VUE_APP_SCOPE='organization'
# Determines the enterprise or organization name to target API calls.
VUE_APP_GITHUB_ORG='' # ←GitHub Organization名を埋め込む
VUE_APP_GITHUB_ENT=
# Determines the GitHub Personal Access Token to use for API calls.
# Create with scopes copilot, manage_billing:copilot or manage_billing:enterprise, read:enterprise AND read:org
VUE_APP_GITHUB_TOKEN='' # ←GitHubのパーソナルアクセストークンを埋め込む
下記のコマンドでローカルサーバを起動します。
npm install
npm run serve
http://localhost:8080/ へ接続します。
無事にモックデータが表示されました。
2. GitHub personal access tokenの作成
ローカルでの動作を確認したところで、APIの発行するために必要な準備をします。
GitHub Copilot Metrics API を発行するために、personal access token を作成します
スコープは下記を指定します。
copilot, manage_billing:copilot, manage_billing:enterprise, read:enterprise, read:org.
3. GitHubリポジトリへSrcを格納
PublicでもPrivateでもどちらでもいいので、リポジトリを作成し、下記のソースコードを格納してください。
リポジトリを作成
コード一式をPushします。
4. GitHub Secretや変数の設定
続いて、GitHub Actionsで利用する環境情報を、GitHub Repository>Settings>Secret and variables>Actions> より、シークレットや変数を設定していきます。
| ＃ | 種別 | Name | Value | 説明 |
|---|---|---|---|---|
| 1 | secret | VUE_APP_GITHUB_TOKEN | [2]で作成したパーソナルアクセストークン値 | ― |
| 2 | variable | VUE_APP_MOCKED_DATA | false | trueにした場合モックデータが表示されます |
| 3 | variable | VUE_APP_SCOPE | organization | enterprise or organization |
| 4 | variable | VUE_APP_GITHUB_ORG | %対象のOrgnization% | #3をorganizationにした場合必須 |
| 5 | variable | VUE_APP_GITHUB_ENT | null | #3をenterpriseにした場合必須 |
| 6 | variable | NODE_ENV | development | ― |
下記のように構成します。
5. Azure Static Web Appsを構築
Webページで表示するためにAzure Static Web Appsを作ります。
CLIでもいいのですが、今回は、Portalから作成します。
検索バーにstaticと入力します。
各種設定をします。
- プランの種類：
StarndardにするとBasic認証が使えます。 - ソース：GitHub
- 組織、リポジトリ：[3]で作成した値を設定します。
「確認および作成」でリソースが作成されます。
同時に、GitHub Actionsが生成されます。
GitからPullしておきましょう。
Webページに、Basic認証を入れる場合は、「構成」から設定をします。
6. GitHub Actions workflowの変更
[5]で自動生成されたGitHub Actionsのworkflowを下記のように修正し、Pushします。
このように、GitHub Secretや変数を読み取り、Azure Static Web Appsに送り出す必要があります。
以下のenv部分を追加してください。
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v3
with:
submodules: true
lfs: false
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_CALM_MUD_07AE03600 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######
## >>> ここから
env:
NODE_ENV: ${{ vars.NODE_ENV }}
VUE_APP_MOCKED_DATA: ${{ vars.VUE_APP_MOCKED_DATA }}
VUE_APP_SCOPE: ${{ vars.VUE_APP_SCOPE }}
VUE_APP_GITHUB_ORG: ${{ vars.VUE_APP_GITHUB_ORG }}
VUE_APP_GITHUB_ENT: ${{ vars.VUE_APP_GITHUB_ENT }}
VUE_APP_GITHUB_TOKEN: ${{ secrets.VUE_APP_GITHUB_TOKEN }}
## >>> ここまで
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_CALM_MUD_07AE03600 }}
action: "close"
無事にworkflowが完了したら、Azure Static Web AppsのURLへ接続します。
Basic認証でパスワードを入力し、
Viewerが表示されました。
各種ページで視覚化された指標についての説明
各ページの説明をします。
主要な指標
- Acceptance Rate:GitHub Copilot によって提案された行の総数に対する承認された行の比率を表す。Copilot の提案の関連性と有用性を示す指標となる。
- Total Suggestions Count:GitHub Copilot によって行われたコード提案の合計数を表す。ツールのアクティビティとユーザーとの関わりを時間の経過とともに確認可能。
- Total Acceptances Count:ユーザーが承認した提案の合計数を表す。
下記に記載のあるとおり、コード提案の受け入れ率が30%付近であれば、概ね問題の無い数字と言えそうです。
- Total Lines Suggested:GitHub Copilot によって提案されたコードの合計行数を表す。（コード生成と提供される支援の量を把握できる。）
- Total Lines Accepted:ユーザーによって承認されたコードの合計行数 (完全な承認)を表す。（提案されたコードのうち実際にコードベースに組み込まれて使用されている行数についての洞察を提供。）
- Total Active Users:GitHub Copilot を使用するアクティブ ユーザーの数を表す。（ユーザーベースの成長と採用率を理解するのに役立つ。）
言語別分析
-
受け入れられたプロンプトと受け入れ率による上位 5つの言語を示す円グラフが上部に表示。
-
言語の内訳分析タブには、過去 28 日間の各言語の承認済みプロンプト、承認済みコード行、承認率 (%) を示す表を表示。（エントリは、承認済みコード行数の降順で並べ替え）
Copilot Chat Metrics
- Cumulative Number of Turns:過去 28 日間の Copilot とのターン (インタラクション) の合計数を表す。（「ターン」には、ユーザー入力と Copilot の応答の両方が含まれる。）
- Cumulative Number of Acceptances:過去 28 日間に Copilot によって提案され、ユーザーによって承認されたコード行の合計数を表す。
- Total Turns | Total Acceptances Count:合計ターン数と承認数を表示するグラフ。
- Total Active Copilot Chat Users:過去 28 日間に Copilot とアクティブにやり取りしたユーザーの合計数を示す棒グラフ。
シート分析
- Total Assigned:現在の組織/企業内で割り当てられている Copilot シートの合計数を表す。
- Assigned But Never Used:現在の組織/企業内で割り当てられているが一度も使用されていないシートを表す。（割り当てられたタイムスタンプもグラフに表示されます。）
- No Activity in the Last 7 days:一度も使用されたことのないシート、または使用されたが過去 7 日間にアクティビティがなかったシート。
- No Activity in the last 7 days (including never used seats):過去 7 日間にアクティビティがなかった座席を、最後のアクティビティの日付順に表示するテーブル。（以前に使用された座席は上部に表示される。）
まとめ
この記事では、GitHub Copilot Metrics APIを使用して、GitHub Copilotの使用状況を可視化するアプリケーションをAzure Static Web Appsにデプロイする手順を詳細に解説しました。ローカル環境での動作確認から、GitHub Actionsを使用したCI/CDパイプラインの設定、そしてAzure Static Web Appsのデプロイまで、一連の流れを実施することで、実際にクラウド環境での運用を可能にしました。
今回の手順を通じて、GitHub Copilotの提案精度やユーザーのアクティビティを視覚化するための具体例を習得できたのではないかと思います。また、Azure Static Web Appsの活用によって、迅速でセキュアなWebアプリケーションの公開が実現できることも体験できたかと思います。これを機に、さらに高度なカスタマイズや他のAzureサービスとの連携にも挑戦してみてください。
リファレンス
Discussion