📚
GitHub Copilot Metrics ViewerをAzure Web Appsへデプロイする
0. はじめに
GitHub Copilot の利用状況を可視化するために GitHub Copilot Metrics API を活用します。
同 API は 2023‑12‑19 に OSS として公開され、過去 90 日間 の利用実績（提案されたコード行数・受け入れられたコード行数など）を取得できます。
2025‑09‑25 時点の最新バージョンは v2.1.0 です。
GitHub Copilot Metrics Viewer は、GitHub 組織またはエンタープライズ アカウント向けに、Copilot に関連する各種メトリクスをグラフで表示するアプリです。Metrics API を利用し、Copilot の導入効果や採用状況を直感的に把握できます。
v1.9.0 → v2.0.0 へのメジャーアップデートで Nuxt 3 の SSR アプリへ移行したため、以下の記事で紹介した Azure Static Web Apps へのデプロイ手順はそのままでは動きません。
https://zenn.dev/yutakaosada/articles/018772bd0ce461
そこで本記事では、できるだけ安価に可視化を実現することをコンセプトに
、IaC を利用して、Azure Web Apps にデプロイする手順を詳しく解説します。
1. 作成コンポーネントとコスト
| ＃ | 種別 | コンポーネント | コスト(月額) | 備考 |
|---|---|---|---|---|
| 1 | Azure | App Serviceプラン | ¥0 | F1（Free） |
| 2 | Azure | App Service | ― | ― |
| 3 | Azure | Log Analytics | ¥100 | 従量課金 |
| 4 | Azure | Application Insights | ― | ― |
| 5 | GitHub | GitHub Container Registry | ― | ― |
認証には GitHub App フロー を使用します。
Container Image の置き場を GitHub Container Registry (GHCR) にすることで、認証付きで安価に可視化することができます。
アーキテクチャ
2. GitHub Personal Access Token の発行
次の 2 種類の PAT を作成します。
| # | 用途 | 必要スコープ |
|---|---|---|
| 1 | GHCR への push 用 | write:packages |
| 2 | Copilot メトリクス取得用 |
manage_billing:copilot, read:enterprise, read:org
|
3. GitHub App の作成
Metrics Viewer が API にアクセスし、組織メンバーのみ閲覧できるように GitHub App を作成します。
- Organization → Settings → Developer settings → GitHub Apps → New GitHub App へ進み、以下のとおり設定します。
| # | 項目 | 値 | 補足 |
|---|---|---|---|
| 1 | GitHub App name | 任意 | アプリ名 |
| 2 | Homepage URL | http://localhost |
任意で可 |
| 3 | Identifying and authorizing users | なし | 未設定で可 |
| 4 | Callback URL | なし | [#7]のデプロイ後に App ServiceのURL＋/auth/github へ更新 |
| 5 | Expire user authorization tokens | ✓ | Refresh Token を許可 |
| 6 | Request user authorization (OAuth) during installation | OFF | 使用しない |
| 7 | Enable Device Flow | OFF | 使用しない |
| 8 | Webhook Active | OFF | 使用しない |
| 9 | Organization permissions → GitHub Copilot Business | Read‑only | 必須 |
-
Generate a new client secret をクリックし、
Client IDとClient secretを控えておきます。 - 生成した GitHub App を Organization にインストールします。
4. リポジトリの Fork
以下のリポジトリを Fork し、main ブランチをローカルへ Clone します。
5. GitHub Container Registry へ push
GHCR へログインし、ソースコードをビルドし、イメージを作成後、タグを付けて、Pushします。
echo <PAT_FOR_GHCR> | docker --debug login ghcr.io -u <GITHUB_USERNAME> --password-stdin
docker build -t copilot-metrics-viewer .
docker tag copilot-metrics-viewer:latest ghcr.io/<GITHUB_USERNAME>/copilot-metrics-viewer:latest
docker push ghcr.io/<GITHUB_USERNAME>/copilot-metrics-viewer:latest
6. IaC（Bicep）で Azure リソース作成
以下は主要コンポーネントを定義した main.bicep です。
任意のフォルダに main.bicep として作成してください。
main.bicep
param envFullName string
param gitHubUserName string
@secure()
param gitHubContainerRegistryPassword string
param gitHubAppClientId string
param gitHubAppClientSecret string
@secure()
param gitHubMetricPat string
param gitHubOrganizationName string
param logAnalyticsWorkspaceName string = 'log-${envFullName}'
param appInsightsNameApp string = 'appi-${envFullName}-app'
param hostingPlanNameApp string = 'ase-${envFullName}-app'
param appServiceName string = 'asp-${envFullName}'
param location string = resourceGroup().location
// LogAnalyticsWorkspace
resource logAnalyticsWorkspace 'Microsoft.OperationalInsights/workspaces@2025-02-01' = {
name: logAnalyticsWorkspaceName
location: location
properties: any({
retentionInDays: 30
features: {
searchVersion: 1
legacy: 0
enableLogAccessUsingOnlyResourcePermissions: true
}
sku: {
name: 'PerGB2018'
}
})
}
// AppService Application Insights
resource appInsightsApp 'Microsoft.Insights/components@2020-02-02' = {
name: appInsightsNameApp
location: location
kind: 'web'
properties: {
Application_Type: 'web'
WorkspaceResourceId:logAnalyticsWorkspace.id
}
}
// App Service Plan
resource hostingPlanApp 'Microsoft.Web/serverfarms@2024-11-01' = {
name: hostingPlanNameApp
location: location
sku: {
name: 'F1'
tier: 'Free'
size: 'F1'
family: 'F'
capacity: 1
}
kind: 'linux'
properties: {
reserved: true // for Linux
}
}
// App Service
resource appService 'Microsoft.Web/sites@2024-11-01' = {
name: appServiceName
location: location
kind: 'app,linux,container'
identity: {
type: 'SystemAssigned'
}
properties: {
serverFarmId: hostingPlanApp.id
siteConfig: {
appSettings: [
{
name: 'APPINSIGHTS_INSTRUMENTATIONKEY'
value: appInsightsApp.properties.InstrumentationKey
}
{
name: 'APPINSIGHTS_PROFILERFEATURE_VERSION'
value: '1.0.0'
}
{
name: 'APPINSIGHTS_SNAPSHOTFEATURE_VERSION'
value: '1.0.0'
}
{
name: 'APPLICATIONINSIGHTS_CONFIGURATION_CONTENT'
value: ''
}
{
name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
value: appInsightsApp.properties.ConnectionString
}
{
name: 'ApplicationInsightsAgent_EXTENSION_VERSION'
value: '~3'
}
{
name: 'DiagnosticServices_EXTENSION_VERSION'
value: '~3'
}
{
name: 'DOCKER_REGISTRY_SERVER_PASSWORD'
value: '${gitHubContainerRegistryPassword}'
}
{
name: 'DOCKER_REGISTRY_SERVER_URL'
value: 'https://ghcr.io'
}
{
name: 'DOCKER_REGISTRY_SERVER_USERNAME'
value: '${gitHubUserName}'
}
{
name: 'InstrumentationEngine_EXTENSION_VERSION'
value: 'disabled'
}
{
name: 'NUXT_SESSION_PASSWORD'
value: 'something_long_and_random_thats_at_least_32_characters'
}
{
name: 'NUXT_OAUTH_GITHUB_CLIENT_ID'
value: '${gitHubAppClientId}'
}
{
name: 'NUXT_OAUTH_GITHUB_CLIENT_SECRET'
value: '${gitHubAppClientSecret}'
}
{
name: 'NITRO_PORT'
value: '8080'
}
{
name: 'NUXT_GITHUB_TOKEN'
value: '${gitHubMetricPat}'
}
{
name: 'NUXT_PUBLIC_GITHUB_ORG'
value: '${gitHubOrganizationName}'
}
{
name: 'NUXT_PUBLIC_IS_DATA_MOCKED'
value: 'false'
}
{
name: 'NUXT_PUBLIC_SCOPE'
value: 'organization'
}
{
name: 'NUXT_PUBLIC_USING_GITHUB_AUTH'
value: 'true'
}
{
name: 'SnapshotDebugger_EXTENSION_VERSION'
value: 'disabled'
}
{
name: 'TZ'
value: 'Asia/Tokyo'
}
{
name: 'WEBSITES_ENABLE_APP_SERVICE_STORAGE'
value: 'false'
}
{
name: 'WEBSITES_PORT'
value: '8080'
}
{
name: 'XDT_MicrosoftApplicationInsights_BaseExtensions'
value: 'disabled'
}
{
name: 'XDT_MicrosoftApplicationInsights_Mode'
value: 'recommended'
}
{
name: 'XDT_MicrosoftApplicationInsights_PreemptSdk'
value: 'disabled'
}
]
linuxFxVersion: 'DOCKER|ghcr.io/${gitHubUserName}/copilot-metrics-viewer:latest'
ftpsState: 'FtpsOnly'
minTlsVersion: '1.2'
scmMinTlsVersion: '1.2'
keyVaultReferenceIdentity: 'SystemAssigned'
http20Enabled: true
}
httpsOnly: true
}
}
7. デプロイ
以下のコマンドでデプロイします。変数値は表に従い適宜置き換えてください。
| # | 項目 | 説明 |
|---|---|---|
| 1 | $RESOURCE_GROUP_NAME | Azureリソースグループ名 |
| 2 | $RESOURCE_FULL_NAME | Azure作成コンポーネントリソースフルネーム |
| 3 | $GITHUB_USER_NAME | [#5]でPushしたGitHubユーザ名 |
| 4 | $GITHUB_CONTAINER_REGISTRY_PAT | [#2]で発行した、GitHub Container Registry Push用のPersonal Access Token |
| 5 | $GITHUB_APP_CLIENT_ID | [#3]で発行した、GitHub AppのClient ID |
| 6 | $GITHUB_APP_CLIENT_SECRET | [#3]で発行した、GitHub AppのClient Secret |
| 7 | $GITHUB_METRIC_PAT | [#2]で発行した、GitHub Copilot 可視化用のPersonal Access Token |
| 8 | $GITHUB_ORGANIZATION_NAME | 可視化対象のGitHub Organization |
# 定義
$RESOURCE_GROUP_NAME="rg-ghcp-metrics"
$RESOURCE_FULL_NAME="ghcp-metrics"
$GITHUB_USER_NAME="octo-cat"
$GITHUB_CONTAINER_REGISTRY_PAT="ghp_xxxxxxxx"
$GITHUB_APP_CLIENT_ID="xxxxxx"
$GITHUB_APP_CLIENT_SECRET="xxxxxx"
$GITHUB_METRIC_PAT="ghp_xxxxxxxx"
$GITHUB_ORGANIZATION_NAME="octo"
# リソースグループ作成
az group create --name $RESOURCE_GROUP_NAME --location japaneast
# コンポーネントデプロイ
az deployment group create --resource-group $RESOURCE_GROUP_NAME `
--template-file main.bicep `
--parameters envFullName=$RESOURCE_FULL_NAME `
gitHubUserName=$GITHUB_USER_NAME `
gitHubContainerRegistryPassword=$GITHUB_CONTAINER_REGISTRY_PAT `
gitHubAppClientId=$GITHUB_APP_CLIENT_ID `
gitHubAppClientSecret=$GITHUB_APP_CLIENT_SECRET `
gitHubMetricPat=$GITHUB_METRIC_PAT `
gitHubOrganizationName=$GITHUB_ORGANIZATION_NAME
8. 動作確認
デプロイ完了後、App Service の URL にブラウザでアクセスし、GitHub 認証を経由してメトリクスが正しく表示されることを確認します。
以上で、GitHub Copilot Metrics Viewer を Azure Web Apps にデプロイして可視化する手順は完了です。Copilot の導入効果を定量的に把握し、チームや組織での活用促進にぜひ役立ててください。
リファレンス
Discussion