Post

How to Deploy an App Service Web App using Azure CLI

Azure App Service offers the ability to deploy and run HTTP based applications on managed VM instances, this removes the overhead for you to maintain these virtual machines and instead focus your time and effort on your web application.

In this tutorial, we will walk through how to deploy an App Service App using the Azure CLI.

This content is available in video form on the Cloud Engineer Skills YouTube channel.

Deploy an App Service Web App using Azure CLI

We will cover two different types of applications to an App Service Web App.

The first application will use a predefined run time environment, in our walkthrough we will use Node.js version 20 LTS.

For the second application we will deploy a container image from a public repository in Docker Hub.

Deploy Code as an App Service Web App

An Azure App Service Web App allows to select a particular run time environment to deploy and run you code.

You can get the full list of run time environments supported using the following Azure CLI command.

1
az webapp list-runtimes

At the time of time of writing, here is a list of the different run time environments supported.

As you can see, the run time environments differ when running on Windows vs Linux operating sytem. This operating system is selected when you create your App Service Plan.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{
  "linux": [
    "DOTNETCORE:8.0",
    "DOTNETCORE:7.0",
    "DOTNETCORE:6.0",
    "NODE:20-lts",
    "NODE:18-lts",
    "NODE:16-lts",
    "PYTHON:3.12",
    "PYTHON:3.11",
    "PYTHON:3.10",
    "PYTHON:3.9",
    "PYTHON:3.8",
    "PHP:8.3",
    "PHP:8.2",
    "PHP:8.1",
    "PHP:8.0",
    "JAVA:21-java21",
    "JAVA:17-java17",
    "JAVA:11-java11",
    "JAVA:8-jre8",
    "JBOSSEAP:8-java17",
    "JBOSSEAP:8-java11",
    "JBOSSEAP:7-java17",
    "JBOSSEAP:7-java11",
    "JBOSSEAP:7-java8",
    "TOMCAT:10.1-java21",
    "TOMCAT:10.1-java17",
    "TOMCAT:10.1-java11",
    "TOMCAT:10.0-java17",
    "TOMCAT:10.0-java11",
    "TOMCAT:10.0-jre8",
    "TOMCAT:9.0-java21",
    "TOMCAT:9.0-java17",
    "TOMCAT:9.0-java11",
    "TOMCAT:9.0-jre8",
    "TOMCAT:8.5-java11",
    "TOMCAT:8.5-jre8"
  ],
  "windows": [
    "dotnet:8",
    "dotnet:7",
    "dotnet:6",
    "ASPNET:V4.8",
    "ASPNET:V3.5",
    "NODE:20LTS",
    "NODE:18LTS",
    "NODE:16LTS",
    "java:1.8:Java SE:8",
    "java:11:Java SE:11",
    "java:17:Java SE:17",
    "java:21:Java SE:21",
    "java:1.8:TOMCAT:10.1",
    "java:11:TOMCAT:10.1",
    "java:17:TOMCAT:10.1",
    "java:21:TOMCAT:10.1",
    "java:1.8:TOMCAT:10.0",
    "java:11:TOMCAT:10.0",
    "java:17:TOMCAT:10.0",
    "java:21:TOMCAT:10.0",
    "java:1.8:TOMCAT:9.0",
    "java:11:TOMCAT:9.0",
    "java:17:TOMCAT:9.0",
    "java:21:TOMCAT:9.0",
    "java:1.8:TOMCAT:8.5",
    "java:11:TOMCAT:8.5",
    "java:17:TOMCAT:8.5",
    "java:21:TOMCAT:8.5"
  ]
}

We will need to create the following Azure resources to deploy our code based App Service Web App:

  1. Azure Resource Group
  2. Azure App Service Plan
  3. Azure Web App

Creating a Resource Group

We will need to place the App Service Plan and Web App within a Resource Group.

We can use our Azure credentials to login via the Azure CLI with the az login command, from their we can select the appropriate Azure Subscription in the terminal.

1
az login

After that we can use the az group create command to create the Resource Group.

az group create --name resourceGroupName --location location

1
az group create --name cloudengineerskills-as-rg --location eastus

Creating an App Service Plan

Next we will need to create the App Service Plan.

An App Service Plan defines the amount of cloud compute resources that will become available to any Web Apps you decide to associate to this plan, this includes:

  1. The Number of VM instances
  2. The Size of VM instances (Small, Medium, Large)
  3. The Operating System of the VM instances (Windows, Linux)
  4. The Region (West US, East US, etc.)
  5. The Pricing tier (Free, Shared, Basic, Standard, Premium, PremiumV2, PremiumV3, Isolated, IsolatedV2)

To create an App Service Plan, use the az appservice plan create command.

