working with azd and configuration

Author: karpikpl

.dockerignore

@@ -1,8 +1,11 @@
-.env
+**/.env
+**/.env.local
+.env*
 .dockerignore
 .git
 .gitignore
-node_modules/
+**/node_modules/
+api/public
 dist/
 .history/
 .github/

.env

@@ -13,3 +13,7 @@ VUE_APP_GITHUB_ENT=
 # Determines the GitHub Personal Access Token to use for API calls.
 # Create with scopes copilot, manage_billing:copilot, admin:enterprise, or manage_billing:enterprise, read:enterprise AND read:org
 VUE_APP_GITHUB_TOKEN=
+
+# GitHub Api Url
+# for proxy api - set to /api/github
+VUE_APP_GITHUB_API_URL=https://api.github.com

.gitignore

@@ -21,3 +21,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+.azure
+
+api/public

api.Dockerfile

@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
+# this will tokenize the app
 RUN npm run build
 
 # Stage 2: Prepare the Node.js API
@@ -17,9 +18,14 @@ COPY api/ .
 
 # Copy the built Vue.js app from the previous stage
 COPY --from=build-stage /app/dist /api/public
+COPY --from=build-stage /app/dist/assets/app-config.js /api/app-config.template.js
+
+# install gettext-base for envsubst
+RUN apt-get update && apt-get install -y gettext-base
 
 # Expose the port your API will run on
 EXPOSE 3000
 
 # Command to run your API (and serve your Vue.js app)
-CMD ["node", "server.mjs"]
+RUN chmod +x /api/docker-entrypoint.api/entrypoint.sh
+ENTRYPOINT ["/api/docker-entrypoint.api/entrypoint.sh"]

api/docker-entrypoint.api/entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+configTemplateFile=/api/app-config.template.js
+configTargetFile=/api/public/assets/app-config.js
+
+envsubst <"$configTemplateFile" >"$configTargetFile"
+
+node server.mjs

api/server.mjs

@@ -6,10 +6,10 @@ import { fileURLToPath } from 'url';
 import session from 'express-session';
 import {createProxyMiddleware} from 'http-proxy-middleware';
 
-dotenv.config({ path: path.join(__dirname, '.env.local') });
-
 // Construct __dirname equivalent in ES module scope
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+//dotenv.config({ path: path.join(__dirname, '.env') });
+dotenv.config({ path: path.join(__dirname, '.env.local') });
 
 const app = express();
 
@@ -27,6 +27,7 @@ const authMiddleware = (req, res, next) => {
     return;
   }
   req.headers['Authorization'] = `Bearer ${req.session.token}`;
+  console.log('Added Authorization to:', req.url);
   next();
 };
 
