How to deploy a web app to Azure App Service

Posted on by Panther

Azure App Service is a fully managed platform that allows developers to build, deploy and scale web apps quickly and easily. In this tutorial, we will cover how to deploy a web app to Azure App Service using different tools and methods. We will also cover how to connect to a database and configure custom domains.

Prerequisites

Before getting started, there are a few prerequisites you need to have in place:

  • An Azure account. You can create a free account here if you don’t have one already.
  • An IDE (Integrated Development Environment) for your programming language of choice such as Visual Studio, VS Code, Eclipse or IntelliJ IDEA.
  • A web app that you want to deploy. For this tutorial, we will use a simple Node.js app.

Create an App Service

To deploy a web app to Azure App Service, we need to create an App Service first:

  1. Login to the Azure portal using your Azure account credentials.
  2. On the left-hand menu, click on “App Services”.
  3. Click on the “Add” button to create a new App Service.
  4. Fill in the required details for the new app service, including the subscription, resource group, app service name, and runtime stack. For runtime stack, select Node.js for a Node.js app. You can also choose to configure additional settings such as Application Insights and deployment slots.
  5. Click on “Create” to create the new app service.

Once the App Service is created, we can deploy our web app.

Deploying via FTP

One way to deploy a web app is via FTP. We will need to retrieve the FTP publishing credentials for our app service and then use an FTP client such as FileZilla to connect and transfer the web app files.

  1. In the Azure portal, navigate to the App Service that you want to deploy to.
  2. On the left-hand menu, click on “Deployment Center” under the “Deployment” section.
  3. Select “FTP” as the deployment method and click “FTP/Credentials” to retrieve the FTP hostname, username, and password. Save these credentials for later.
  4. Download and install an FTP client such as FileZilla.
  5. Open FileZilla and enter the FTP hostname, username, and password retrieved earlier.
  6. Navigate to the local directory where your web app files are stored and select them all.
  7. Drag and drop the files to the server (right-hand side of FileZilla).
  8. Wait for the transfer to complete, and then navigate to the app service URL to view your deployed web app.

Deploying via Git

Another way to deploy a web app is via Git. We can link our Git repository to our app service and use Git pushes to deploy changes. Here is how:

  1. In the Azure portal, navigate to the App Service that you want to deploy to.
  2. On the left-hand menu, click on “Deployment Center” under the “Deployment” section.
  3. Select “GitHub” as the source control and click “Authorize” to link the Azure portal to your GitHub account.
  4. Select the repository, branch and folder that contain your web app files and click “Continue”.
  5. Configure any additional settings such as deployment slots and Application Insights if needed.
  6. Click “Finish” to deploy the web app.

Once the deployment is complete, any subsequent Git pushes to the linked repository will automatically be deployed to the app service.

Connecting to a Database

In many cases, web apps need to connect to a database to store and retrieve data. Azure App Service provides many options for connecting to a database, such as Azure SQL Database, MySQL, PostgreSQL, and MongoDB. Here are the general steps to connect to a database from your web app:

  1. Create a database in Azure. We won’t cover the specifics of creating a database in this tutorial, but you can refer to the Azure documentation for more information.
  2. Retrieve the connection string for the database. This is typically a URL that contains the server name, username, password, and database name.
  3. In your web app’s code, update the database connection string to use the one retrieved in step 2.
  4. Deploy the updated web app using one of the methods we covered earlier.

Configuring Custom Domains

By default, Azure App Service provides a URL for your web app that looks something like this: https://<app-service-name>.azurewebsites.net/. However, you may want to use a custom domain name instead of the default Azure domain name. Here is how to configure a custom domain name for your Azure App Service:

  1. Register a domain name with a domain registrar such as GoDaddy or Namecheap if you don’t have one already.
  2. In the Azure portal, navigate to the App Service that you want to add a custom domain to.
  3. On the left-hand menu, click on “Custom domains” under the “Settings” section.
  4. Click on “Add custom domain”, and enter your custom domain name.
  5. Follow the instructions to verify domain ownership with your domain registrar.
  6. Once your ownership is verified, navigate to your domain registrar and configure a CNAME record that points to your app service URL. The CNAME record should look something like this: <app-service-name>.azurewebsites.net.
  7. Wait for the DNS changes to propagate, which can take up to 24 hours.
  8. Once the DNS changes have propagated, your custom domain should now point to your Azure App Service.

Conclusion

In this tutorial, we covered the basics of deploying a web app to Azure App Service using different tools and methods. We also covered how to connect to a database and configure custom domains. Azure App Service provides a powerful platform for building and deploying web apps quickly and easily. Hope this tutorial was helpful in familiarizing you with deploying web apps on Azure App Service.

Related Post