Note that we will use the --is-linux flag to use a Linux Operating system for the VM instance.

az appservice plan create --resource-group resourceGroup --name appServicePlanName --number-of-workers numWorkers --sku appServicePlanSku --is-linux --location location

1
az appservice plan create --resource-group cloudengineerskills-as-rg --name NodeAppPlan --number-of-workers 1 --sku B1 --is-linux --location eastus

You can verify the App Service Plan has been created by listing the App Service Plans for a resource group using the az appservice plan list command, and showing the details of a specific App Service Plan using the az appservice plan show command.

az appservice plan list --resource-group resourceGroup

1
az appservice plan list --resource-group cloudengineerskills-as-rg

az appservice plan show --name appServicePlanName --resource-group resourceGroup

1
az appservice plan show --name NodeAppPlan --resource-group cloudengineerskills-as-rg

Deploying the Web App

In this section of the tutorial, we will be deploying a Node.js application which uses code from the hello world example from the popular Node.js web application framework Express.js.

Create a directory that will create the Node.js application we will be deploying, and create two files index.js and package.json.

You can copy and paste the code below into these two files.

See the code below for index.js

1
2
3
4
5
6
7
8
9
10
11
12
const express = require("express");
const app = express();

const port = 8080;

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

See the code below for package.json.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "deploy-code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.19.2"
  }
}

Change into the directory containing the Node.js project with the two files index.js and package.json, from there, before we can deploy the Web App, we will need to install the Express dependency using npm install.

Now we are ready to deploy the Web App, use the az webapp up command to deploy your Node.js application as a Web App.

az webapp up --name webAppName --resource-group resourceGroup --plan appServicePlanName --runtime runTimeEnvironment

1
az webapp up --name CloudEngineerSkillsNodeApp --resource-group cloudengineerskills-as-rg --plan NodeAppPlan --runtime "NODE:20-lts"

You can verify the deployment has been successful and get the hostname to your deployed web app by using the az webapp list command.

az webapp list --resource-group resourceGroup --query "[].{name: name, hostName: defaultHostName, state: state}"

1
az webapp list --resource-group cloudengineerskills-as-rg --query "[].{name: name, hostName: defaultHostName, state: state}"

Copy and paste the default host name into the browser and verify your application is running.

Clean up the resources

Deleting the Resource Group will also delete your App Service Plan and Web App, providing that you specified your resource group in the flags to the az appservice plan create and az webapp up commands earlier in the tutorial.

Delete your Resource Group with the az group delete command.

az group delete --name resourceGroupName

1
az group delete --name cloudengineerskills-as-rg

Deploy Container Image as an App Service Web App

In this section of the tutorial, we will use the nginx container image from Docker Hub and deploy it as a Web App along with it’s own App Service Plan.

Creating a Resource Group

To create a Resource Group we will need to login into Azure using the CLI using az login.

1
az login

Then we will use az group create to create the Resource Group which we will use later in the tutorial for the App Service Plan and Web App.

az group create --name resourceGroupName --location location

1
az group create --name cloudengineerskills-as-rg --location eastus

Creating an App Service Plan

To create an App Service Plan, use the az appservice plan create command.

Note that we will use the --is-linux flag to use a Linux Operating system for the VM instance.

az appservice plan create --resource-group resourceGroup --name appServicePlanName --number-of-workers numWorkers --sku appServicePlanSku --is-linux --location location

1
az appservice plan create --resource-group cloudengineerskills-as-rg --name NodeAppPlan --number-of-workers 1 --sku B1 --is-linux --location eastus

Deploying the Web App

For deploying a container image as a Web App we will use the az webapp create command and specify the following parameters:

  • -n: a unique name for the name of the Web App, this name will be included in the hostname for the Web App
  • -g: the resource group this Web App will be added to
  • -p: the name of the App Service Plan
  • -i: the name of the container image

az webapp create -n webAppName -g resourceGroup -p appServicePlanName -i containerImageName

1
az webapp create -n CloudEngineerSkillsContainer -g cloudengineerskills-as-rg -p NodeAppPlan -i nginx:latest

You can access the host name for your Web App from the az webapp list command, which you can test in a web browser to ensure you web app has been deployed successfully.

az webapp list --resource-group resourceGroup --query "[].{name: name, hostName: defaultHostName, state: state}"

1
az webapp list --resource-group cloudengineerskills-as-rg --query "[].{name: name, hostName: defaultHostName, state: state}"

Clean up the resources

Delete your Resource Group with the az group delete command.

az group delete --name resourceGroupName

1
az group delete --name cloudengineerskills-as-rg

Further Reading

This post is licensed under CC BY 4.0 by the author.