@@ -73,11 +74,24 @@ const exchangeCode = async (code) => {
 app.use(express.static(path.join(__dirname, 'public')));
 
 app.get('/login', (req, res) => {
-  res.redirect(`https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID}`);
+  // build the URL to redirect to GitHub using host and scheme
+  const redirectUrl = `${req.protocol}://${req.get('host')}/callback`;
+  // generate random state
+  // store the state in the session
+  req.session.state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+
+  res.redirect(`https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID}&redirect_uri=${redirectUrl}&state=${req.session.state}`);
 });
 
 app.get('/callback', async (req, res) => {
   const code = req.query.code;
+  const state = req.query.state;
+
+  // check the state against the session
+  if (state !== req.session.state) {
+    res.send('Invalid state');
+    return;
+  }
 
   const tokenData = await exchangeCode(code);
 

azure.yaml

@@ -0,0 +1,12 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/Azure/azure-dev/main/schemas/v1.0/azure.yaml.json
+
+name: copilot-metrics-viewer
+metadata:
+    template: [email protected]
+services:
+    copilot-metrics-viewer:
+        project: .
+        host: containerapp
+        language: js
+        docker:
+            path: api.Dockerfile

infra/abbreviations.json

@@ -0,0 +1,135 @@
+{
+    "analysisServicesServers": "as",
+    "apiManagementService": "apim-",
+    "appConfigurationStores": "appcs-",
+    "appManagedEnvironments": "cae-",
+    "appContainerApps": "ca-",
+    "authorizationPolicyDefinitions": "policy-",
+    "automationAutomationAccounts": "aa-",
+    "blueprintBlueprints": "bp-",
+    "blueprintBlueprintsArtifacts": "bpa-",
+    "cacheRedis": "redis-",
+    "cdnProfiles": "cdnp-",
+    "cdnProfilesEndpoints": "cdne-",
+    "cognitiveServicesAccounts": "cog-",
+    "cognitiveServicesFormRecognizer": "cog-fr-",
+    "cognitiveServicesTextAnalytics": "cog-ta-",
+    "computeAvailabilitySets": "avail-",
+    "computeCloudServices": "cld-",
+    "computeDiskEncryptionSets": "des",
+    "computeDisks": "disk",
+    "computeDisksOs": "osdisk",
+    "computeGalleries": "gal",
+    "computeSnapshots": "snap-",
+    "computeVirtualMachines": "vm",
+    "computeVirtualMachineScaleSets": "vmss-",
+    "containerInstanceContainerGroups": "ci",
+    "containerRegistryRegistries": "cr",
+    "containerServiceManagedClusters": "aks-",
+    "databricksWorkspaces": "dbw-",
+    "dataFactoryFactories": "adf-",
+    "dataLakeAnalyticsAccounts": "dla",
+    "dataLakeStoreAccounts": "dls",
+    "dataMigrationServices": "dms-",
+    "dBforMySQLServers": "mysql-",
+    "dBforPostgreSQLServers": "psql-",
+    "devicesIotHubs": "iot-",
+    "devicesProvisioningServices": "provs-",
+    "devicesProvisioningServicesCertificates": "pcert-",
+    "documentDBDatabaseAccounts": "cosmos-",
+    "eventGridDomains": "evgd-",
+    "eventGridDomainsTopics": "evgt-",
+    "eventGridEventSubscriptions": "evgs-",
+    "eventHubNamespaces": "evhns-",
+    "eventHubNamespacesEventHubs": "evh-",
+    "hdInsightClustersHadoop": "hadoop-",
+    "hdInsightClustersHbase": "hbase-",
+    "hdInsightClustersKafka": "kafka-",
+    "hdInsightClustersMl": "mls-",
+    "hdInsightClustersSpark": "spark-",
+    "hdInsightClustersStorm": "storm-",
+    "hybridComputeMachines": "arcs-",
+    "insightsActionGroups": "ag-",
+    "insightsComponents": "appi-",
+    "keyVaultVaults": "kv-",
+    "kubernetesConnectedClusters": "arck",
+    "kustoClusters": "dec",
+    "kustoClustersDatabases": "dedb",
+    "logicIntegrationAccounts": "ia-",
+    "logicWorkflows": "logic-",
+    "machineLearningServicesWorkspaces": "mlw-",
+    "managedIdentityUserAssignedIdentities": "id-",
+    "managementManagementGroups": "mg-",
+    "migrateAssessmentProjects": "migr-",
+    "networkApplicationGateways": "agw-",
+    "networkApplicationSecurityGroups": "asg-",
+    "networkAzureFirewalls": "afw-",
+    "networkBastionHosts": "bas-",
+    "networkConnections": "con-",
+    "networkDnsZones": "dnsz-",
+    "networkExpressRouteCircuits": "erc-",
+    "networkFirewallPolicies": "afwp-",
+    "networkFirewallPoliciesWebApplication": "waf",
+    "networkFirewallPoliciesRuleGroups": "wafrg",
+    "networkFrontDoors": "fd-",
+    "networkFrontdoorWebApplicationFirewallPolicies": "fdfp-",
+    "networkLoadBalancersExternal": "lbe-",
+    "networkLoadBalancersInternal": "lbi-",
+    "networkLoadBalancersInboundNatRules": "rule-",
+    "networkLocalNetworkGateways": "lgw-",
+    "networkNatGateways": "ng-",
+    "networkNetworkInterfaces": "nic-",
+    "networkNetworkSecurityGroups": "nsg-",
+    "networkNetworkSecurityGroupsSecurityRules": "nsgsr-",
+    "networkNetworkWatchers": "nw-",
+    "networkPrivateDnsZones": "pdnsz-",
+    "networkPrivateLinkServices": "pl-",
+    "networkPublicIPAddresses": "pip-",
+    "networkPublicIPPrefixes": "ippre-",
+    "networkRouteFilters": "rf-",
+    "networkRouteTables": "rt-",
+    "networkRouteTablesRoutes": "udr-",
+    "networkTrafficManagerProfiles": "traf-",
+    "networkVirtualNetworkGateways": "vgw-",
+    "networkVirtualNetworks": "vnet-",
+    "networkVirtualNetworksSubnets": "snet-",
+    "networkVirtualNetworksVirtualNetworkPeerings": "peer-",
+    "networkVirtualWans": "vwan-",
+    "networkVpnGateways": "vpng-",
+    "networkVpnGatewaysVpnConnections": "vcn-",
+    "networkVpnGatewaysVpnSites": "vst-",
+    "notificationHubsNamespaces": "ntfns-",
+    "notificationHubsNamespacesNotificationHubs": "ntf-",
+    "operationalInsightsWorkspaces": "log-",
+    "portalDashboards": "dash-",
+    "powerBIDedicatedCapacities": "pbi-",
+    "purviewAccounts": "pview-",
+    "recoveryServicesVaults": "rsv-",
+    "resourcesResourceGroups": "rg-",
+    "searchSearchServices": "srch-",
+    "serviceBusNamespaces": "sb-",
+    "serviceBusNamespacesQueues": "sbq-",
+    "serviceBusNamespacesTopics": "sbt-",
+    "serviceEndPointPolicies": "se-",
+    "serviceFabricClusters": "sf-",
+    "signalRServiceSignalR": "sigr",
+    "sqlManagedInstances": "sqlmi-",
+    "sqlServers": "sql-",
+    "sqlServersDataWarehouse": "sqldw-",
+    "sqlServersDatabases": "sqldb-",
+    "sqlServersDatabasesStretch": "sqlstrdb-",
+    "storageStorageAccounts": "st",
+    "storageStorageAccountsVm": "stvm",
+    "storSimpleManagers": "ssimp",
+    "streamAnalyticsCluster": "asa-",
+    "synapseWorkspaces": "syn",
+    "synapseWorkspacesAnalyticsWorkspaces": "synw",
+    "synapseWorkspacesSqlPoolsDedicated": "syndp",
+    "synapseWorkspacesSqlPoolsSpark": "synsp",
+    "timeSeriesInsightsEnvironments": "tsi-",
+    "webServerFarms": "plan-",
+    "webSitesAppService": "app-",
+    "webSitesAppServiceEnvironment": "ase-",
+    "webSitesFunctions": "func-",
+    "webStaticSites": "stapp-"
+}

infra/app/copilot-metrics-viewer.bicep

@@ -0,0 +1,127 @@
+param name string
+param location string = resourceGroup().location
+param tags object = {}
+
+param identityName string
+param containerRegistryName string
+param containerAppsEnvironmentName string
+param applicationInsightsName string
+param exists bool
+@secure()
+param appDefinition object
+
+var appSettingsArray = filter(array(appDefinition.settings), i => i.name != '')
+var secrets = map(filter(appSettingsArray, i => i.?secret != null), i => {
+  name: i.name
+  value: i.value
+  secretRef: i.?secretRef ?? take(replace(replace(toLower(i.name), '_', '-'), '.', '-'), 32)
+})
+var env = map(filter(appSettingsArray, i => i.?secret == null), i => {
+  name: i.name
+  value: i.value
+})
+
+resource identity 'Microsoft.ManagedIdentity/userAssignedIdentities@2023-01-31' = {
+  name: identityName
+  location: location
+}
+
+resource containerRegistry 'Microsoft.ContainerRegistry/registries@2023-01-01-preview' existing = {
+  name: containerRegistryName
+}
+
+resource containerAppsEnvironment 'Microsoft.App/managedEnvironments@2023-05-01' existing = {
+  name: containerAppsEnvironmentName
+}
+
+resource applicationInsights 'Microsoft.Insights/components@2020-02-02' existing = {
+  name: applicationInsightsName
+}
+
+resource acrPullRole 'Microsoft.Authorization/roleAssignments@2022-04-01' = {
+  scope: containerRegistry
+  name: guid(subscription().id, resourceGroup().id, identity.id, 'acrPullRole')
+  properties: {
+    roleDefinitionId:  subscriptionResourceId(
+      'Microsoft.Authorization/roleDefinitions', '7f951dda-4ed3-4680-a7ca-43fe172d538d')
+    principalType: 'ServicePrincipal'
+    principalId: identity.properties.principalId
+  }
+}
+
+module fetchLatestImage '../modules/fetch-container-image.bicep' = {
+  name: '${name}-fetch-image'
+  params: {
+    exists: exists
+    name: name
+  }
+}
+
+resource app 'Microsoft.App/containerApps@2023-05-02-preview' = {
+  name: name
+  location: location
+  tags: union(tags, {'azd-service-name':  'copilot-metrics-viewer' })
+  dependsOn: [ acrPullRole ]
+  identity: {
+    type: 'UserAssigned'
+    userAssignedIdentities: { '${identity.id}': {} }
+  }
+  properties: {
+    managedEnvironmentId: containerAppsEnvironment.id
+    configuration: {
+      ingress:  {
+        external: true
+        targetPort: 3000
+        transport: 'auto'
+      }
+      registries: [
+        {
+          server: '${containerRegistryName}.azurecr.io'
+          identity: identity.id
+        }
+      ]
+      secrets: union([
+      ],
+      map(secrets, secret => {
+        name: secret.secretRef
+        value: secret.value
+      }))
+    }
+    template: {
+      containers: [
+        {
+          image: fetchLatestImage.outputs.?containers[?0].?image ?? 'mcr.microsoft.com/azuredocs/containerapps-helloworld:latest'
+          name: 'main'
+          env: union([
+            {
+              name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
+              value: applicationInsights.properties.ConnectionString
+            }
+            {
+              name: 'PORT'
+              value: '3000'
+            }
+          ],
+          env,
+          map(secrets, secret => {
+            name: secret.name
+            secretRef: secret.secretRef
+          }))
+          resources: {
+            cpu: json('0.25')
+            memory: '0.5Gi'
+          }
+        }
+      ]
+      scale: {
+        minReplicas: 0
+        maxReplicas: 1
+      }
+    }
+  }
+}
+
+output defaultDomain string = containerAppsEnvironment.properties.defaultDomain
+output name string = app.name
+output uri string = 'https://${app.properties.configuration.ingress.fqdn}'
+output id string = app.id