DEV Community

Nathan Araújo
Nathan Araújo

Posted on

Exploring Azure Functions for Synthetic Monitoring with Playwright: A Complete Guide - Part 4

Azure Functions Deployment

Deploy your Synthetic Monitoring solution to Azure in 4 simple phases.

Phase 1: Create Azure Resources

1. Create Function App

  1. Azure PortalCreate ResourceFunction App
  2. Configure:
    • Name: synthetic-monitoring-func-prod
    • Runtime: Node.js 18
    • Plan: Functions Premium (production)
    • Storage: Create new
    • Application Insights: Enable

Azure Function Creation

2. Create Storage Account (for artifacts)

  1. Azure PortalStorage AccountsCreate
  2. Configure:
    • Name: syntheticartifacts[suffix]
    • Performance: Standard
    • Create container: test-artifacts

3. Get Connection Strings

  • Application Insights: Properties → Connection String
  • Storage Account: Access Keys → Connection String

Phase 2: Configure Function App

Add these variables in Function App → Settings → Environment Variables:

APPLICATIONINSIGHTS_CONNECTION_STRING=[App Insights Connection String] AZURE_STORAGE_CONNECTION_STRING=[Storage Account Connection String] BLOB_CONTAINER_NAME=test-artifacts baseUrl=https://your-target-application.com SYNTHETIC_MONITOR_SCHEDULE=0 */5 * * * * ... others env variables 
Enter fullscreen mode Exit fullscreen mode

Phase 3: Setup Azure DevOps Pipeline

1. Create Build Pipeline

Create azure-pipelines.yml in your repo:

trigger: - main pool: vmImage: 'ubuntu-latest' steps: - task: NodeTool@0 inputs: versionSpec: '18.x' - script: npm ci displayName: 'Install dependencies' - script: npx playwright install --with-deps chromium displayName: 'Install Playwright' - script: npm run build displayName: 'Build TypeScript' - task: ArchiveFiles@2 inputs: archiveFile: '$(Build.ArtifactStagingDirectory)/function-app.zip' includeRootFolder: false - task: PublishBuildArtifacts@1 inputs: artifactName: 'function-app' 
Enter fullscreen mode Exit fullscreen mode

Or classic mode

Pipeline Creation

2. Create Release Pipeline

  1. PipelinesReleasesNew Pipeline
  2. Add Artifact: Link to build pipeline
  3. Add Stage: Deploy to Function App
  4. Configure Task:
    • Azure Function App Deploy
    • App Service name: synthetic-monitoring-func-prod
    • Package: $(System.DefaultWorkingDirectory)/_[BuildName]/function-app/function-app.zip

Release Creation

Phase 3: Deploy and Monitor

1. Deploy

  1. Commit codeBuild runs automatically
  2. Release pipelineDeploy to Function App
  3. Verify function is running in Azure Portal

2. Monitor

  • Application InsightsLive Metrics (real-time monitoring)
  • Function AppMonitoringLog Stream (logs in real time)
  • Function AppFunctionssyntheticMonitorFunctionName (execution history)
  • Storage Accounttest-artifacts (uploaded reports on failures)

Quick Checklist

  • [ ] Function App created with Application Insights
  • [ ] Storage Account created with container
  • [ ] Connection strings configured in Function App
  • [ ] Build pipeline runs successfully
  • [ ] Release pipeline deploys to Function App
  • [ ] Function executes and sends telemetry
  • [ ] Test artifacts upload on failures

Additional Resources

Top comments (0)