Educator Developer Blog

8 MIN READ

Getting Started with Azure App Service: A Beginner's Guide to Web App Deployment

Copper Contributor

Jun 21, 2024

I'm Mahnoor Javaid, an enthusiastic Microsoft Learn Student Ambassador (MLSA) I’m delighted to present my blog, "Getting Started with Azure App Service: A Beginner's Guide to Web App Deployment", developed in collaboration with the Microsoft Learn team.

This blog will take you through getting started with Azure App Service with a comprehensive beginner's guide! Learn the step-by-step process of deploying your first web app using Azure. From navigating the Azure portal to mastering deployment via Azure CLI, unlock the secrets to seamless web app deployment.

Get ready to elevate your skills and bring your projects to life with Azure App Service!

Azure App Service is a fully managed platform as a service (PaaS) designed to host web applications, RESTful APIs, and mobile backends, simplifying the process of deploying, managing, and scaling your web apps. In this tutorial, I'll guide you through deploying your first web app using Azure App Service. Follow along to unlock the secrets of seamless web app deployment! You can also connect with me on LinkedIn for more updates and insights into the world of technology.

Prerequisites

Before diving in, ensure you have the following:

Microsoft Azure Account:

If you don't have one, sign up for a free account on the Azure Portal all students get a FREE Azure Subscription at Azure for Student

Deploying via Azure Portal

Steps to Deploy a Web App

1. Create and Set Up Your Azure Account

If you’re new to Azure, follow the steps to create your account.

2. Build Your Web Application

Choose your preferred tech stack (e.g., .NET, Python, Node.js, or Java) and develop your web application. You can use development tools like Visual Studio, Visual Studio Code, or the command line.

3. Create a Resource Group

In the Azure portal, navigate to the "Resource groups" section.

