|
| 1 | +# Deployment of Copilot Metrics Viewer |
| 2 | + |
| 3 | +There are a few ways to deploy the Copilot Metrics Viewer, depending on the type of metrics (Organization/Enterprise) and the level of control required. |
| 4 | + |
| 5 | +The app runs in a Docker container, so it can be deployed anywhere containers are hosted (AWS, GCP, Azure, Kubernetes, etc.). |
| 6 | + |
| 7 | +## Authentication |
| 8 | + |
| 9 | +The Metrics Viewer can be integrated with GitHub application authentication, which authenticates the user and verifies their permissions to view the metrics. This option is recommended since it doesn't use Personal Access Tokens. The downside of using a GitHub application is that it can only authorize users to view metrics at the organization level (no support for Enterprise). |
| 10 | + |
| 11 | +With a Personal Access Token, user credentials are not verified, and the application simply renders Copilot metrics fetched using the PAT stored in the backend. |
| 12 | + |
| 13 | +## One-click Azure Deployment |
| 14 | + |
| 15 | +By far the simplest way is to use the "one-click" option that creates resources in Azure. The deployment creates: |
| 16 | + |
| 17 | +* Azure Container App with a consumption environment |
| 18 | +* Azure Log Analytics Workspace |
| 19 | + |
| 20 | +1. **Option 1 - Using a Personal Access Token in the Backend**: |
| 21 | + |
| 22 | + [](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2Fkarpikpl%2Fcopilot-metrics-viewer%2Fmain%2Fazure-deploy%2Fwith-token%2Fazuredeploy.json) |
| 23 | + |
| 24 | +2. **Option 2 - Using GitHub App Registration and GitHub Authentication**: |
| 25 | + |
| 26 | + When using this method, [register your app in Github first](#github-app-registration). |
| 27 | + |
| 28 | + [](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2Fkarpikpl%2Fcopilot-metrics-viewer%2Fmain%2Fazure-deploy%2Fwith-app-registration%2Fazuredeploy.json) |
| 29 | + |
| 30 | + **Important**: After deploying Option 2, the redirect URI needs to be updated with the URL of the deployed container app. |
| 31 | + |
| 32 | + Go to: `https://github.com/organizations/<your-org>/settings/apps/<your-app>` or in the UI to the settings of the registered application and add the following redirect URLs: |
| 33 | + |
| 34 | + |
| 35 | + ``` |
| 36 | + http://<YOUR Container APP URL>.azurecontainerapps.io/callback |
| 37 | + https://<YOUR Container APP URL>.azurecontainerapps.io/callback |
| 38 | + ``` |
| 39 | +
|
| 40 | +## Azure Deployment with azd |
| 41 | +
|
| 42 | +If more control over the deployed container image is needed, an infrastructure-as-code option has been provided using Azure Bicep. The application can be deployed using the [Azure Developer CLI](https://aka.ms/azd) (azd). |
| 43 | +
|
| 44 | +The deployment creates: |
| 45 | +
|
| 46 | +* Azure Resource Group |
| 47 | +* Azure Container App with a consumption environment |
| 48 | +* Azure Container Registry |
| 49 | +* Azure Log Analytics Workspace |
| 50 | +* Azure Application Insights |
| 51 | +* Azure Key Vault |
| 52 | +
|
| 53 | +Before running `azd up`, configure GitHub variables: |
| 54 | +
|
| 55 | +```bash |
| 56 | +azd env set VUE_APP_SCOPE <organization/enterprise> |
| 57 | +# when using organization |
| 58 | +azd env set VUE_APP_GITHUB_ORG <org name> |
| 59 | +# when using enterprise |
| 60 | +azd env set VUE_APP_GITHUB_ENT <ent name> |
| 61 | +azd env set VUE_APP_GITHUB_API /api/github |
| 62 | +azd env set GITHUB_CLIENT_ID <client id> |
| 63 | +azd env set GITHUB_CLIENT_SECRET <client secret for the GH App> |
| 64 | +``` |
| 65 | + |
| 66 | +## Deploying the container |
| 67 | + |
| 68 | +When using other deployment methods, the application can run as a Docker container with the required environment variables: |
| 69 | + |
| 70 | +For GitHub App: |
| 71 | + |
| 72 | +```bash |
| 73 | +docker run -it --rm -p 3000:3000 \ |
| 74 | +-e VUE_APP_SCOPE=organization \ |
| 75 | +-e VUE_APP_GITHUB_API=/api/github \ |
| 76 | +-e VUE_APP_GITHUB_ORG=<org name> \ |
| 77 | +-e GITHUB_CLIENT_ID=<client id> \ |
| 78 | +-e GITHUB_CLIENT_SECRET=<client secret for the GH App> \ |
| 79 | +-e SESSION_SECRET=<random string> \ |
| 80 | +ghcr.io/karpikpl/copilot-metrics-viewer-with-proxy |
| 81 | +``` |
| 82 | + |
| 83 | +or with PAT token and enterprise: |
| 84 | + |
| 85 | +```bash |
| 86 | +docker run -it --rm -p 3000:3000 \ |
| 87 | +-e VUE_APP_SCOPE=enterprise \ |
| 88 | +-e VUE_APP_GITHUB_API=/api/github \ |
| 89 | +-e VUE_APP_GITHUB_ENT=<enterprise name> \ |
| 90 | +-e VUE_APP_GITHUB_TOKEN=<github PAT> \ |
| 91 | +-e SESSION_SECRET=<random string> \ |
| 92 | +ghcr.io/karpikpl/copilot-metrics-viewer-with-proxy |
| 93 | +``` |
| 94 | + |
| 95 | +or with PAT token and organization: |
| 96 | + |
| 97 | +```bash |
| 98 | +docker run -it --rm -p 3000:3000 \ |
| 99 | +-e VUE_APP_SCOPE=organization \ |
| 100 | +-e VUE_APP_GITHUB_API=/api/github \ |
| 101 | +-e VUE_APP_GITHUB_ORG=<org name> \ |
| 102 | +-e VUE_APP_GITHUB_TOKEN=<github PAT> \ |
| 103 | +-e SESSION_SECRET=<random string> \ |
| 104 | +ghcr.io/karpikpl/copilot-metrics-viewer-with-proxy |
| 105 | +``` |
| 106 | + |
| 107 | +## Github App Registration |
| 108 | + |
| 109 | +While it is possible to run the API Proxy without GitHub app registration and with a hardcoded token, it is not the recommended way. |
| 110 | + |
| 111 | +To register a new GitHub App, follow these steps: |
| 112 | +1. Go to your organization's settings. |
| 113 | +2. Navigate to "Developer settings". |
| 114 | +3. Select "GitHub Apps". |
| 115 | +4. Click "New GitHub App". |
| 116 | + |
| 117 | +Replace `<your org>` with your organization name in the link: |
| 118 | +`https://github.com/organizations/<your org>/settings/apps` |
| 119 | + |
| 120 | +1. Set a unique name. |
| 121 | +2. Provide a home page URL: your company URL or just `http://localhost`. |
| 122 | +3. Add a callback URL for `http://localhost:3000`. (We'll add the real redirect URL after the application is deployed.) |
| 123 | +4. Uncheck the "Webhook -> Active" checkbox. |
| 124 | +5. Set the scopes: |
| 125 | + - Select **Organization permissions**. |
| 126 | + - Under **GitHub Copilot Business**, select **Access: Read-only**. |
| 127 | +6. Create a client secret. |
| 128 | +7. Install the app in the organization: |
| 129 | + - Go to "Install App". |
| 130 | + - Select your organization. |
| 131 | + |
| 132 | +Note the `Client ID` and `Private Key`. |
0 commit comments