azdevfying .NET apps on Azure Container Apps

This provides sample .NET apps to be deployed onto Azure Container Apps through Azure Developer CLI.

Prerequisites

• Visual Studio 2022 17.10+ or Visual Studio Code with C# Dev Kit
• Azure Developer CLI
• Azure Functions Core Tools
• Docker Desktop

Architecture

Three .NET apps are provided in this repository:

• Blazor web app as a frontend
• ASP.NET Core Web API as a backend
• Azure Functions as a backend

Getting Started

NOTE: You can see the complete example including all the Bicep files by switching to the azdevfied branch.

1. Login to Azure through Azure Developer CLI.

   azd auth login

2. Run the following command to initialise azd. It will ask you to choose options how to initialise. Follow the instructions.

   azd init

   Once initialised, you will have both .azure and infra directories and both next-steps.md and azure.yaml files.

   At this stage, the web app doesn't know where the API and Functions apps are. Therefore, you need to update the main.bicep file to pass the API and Functions app URLs to the web app.

3. Open infra/main.bicep file and update the following section:

   module webApp './app/WebApp.bicep' = {
     name: 'WebApp'
     params: {
       ...
   
       // Add the following two lines
       apiEndpointUrl: apiApp.outputs.uri
       funcEndpointUrl: funcApp.outputs.uri
     }
     scope: rg
   }

4. Open infra/app/WebApp.bicep file and add the parameters:

   ...
   @secure()
   param appDefinition object
   
   // Add the following two lines
   param apiEndpointUrl string
   param funcEndpointUrl string
   ...

5. Update the env variable:

   // Before
   var env = map(filter(appSettingsArray, i => i.?secret == null), i => {
     name: i.name
     value: i.value
   })
   
   // After
   var env = union(map(filter(appSettingsArray, i => i.?secret == null), i => {
     name: i.name
     value: i.value
   }), [
     {
       name: 'API_ENDPOINT_URL'
       value: apiEndpointUrl
     }
     {
       name: 'FUNC_ENDPOINT_URL'
       value: funcEndpointUrl
     }
   ])

6. Run the following command to provision and deploy all the apps to Azure Container Apps.

   azd up

   NOTE: Make sure that Docker Desktop should be up and running before entering this command.

7. Once the deployment is completed, you will see the output like below:

   Deploying services (azd deploy)
   
     (✓) Done: Deploying service ApiApp
     - Endpoint: https://ca-apiapp-{{random-string}}.{{random-string}}.{{location}}.azurecontainerapps.io/
   
     (✓) Done: Deploying service FuncApp
     - Endpoint: https://ca-funcapp-{{random-string}}.{{random-string}}.{{location}}.azurecontainerapps.io/
   
     (✓) Done: Deploying service WebApp
     - Endpoint: https://ca-webapp-{{random-string}}.{{random-string}}.{{location}}.azurecontainerapps.io/

8. Click the web app URL above to see the deployed web app, and navigate to the /weather page. Then you will see the screen like below:

   

   The weather data is fetched from the ASP.NET Core Web API while the greetings message is fetched from the Azure Functions.

More Information

• Azure Container Apps
• Deployment options to Azure Container Apps
• Publish .NET apps to ACA via Azure CLI