Introduction
In this blog post, I will walk through the steps involved in deploying a basic web app on Azure App Service. The process includes setting up the infrastructure on Azure, creating the web app using Visual Studio Code, and deploying it successfully to Azure.
Project Overview
This project revolves around creating a basic .NET MVC Web Application and deploying it to Azure App Service. The task covers configuring the necessary Azure resources like the App Service Plan, Web App, and setting up continuous deployment.
Step 1: Create Web App in Azure Portal
To begin, I set up the infrastructure for the web app using the Azure Portal.
1️⃣ Sign in to the Azure portal at portal.azure.com.
2️⃣ Create a Resource Group:
Resource Group: az-rg1 (This helps organize and manage resources)
3️⃣ App Service Details:
Name: ftbfchgmcgczapaf.uksouth-01.azurewebsites.net
Region: UK South
Runtime Stack: .NET 9 (STS)
Operating System: Linux
App Service Plan: Free F1 (Shared infrastructure)
4️⃣ App Insights:
Enable Application Insights: No (Optional for initial setup)
5️⃣ Networking:
Enable public access: Yes (Allows the web app to be publicly accessible on the internet)
Continuous Deployment: Disabled (I can configure it later if needed)
6️⃣ Finalize:
I reviewed all settings and clicked Create to provision the resources.
📌 Tip: The App Service Plan is essential as it determines the compute resources and features available for the app. The Free F1 tier allows limited resources and is perfect for basic testing.
Step 2: Create a New Web Application Project in Visual Studio Code
To start building my app, I created a new .NET MVC Web Application in Visual Studio Code.
1️⃣ Install .NET SDK:
Before starting, ensure that the .NET SDK is installed on your machine. You can download it from the official .NET site.
2️⃣ Create a New MVC Application:
Open Visual Studio Code and navigate to the terminal: Ctrl + ~.
Create a new folder and navigate to it:
mkdir DOTNET_TEST
cd DOTNET_TEST
Run the following command to create a new MVC project:
dotnet new mvc
3️⃣ Run the Application Locally:
After creating the project, run it with:
dotnet run
Open a web browser and go to http://localhost:5127 to see the app running.
📌 Tip: Make sure to install the C# extension in Visual Studio Code to enable IntelliSense and debugging features for your .NET project.
Step 3: Deploy the Application to Azure App Service
Once the local application was working, I deployed it to Azure App Service using Visual Studio Code.
1️⃣ Install Extensions:
Install the Azure App Service and Azure Account extensions from the Visual Studio Code marketplace.
2️⃣ Deploy to Web App:
Right-click on the app service project in the Azure pane of Visual Studio Code.
Select Deploy to Web App and follow the prompts to choose the Azure subscription and App Service you created earlier.
3️⃣ Error: 403 - Forbidden:
While deploying, I encountered a 403 Forbidden error, indicating that public network access was disabled for the Azure App Service.
4️⃣ Solution:
I navigated to the Azure Portal, selected the App Service, and went to Networking → Access Restrictions.
I enabled public network access by selecting Allow all networks, which resolved the issue.
5️⃣ Reattempt the Deployment:
After enabling public access, I reattempted the deployment, and this time, it was successful.
📌 Tip: If you encounter a 403 Forbidden error, check if public access is enabled in the Networking section of the App Service.
Step 4: Verify the Deployed Application
After the deployment succeeded, I tested the live web app.
1️⃣ Navigate to the Public URL:
The public URL of my web app was: ftbfchgmcgczapaf.uksouth-01.azurewebsites.net.
I confirmed the deployment by visiting the URL and verifying that the default MVC application was displayed.
📌 Tip: You can always view the status of your web app directly in the Azure portal, where the App Service will show its current state, and the health metrics will be available.
Step 5: Cleanup Resources
Once the deployment was successful, I cleaned up the resources to avoid incurring unnecessary charges.
1️⃣ Delete Resource Group:
I navigated to the resource group created earlier, selected it, and clicked Delete to remove all associated resources, including the App Service.
📌 Tip: Always remember to delete unused resources, especially when working in a test environment, to avoid unnecessary charges.
Key Takeaways
Azure App Service allows you to quickly deploy, manage, and scale web applications on a fully managed platform.
App Service Plan is a crucial resource that determines the features and compute power available for the web app.
Deployment Errors (403 Forbidden) can occur due to network access restrictions; enabling public access can resolve these issues.
Monitoring and scaling options are available in the Azure portal to manage and scale your web applications as needed.
Conclusion
This project provided me with hands-on experience in deploying a basic .NET MVC Web Application to Azure App Service. I learned how to handle issues like network access restrictions and gained insights into how App Service Plans and resource groups help manage Azure resources efficiently.
The deployment process went smoothly after resolving the 403 error, and the web app was live and accessible. This task reinforced the importance of configuring Azure resources properly and how to troubleshoot common issues.
Credits : https://www.datacamp.com/blog/azure-project-ideas
https://medium.com/@nirajranasinghe/hosting-your-first-web-application-on-azure-app-service-a-comprehensive-introduction-to-setting-up-90008c84e400
🚀 Stay tuned for more as I continue my learning journey with Azure!
Top comments (0)