Provisioning Azure App Services to host your Hello World webapp
15 Mar 2023
Thus far in this series, we’ve written the world’s tiniest webserver, added unit tests to its codebase, told Azure DevOps (“ADO”) Pipelines to auto-build a runnable web server for us each time we update our Git-tracked source code, and told ADO to fail the build process if the unit tests don’t pass.
Before we can ask friends to visit our new website, we’ll need to rent a webserver host from Microsoft Azure’s public cloud.
Azure App Service’s (“AAS’s”) Web Apps service (“AASWA”) is a great choice for a simple web server. Let’s rent ourselves two such resource instances:
- One to host our “production” website.
- Another to host a “nonproduction” website where we can play with new ideas in private.
Prerequisites
- Have an account in Azure.
- Log your computer’s command line into that Azure account.
- Determine the unique name of the Azure resource group that you’d like to create things within, and make sure it exists.
- For this exercise, I created a brand new one named “
my-hello-web-rg” inside my Azure account.
- For this exercise, I created a brand new one named “
Note: In an enterprise context, your 2 AASWA resources might end up in two separate resource groups – one for production and one for nonproduction.
Luckily, in an enterprise setting, there’s probably another team worrying about this for you who will be provisioning your Azure resource group resources, Azure App Service Service Plan (“AASSP”) resources, and AASWA resources for you.
For the purpose of following tutorials in this series, we’re going to save ourselves time and provision the simplest architecture possible.
Provision 1 Service Plan resource
In my scripts below, be sure to substitute:
- “
my-hello-web-rg” if that’s not actually the name of your resource group. - “
my-first-app-service-plan” if that’s not actually the name of the app service plan you’d like to create.
With Azure PowerShell
If ( `
Get-AzAppServicePlan `
-ResourceGroupName "my-hello-web-rg" `
-Name "my-first-app-service-plan" `
) {} `
Else { `
New-AzAppServicePlan `
-ResourceGroupName "my-hello-web-rg" `
-Name "my-first-app-service-plan" `
-Location "centralus" `
-Tier "F1" `
-Linux; `
}
If you get an error of…
New-AzAppServicePlan: Operation returned an invalid status code 'Unauthorized'
…then Microsoft might still be out of “centralus” app service plans, which was an issue in the spring of 2023 as this article went to press.
Try something else like eastus or northcentralus or westus.
With the Azure CLI
In a Windows PowerShell command prompt
If ( `
az appservice plan show `
--resource-group "my-hello-web-rg" `
--name "my-first-app-service-plan" `
) {} `
Else { `
az appservice plan create `
--resource-group "my-hello-web-rg" `
--name "my-first-app-service-plan" `
--location "centralus" `
--sku "F1" `
--is-linux; `
}
If you get an error of…
This region has a quota of 0 instances for your subscription. Try selecting different region or SKU.
…then Microsoft might still be out of “centralus” app service plans, which was an issue in the spring of 2023 as this article went to press.
Try something else like eastus or northcentralus or westus.
In a Linux-style command prompt
if [ \
"[]" == $(az appservice plan list --query "[?resourceGroup=='my-hello-web-rg' && name=='my-first-app-service-plan']") \
]; \
then
az appservice plan create \
--resource-group "my-hello-web-rg" \
--name "my-first-app-service-plan" \
--location "centralus" \
--sku "F1" \
--is-linux; \
fi;
Provision 2 Web App resources
In my scripts below, be sure to substitute:
- “
my-hello-web-rg” if that’s not actually the name of your resource group. - “
my-first-app-service-plan” if that’s not actually the name of your app service plan. - “
my-first-webapp-nonprod” if that’s not actually the name of the nonproduction app service web app you’d like to create. - “
my-first-webapp-prod” if that’s not actually the name of the production app service web app you’d like to create. - “
Central US” if that’s not actually the name of the region in which you’d like to create your web app (parameter helps make web app creation work in Azure PowerShell). - “
NODE:18-lts” if that’s not actually the runtime for the codebase you’ll be deploying to your web app (parameter helps make web app creation work in the Azure CLI).
With Azure PowerShell
If ( `
Get-AzWebApp `
-ResourceGroupName "my-hello-web-rg" `
-Name "my-first-webapp-nonprod" `
) {} `
Else { `
New-AzWebApp `
-ResourceGroupName "my-hello-web-rg" `
-AppServicePlan "my-first-app-service-plan" `
-Location "Central US" `
-Name "my-first-webapp-nonprod"; `
} `
If ( `
Get-AzWebApp `
-ResourceGroupName "my-hello-web-rg" `
-Name "my-first-webapp-prod" `
) {} `
Else { `
New-AzWebApp `
-ResourceGroupName "my-hello-web-rg" `
-AppServicePlan "my-first-app-service-plan" `
-Location "Central US" `
-Name "my-first-webapp-prod"; `
}
If you get an error of…
New-AzWebApp: Operation returned an invalid status code 'NotFound'
…then perhaps the “Location” parameter value you picked doesn’t match the one you created your app service plan in.
Try matching it to the app service plan.
With the Azure CLI
In a Windows PowerShell command prompt
If ( `
az webapp show `
--resource-group "my-hello-web-rg" `
--name "my-first-webapp-nonprod" `
) {} `
Else { `
az webapp create `
--resource-group "my-hello-web-rg" `
--plan "my-first-app-service-plan" `
--runtime "NODE:18-lts" `
--name "my-first-webapp-nonprod"; `
} `
If ( `
az webapp show `
--resource-group "my-hello-web-rg" `
--name "my-first-webapp-prod" `
) {} `
Else { `
az webapp create `
--resource-group "my-hello-web-rg" `
--plan "my-first-app-service-plan" `
--runtime "NODE:18-lts" `
--name "my-first-webapp-prod"; `
}
In a Linux-style command prompt
if [ \
"[]" == $(az webapp list --query "[?resourceGroup=='my-hello-web-rg' && plan=='my-first-app-service-plan' && name=='my-first-webapp-nonprod']") \
]; \
then
az webapp create \
--resource-group "my-hello-web-rg" \
--plan "my-first-app-service-plan" \
--runtime "NODE:18-lts" \
--name "my-first-webapp-nonprod"; \
fi; \
if [ \
"[]" == $(az webapp list --query "[?resourceGroup=='my-hello-web-rg' && plan=='my-first-app-service-plan' && name=='my-first-webapp-prod']") \
]; \
then
az webapp create \
--resource-group "my-hello-web-rg" \
--plan "my-first-app-service-plan" \
--runtime "NODE:18-lts" \
--name "my-first-webapp-prod"; \
fi;
Posts in this series
- Part 1 - Source code that builds locally into a Node.js Hello World webapp
- Part 2 - Locally unit-testing source code for a Node.js Hello World webapp
- Part 3 - Protecting Git branches in Azure DevOps repositories
- Part 4 - Making Azure DevOps Pipelines build a Hello World webapp from Git-tracked source code changes
- Part 5 - Failing Azure DevOps Pipeline builds if unit tests fail
- Part 6 - Logging your command line into Azure
- Part 7 - Provisioning an Azure Resource Group
- Part 8 - This Article
- Part 9 - Provisioning Azure AD Service Principals that can deploy built webapps onto your Azure App Service resources
- Part 10 - Provisioning Azure DevOps Service Connections that let ADO Release Pipelines leverage Azure AD Service Principals for sensitive CI/CD tasks
- Part 11 - Deploying a built webapp onto Azure App Service with ADO Release Pipelines