Click "Create" and enter a name for your resource group (e.g., "MyWebAppResourceGroup”).

Select your subscription and a region close to your user base, then click "Review + create".

4. Create Your Web App Service

Go to the "Create a resource" section and select " App Services".

On App Services click on " Web Services".

Fill in the necessary details:

Subscription: Choose your subscription.

Resource Group: Select the resource group you created.

Name: Enter a unique name for your web app.

Publish: Choose "Code" .

Runtime Stack: Select your application's runtime stack (e.g., .NET, Node.js).

Region: Choose the same region as your resource group.

Click "Review + create" and then "Create" to deploy your web app service.

5. Deploy Your Web App

You can deploy your web app using several methods such as GitHub Actions, Visual Studio, or Azure CLI. Here, we'll use Git:

Set Up Deployment Credentials: In the Azure portal, navigate to your web app's "Deployment Center".
Select Deployment Source: Choose "Local Git" as the deployment source.

Clone the Repository: Copy the Git clone URL provided by Azure.
Deploy Your Code:
Open a terminal and clone the repository:
```
git clone <Azure_Git_URL>
```
Navigate to the cloned directory:
```
cd <your_app_directory>
```
Add your web app code to the directory.

Commit and push your changes:

git add . 

git commit -m "Initial commit" 

git push azure master

6. Monitor Your App

Use Azure Monitor, Application Insights, and Diagnostic Logs to keep an eye on your app's performance.

Azure Monitor: Azure Monitor is a comprehensive solution for collecting, analyzing, and acting on telemetry data from your cloud and on-premises environments. It allows you to track the performance and health of your applications and services. Learn more about Azure Monitor.
Application Insights: Application Insights is an Application Performance Management (APM) service designed to help you monitor your application's live performance, detect and diagnose performance issues, and understand user behavior. Explore Application Insights.
Diagnostic Logs: Diagnostic Logs enable you to capture detailed runtime information from your Azure resources. These logs are essential for monitoring performance, troubleshooting issues, and auditing activity within your applications. Learn more about Azure Diagnostic Logs.

Access these tools via the Azure portal to ensure everything runs smoothly.

In the Azure portal, navigate to the respective service's monitoring section to access Azure Monitor, Application Insights, and Diagnostic Logs for your app.

7. Add Custom Domains & SSL Certificate

Step 1: Obtain a SSL Certificate

Get an SSL certificate from a trusted CA like DigiCert, GoDaddy, or Cloudflare again as students you get access to these services for FREE via the GitHub Student Pack

Step 2: Upload the SSL Certificate to Azure

Log in to the Azure Portal
Navigate to the Azure resource where you want to install the SSL certificate, such as an App Service
Go to the SSL settings and upload the certificate, private key, and any intermediate certificates.

Validate the certificate that you have uploaded.

Step 3: Update DNS Settings

For custom domains, update the DNS records to point to the Azure resource’s IP address or domain. For App Services, use the provided default domain without updating DNS settings.

Step 4: Test and Enforce HTTPS
Test your website or service with HTTPS to ensure the SSL certificate is functioning correctly. For improved security, enforce HTTPS by redirecting all HTTP traffic to HTTPS.

8. Connect to a Database

Securely Connecting Azure App Service to Services and Databases

Your Azure App Service might need secure connections to various services. Here's how to do it effectively:

Connection Methods

1. App Identity

When to Use: No authenticated user is present; credentials aren’t accessible or need management.
How: Managed identities handle credentials via role-based access control (RBAC).
Examples: Access Microsoft Graph, Azure SDKs.

2. Authenticated User

When to Use: Actions require the permissions of the signed-in user.
Examples: Access Microsoft Graph, SQL database as the user.

3. Secrets

App Settings: Store secrets as environment variables (encrypted-at-rest).
Key Vault: Secure storage, restricts access, provides monitoring.

When to Use: Non-Azure services or resources needing keys.
Options:

Deploying and Securing an ASP.NET Core App on Azure

Learn how to deploy an ASP.NET Core app to Azure App Service, connect it to Azure SQL Database and Azure Cache for Redis, and ensure secure connections.

Prerequisites

Active Azure account
GitHub account

Steps to Deploy:

1. Create Azure Resources

App Service: Host the web app.
Azure SQL Database: Manage the database.
Azure Cache for Redis: Enable caching.
Configure app name, region, runtime stack (.NET 7), hosting plan, and resource group.

2. Verify Connection Strings

Check AZURE_SQL_CONNECTIONSTRING and AZURE_REDIS_CONNECTIONSTRING in App Service configuration.

3. Deploy Sample Code

Fork the sample repository on GitHub.
Configure GitHub Actions for CI/CD.
Modify appsettings.json and Program.cs with correct connection strings.
Commit and push changes to trigger deployment.

4. Generate Database Schema

Use SSH in App Service to run database migrations.

5. Browse to the App

Navigate to the deployed app URL and test functionality.

9. Review Best Practices

Scaling:

Auto-Scaling: Utilize Azure's auto-scaling features to automatically adjust your app's resources based on demand. Learn more about scaling options in Azure App Service.
Manual Scaling: If you prefer more control, manually scale your app by adjusting the number of instances or the performance tier of your App Service Plan. Learn how to scale an app in Azure.
Monitoring: Use Azure Monitor to track the performance and load on your application. Set up alerts to notify you when scaling actions are necessary. Explore Azure Monitor for detailed monitoring capabilities.

Security:

HTTPS: Ensure all communications with your app are encrypted by enforcing HTTPS. This can be done through the Azure Portal or by configuring web.config files for your application. Learn how to enforce HTTPS in Azure App Service.
Secure Coding Practices: Follow secure coding guidelines to protect against common vulnerabilities such as SQL injection, cross-site scripting (XSS), and cross-site request forgery (CSRF). Explore the OWASP Top Ten for best practices.
Azure Security Center: Use Azure Security Center to get security recommendations and best practices. It provides advanced threat protection across your workloads and integrates with other Azure services to enhance security. Learn more about Azure Security Center.

Network Security:

Virtual Network (VNet): Deploy your web app within a Virtual Network (VNet) to isolate it from other networks and enhance security. This setup allows you to control inbound and outbound traffic, and implement network security groups (NSGs) to filter traffic. Learn about Azure Virtual Network (VNet).
Private Endpoints: Use Private Endpoints to securely connect to Azure services, such as Azure SQL Database or Azure Storage, without exposing your resources to the public internet. Explore Azure Private Endpoint for more information.
Application Gateway and Web Application Firewall (WAF): Protect your application from common web vulnerabilities by using Azure Application Gateway with integrated WAF. This helps in defending against threats such as SQL injection and cross-site scripting attacks. Learn more about Azure Application Gateway and WAF.

Deploying via Azure CLI

1. Install Azure CLI:

Requirements:

Ensure that you have the Azure CLI installed on your machine.
You will need administrative privileges to install software on your machine.

Installation Process:

Download and install Azure CLI from the Azure CLI page.

2. Install Git:

Requirements:

Git is required for deploying your code using Git repositories.
Administrative privileges are needed to install software.

Installation Process:

Download and install Git from the Git Downloads page.
Follow the installation instructions for your operating system.

3. Log in to Azure:

Open your command line interface and log in to your Azure account using the command: az login

1. Create a Resource Group:

Create a resource group for organizing related resources using the command:

az group create --name <ResourceGroupName> --location <Location>

2. Create an App Service Plan:

Create an app service plan which defines the location, features, and cost of your web app using the command:

az appservice plan create --name <PlanName> --resource-group <ResourceGroupName> --sku FRE

3. Create a Web App:

Create your web app within the app service plan using the command:

az webapp create --name <AppName> --resource-group <ResourceGroupName> --plan <PlanName>

4. Deploy Your App:

Deploy your code to the web app using one of the deployment methods such as FTP, local Git, GitHub, etc. For example, to deploy from a local Git repository, use the command:

az webapp deployment source config-local-git --name <AppName> --resource-group <ResourceGroupName> --query url --output tsv

5. Push Your Code:

Push your code to the deployment URL provided by the previous command.

6. Browse Your Web App:

Once the deployment is complete, you can browse your web app using the command:

az webapp browse --name <AppName> --resource-group <ResourceGroupName>

Remember to replace <ResourceGroupName>, <Location>, <PlanName>, and <AppName> with your actual resource group name, location, app service plan name, and web app name, respectively.

Conclusion

Congratulations! You’ve successfully deployed your web app using Azure App Service. Now, you can explore additional Azure features and services to further enhance your app. Happy coding!