Tutorial: Connect an App Services Web app to an Azure Database for MySQL flexible server in a virtual network

[APPLIES TO: Azure Database for MySQL - Flexible Server

This tutorial shows you how to create and connect an Azure App Service Web App to an Azure Database for MySQL flexible server isolated inside same or different virtual networks.

In this tutorial you will learn how to:

  • Create a MySQL flexible server in a virtual network
  • Create a subnet to delegate to App Service and create a web app
  • Add the web app to the virtual network
  • Connect to MySQL flexible server from the web app
  • Connect a Web app and MySQL flexible server isolated in different VNets

Prerequisites

If you don't have an Azure subscription, create an Azure free account before you begin. With an Azure free account, you can now try Azure Database for MySQL - Flexible Server for free for 12 months. For more information, see Try Flexible Server for free.

This article requires that you're running the Azure CLI version 2.0 or later locally. To see the version installed, run the az --version command. If you need to install or upgrade, see Install Azure CLI.

You'll need to login to your account using the az login command. Note the id property from the command output for the corresponding subscription name.

az login

If you have multiple subscriptions, choose the appropriate subscription in which the resource should be billed. Select the specific subscription ID under your account using az account set command. Substitute the subscription ID property from the az login output for your subscription into the subscription ID placeholder.

az account set --subscription <subscription ID>

Create an Azure Database for MySQL Flexible Server

Create a private flexible server inside a virtual network (VNET) using the following command:

az mysql flexible-server create --resource-group myresourcegroup --location westus2 --vnet VNETName

Copy the connection string and the name of the newly created virtual network. This command performs the following actions, which may take a few minutes:

  • Create the resource group if it doesn't already exist.
  • Generates a server name if it is not provided.
  • Create a new virtual network, VNETName for your new MySQL server and subnet within this virtual network for the database server. Make sure the name is unique.
  • Creates admin username , password for your server if not provided.
  • Creates an empty database called flexibleserverdb

Note

Make a note of your password that will be generate for you if not provided. If you forget the password you would have to reset the password using az mysql flexible-server update command

Create Subnet for App Service Endpoint

We now need to have subnet that is delegated to App Service Web App endpoint. Run the following command to create a new subnet in the same virtual network as the database server was created.

az network vnet subnet create -g myresourcegroup --vnet-name VNETName --name webappsubnetName  --address-prefixes 10.0.1.0/24  --delegations Microsoft.Web/serverFarms --service-endpoints Microsoft.Web

Make a note of the virtual network name and subnet name after this command as would need it to add VNET integration rule for the web app after it is created.

Create a web app

In this section, you create app host in App Service app and connect this app to the MySQL database. Make sure you're in the repository root of your application code in the terminal.

Create an App Service app (the host process) with the az webapp up command

az webapp up --resource-group myresourcegroup --location westus2 --plan testappserviceplan --sku P2V2 --name mywebapp

Note

  • For the --location argument, use the same location as you did for the database in the previous section.
  • Replace <app-name> with a unique name across all Azure (the server endpoint is https://\<app-name>.azurewebsites.net). Allowed characters for <app-name> are A-Z, 0-9, and -. A good pattern is to use a combination of your company name and an app identifier.
  • App Service Basic tier does not support VNET integration. Please use Standard or Premium.

This command performs the following actions, which may take a few minutes:

  • Create the resource group if it doesn't already exist. (In this command you use the same resource group in which you created the database earlier.)
  • Create the App Service plan testappserviceplan in the Basic pricing tier (B1), if it doesn't exist. --plan and --sku are optional.
  • Create the App Service app if it doesn't exist.
  • Enable default logging for the app, if not already enabled.
  • Upload the repository using ZIP deployment with build automation enabled.

Add the web app to the virtual network

Use az webapp vnet-integration command to add a regional virtual network integration to a webapp. Replace <vnet-name> and <subnet-name with the virtual network and subnet name that the flexible server is using.

az webapp vnet-integration add -g myresourcegroup -n  mywebapp --vnet VNETName --subnet webappsubnetName

Configure environment variables to connect the database

With the code now deployed to App Service, the next step is to connect the app to the flexible server in Azure. The app code expects to find database information in a number of environment variables. To set environment variables in App Service, you create "app settings" with the az webapp config appsettings set command.

az webapp config appsettings set --settings DBHOST="<mysql-server-name>.mysql.database.azure.com" DBNAME="flexibleserverdb" DBUSER="<username>" DBPASS="<password>"
  • Replace <mysql-server-name>, <username>, and <password> for the newly created flexible server command.
  • Replace <username> and <password> with the credentials that the command also generated for you.
  • The resource group and app name are drawn from the cached values in the .azure/config file.
  • The command creates settings named DBHOST, DBNAME, DBUSER, and DBPASS. If your application code is using different name for the database information then use those names for the app settings as mentioned in the code.

Configure the web app to allow all outbound connections from within the virtual network.

az webapp config set --name mywebapp --resource-group myresourcesourcegroup --generic-configurations '{"vnetRouteAllEnabled": true}'

App Service Web app and MySQL flexible server in different virtual networks

If you have created the App Service app and the MySQL flexible server in different virtual networks (VNets), you will need to do the following two steps to establish a seamless connection:

  • Connect the two VNets using VNet peering (local or global). See Connect virtual networks with virtual network peering guide.
  • Link MySQL flexible server's Private DNS zone to the web app's VNet using virtual network links. If you use the Azure portal or the Azure CLI to create MySQL flexible servers in a VNet, a new private DNS zone is auto-provisioned in your subscription using the server name provided. Navigate to the flexible server's private DNS zone and follow the How to link the private DNS zone to a virtual network guide to set up a virtual network link.

Clean up resources

Clean up all resources you created in the tutorial using the following command. This command deletes all the resources in this resource group.

az group delete -n myresourcegroup

Next steps