Deploying Web App and Web API in a Shared Container App Environment

This architecture consists of a Container App Environment hosting two distinct Container Apps

Azure Container Apps is a serverless platform that simplifies the deployment of containerized applications. It helps reduce infrastructure management and costs by eliminating the need to handle server configuration, container orchestration, and deployment details. Container Apps automatically provides the necessary, up-to-date server resources to ensure your applications remain stable and secure.

To learn more, visit the official documentation: Azure Container Apps Overview

Overview

In this tutorial, we’ll walk you through the process of getting started with Azure Container Apps. You’ll create a public-facing frontend application that connects to a private web api, which then queries and inserts data into a SQL Server database. The entire setup will be fully automated using Azure Bicep.

Additionally, we’ll integrate Azure Application Insights and Azure Key Vault to securely store and retrieve secrets such as:

  • acr-password-shared-key

  • acr-username-shared-key

  • appinsights-connectionstring

  • appinsights-instrumentationkey

  • law-shared-key

  • sqlserver-connectionstring

    Architecture drawio

Deploy Infrastructure

This guide explains how to deploy Azure infrastructure for Container Apps using PowerShell and Bicep.


## Prerequisites

- Azure CLI and Azure PowerShell must be installed.
- You must be signed in to your Azure account (`az login`).
- Bicep templates (`main.bicep` and `main.bicepparam`) should be available in the `bicep/` folder.

Step 1: Set the Azure Subscription

Retrieve the current subscription ID and set it as the active subscription:

$subscriptionId = (Get-AzContext).Subscription.Id
az account set --subscription $subscriptionId

Step 2: Create a Resource Group

Define a name for the resource group and create it in the francecentral region:

$resourceGroupName = "RG-CONTAINER-APPS"
New-AzResourceGroup -Name $resourceGroupName -Location "francecentral"

Step 3: Deploy the Bicep Template

Deploy the infrastructure using your Bicep file and parameters:

New-AzResourceGroupDeployment `
  -Name "container-apps-001" `
  -ResourceGroupName $resourceGroupName `
  -TemplateFile bicep/main.bicep `
  -TemplateParameterFile bicep/main.bicepparam `
  -DeploymentDebugLogLevel All

Parameters Explained

  • -Name: Name of the deployment.
  • -ResourceGroupName: Name of the resource group to deploy to.
  • -TemplateFile: Path to your Bicep template.
  • -TemplateParameterFile: Path to your Bicep parameters file.
  • -DeploymentDebugLogLevel All: Enables detailed logging for troubleshooting.

Build and Deploy Apps to Azure Container Registry

This section explains how to build Docker images for your applications and push them to an Azure Container Registry (ACR).

Step 1: Set the ACR Name and Login

Set your ACR name and authenticate Docker to push images:

$acrName = "acrdatasynchro"
az acr login --name $acrName

Step 2: Build and Push the Web API Image

Build the Docker image for the WeatherForecast.WebApi app and push it to Azure Container Registry (ACR):

docker build -t "$acrName.azurecr.io/weatherforecast-web-api:latest" `
  .\src\WeatherForecastApp `
  -f .\src\WeatherForecastApp\WeatherForecast.WebApi\Dockerfile `
  --no-cache

docker push "$acrName.azurecr.io/weatherforecast-web-api:latest"

Step 3: Build and Push the Web App Image

Build the Docker image for the WeatherForecast.WebApp and push it to Azure Container Registry (ACR):

docker build -t "$acrName.azurecr.io/weatherforecast-web-app:latest" `
  .\src\WeatherForecastApp `
  -f .\src\WeatherForecastApp\WeatherForecast.WebApp\Dockerfile `
  --no-cache

docker push "$acrName.azurecr.io/weatherforecast-web-app:latest"

deploy web api and front end container apps

Deploy Infrastructure with App Deployment Enabled

In this step, you deploy your Azure resources using a Bicep template and explicitly enable application deployment by setting a custom parameter deployApps to true.

New-AzResourceGroupDeployment `
  -Name "container-apps-001" `
  -ResourceGroupName $resourceGroupName `
  -TemplateFile bicep/main.bicep `
  -TemplateParameterFile bicep/main.bicepparam `
  -deployApps $true `
  -DeploymentDebugLogLevel All

Create SQL Server Tables

The following SQL script is deployed using a Bicep deployment script. It creates two tables: Location and Weather, with a foreign key relationship between them.


Table: Location

Creates a table to store geographical and time zone data for various locations.

CREATE TABLE [dbo].[Location] (
    [Id]                   INT            IDENTITY (1, 1) NOT NULL,
    [Department]           NVARCHAR (100) NULL,
    [DepartmentCode]       INT            NULL,
    [City]                 NVARCHAR (100) NULL,
    [PostalCode]           INT            NULL,
    [Latitude]             FLOAT (53)     NULL,
    [Longitude]            FLOAT (53)     NULL,
    [GenerationTimeMs]     FLOAT (53)     NULL,
    [UtcOffsetSeconds]     INT            NULL,
    [Timezone]             NVARCHAR (50)  NULL,
    [TimezoneAbbreviation] NVARCHAR (10)  NULL,
    [Elevation]            FLOAT (53)     NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

Table: Weather

Creates a table to store weather-related data, linked to the Location table via a foreign key.

CREATE TABLE [dbo].[Weather] (
    [Id]            INT           IDENTITY (1, 1) NOT NULL,
    [LocationId]    INT           NULL,
    [Time]          NVARCHAR (50) NULL,
    [Interval]      INT           NULL,
    [Temperature]   FLOAT (53)    NULL,
    [Windspeed]     FLOAT (53)    NULL,
    [Winddirection] INT           NULL,
    [IsDay]         INT           NULL,
    [Weathercode]   INT           NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC),
    FOREIGN KEY ([LocationId]) REFERENCES [dbo].[Location] ([Id])
);

These tables are typically used to store historical and real-time weather data by location.

Test and View Logs for Azure Container App

This section outlines how to inspect the deployment status and logs of your Azure Container App named dayasync-weatherforecast-api within the resource group RG-CONTAINER-APPS.

CONTAINER ENV

ACA FRONT

WEBAPP


1. View Container App Details

Use the following command to display detailed information about the container app:

az containerapp show --name dayasync-weatherforecast-api --resource-group RG-CONTAINER-APPS

2. Check the Current Container Image

Retrieve the image being used by the first container in the app using PowerShell:

az containerapp show `
  --name dayasync-weatherforecast-api `
  --resource-group RG-CONTAINER-APPS `
  --query "properties.template.containers[0].image"

3. List Revisions and Their Status

List all revisions of the container app along with their state and health conditions using PowerShell:

az containerapp revision list `
  --name dayasync-weatherforecast-api `
  --resource-group RG-CONTAINER-APPS `
  --query "[].{Name:name, State:properties.active, Reason:properties.healthState, Conditions:properties.conditions}" `
  --output json

4. Check Provisioning State

Verify the provisioning state of the container app to ensure it has been deployed successfully:

az containerapp show `
  --name dayasync-weatherforecast-api `
  --resource-group RG-CONTAINER-APPS `
  --query "properties.provisioningState"

These commands help with monitoring, troubleshooting, and validating the deployment of your Azure Container App.

source code

Feel free to play around with the code by checking out the GitHub repo linked below.

https://github.com/azurecorner/azure-container-apps

Gora LEYE

I'm a microsoft most valuable professional (MVP) .NET Architect and Technical Expert skills located in Paris (FRANCE). The purpose of this blog is mainly to post general .NET tips and tricks, www.masterconduite.com Gora LEYE

Support us

BMC logoBuy me a coffee