Posted on March 11, 2023
We already talked about the implementation of Azure Function App in a previous article In this tutorial, we will be deploying our sample function app through a multi-stage pipeline. Let's walk through with very beginning by creating an Azure DevOps account. Note: I will ensure that all resources in Azure are cleaned up by the time you read this article. Create a Free Azure subscription to create an environment of Azure function ResourceGroupName | codehack-rg sampleFunctionName | sample-func-16527 Sample below is a template but not actual implementation Which will deploy Build Angular Application, Deploy Function App, and then Deploy Angular App You'll need to replace the placeholder values (
Let's see the steps we will be covering here.
Setup your Azure DevOps environment
Create the Azure function environment
Use Cloud Shell through the Azure portal
Create a Bash variable
az configure --defaults location=eastus
resourceSuffix=$RANDOM
sampleFunctionName="sample-func-${resourceSuffix}"
storageName="samplefuncstorage${resourceSuffix}"
rgName='codehack-rg'
Create Azure resources through Bash variable
az storage account create \
--name $storageName \
--resource-group $rgName \
--sku Standard_LRS
az functionapp create \
--name $sampleFunctionName \
--resource-group $rgName \
--storage-account $storageName \
--functions-version 4 \
--consumption-plan-location eastus
az functionapp list \
--resource-group $rgName \
--query "[].{hostName: defaultHostName, state: state}" \
--output table
Create pipeline variable in Azure pipeline
Create an environment
Create a service connection
Deploy an Azure Functions app to Azure
Let's see Multi-Stage Pipeline
# Multi-stage pipeline to deploy Angular app and C# function app to Azure
trigger:
- main
stages:
- stage: BuildAngular
displayName: 'Build Angular App'
jobs:
- job: Build
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool@0
inputs:
versionSpec: '14.x'
displayName: 'Install Node.js'
- script: |
npm install -g @angular/cli
npm install
displayName: 'Install Angular CLI and dependencies'
- script: |
ng build --prod
displayName: 'Build Angular app'
- stage: DeployFunctionApp
displayName: 'Deploy Function App'
dependsOn: BuildAngular
jobs:
- job: Deploy
pool:
vmImage: 'ubuntu-latest'
variables:
azureSubscription: '<Azure subscription name>'
resourceGroupName: '<resource group name>'
functionAppName: '<function app name>'
region: '<region name>'
steps:
- task: DotNetCoreCLI@2
inputs:
command: 'publish'
publishWebProjects: true
projects: '**/*.csproj'
arguments: '-o $(Build.ArtifactStagingDirectory)'
displayName: 'Publish Function App'
- task: AzureRmWebAppDeployment@4
inputs:
ConnectionType: 'AzureRM'
azureSubscription: $(azureSubscription)
appType: 'functionApp'
appName: $(functionAppName)
package: '$(Build.ArtifactStagingDirectory)/**/*.zip'
runtimeStack: DOCKER|microsoft/azure-functions-dotnet:4
ResourceGroupName: $(resourceGroupName)
SlotName: 'production'
region: $(region)
- stage: DeployAngularApp
displayName: 'Deploy Angular App'
dependsOn: BuildAngular
jobs:
- job: Deploy
pool:
vmImage: 'ubuntu-latest'
variables:
azureSubscription: '<Azure subscription name>'
resourceGroupName: '<resource group name>'
webAppName: '<web app name>'
region: '<region name>'
steps:
- task: AzureWebApp@1
inputs:
azureSubscription: $(azureSubscription)
appType: 'webAppLinux'
appName: $(webAppName)
package: '$(System.DefaultWorkingDirectory)/dist/<angular app name>'
runtimeStack: 'NODE|14-lts'
region: $(region)
resourceGroupName: $(resourceGroupName)
<Azure subscription name>
, <resource group name>
, <function app name>
, <web app name>
, <region name>
, and <angular app name>
) with your actual values. Following tweaks you might need to do it here.
variables:
- group: Release
environment: spike
inputs:
azureSubscription: 'Resource Manager - Function - Demo'
$(functionAppName)
and $(webAppName)
$(webAppName): sample-func-web-16527
$(functionAppName): sample-func-16527