paint-brush
How to Deploy an ASP.NET Core Web App in Azure From Docker Imageby@igorlopushko
1,212 reads
1,212 reads

How to Deploy an ASP.NET Core Web App in Azure From Docker Image

by Igor LopushkoJanuary 19th, 2024
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

In this article, I will give a detailed guide on how to create a simple ASP.NET Core web application, create a docker image with your application, and the easiest way to deploy it to Azure. In the end, you will have a good understanding of how to deploy your web application and make it accessible to the whole world.
featured image - How to Deploy an ASP.NET Core Web App in Azure From Docker Image
Igor Lopushko HackerNoon profile picture

Introduction

As web developers, we used to find appropriate hosting for our applications with all the complications of deploying and maintaining them. But now, we live in a new era when cloud providers can make a lot of things for us at almost no cost. As for .NET developers, Microsoft Azure looks most natural choice to host web applications.


Docker is another piece of technology that makes it possible to abstract from the platform and environment you are running your application.


In this article, I will give a detailed guide on how to create a simple ASP.NET Core web application, create a docker image with your application, and the easiest way to deploy it to Azure. In the end, you will have a good understanding of how to deploy your web application and make it accessible to the whole world.

1. Create ASP.NET Core Web App

I’m going to use JetBrains Rider for the purpose of the development in this article. But you can use any tool you want.


First, you need to create a new project. Let’s call it simple ‘webapp’.

Create new solution


After creating a new project, it should look like this:

Project structure


2. Create a Docker Image

Without any changes in the project, we are going to focus on the Dockerfile. Modify it as the following example:

FROM mcr.microsoft.com/dotnet/aspnet:6.0 as base
WORKDIR /app
EXPOSE 8080
ENV ASPNETCORE_URLS http://+:8080

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
COPY . /src
WORKDIR /src
RUN dotnet build "webapp.csproj" -c Release -o /app/build 

FROM build AS publish
RUN dotnet publish "webapp.csproj" -c Release -o /app/publish 

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "webapp.dll"]


You need to pay attention to the lines EXPOSE 8080 and ENV ASPNETCORE_URLS http://+:8080 to be able to connect via HTTP to the docker container.


Build a docker image from the command line. You need to navigate to the webapp project directory, and execute the following command:

DOCKER_BUILDKIT=1 docker buildx build --platform linux/amd64 --tag drmoz/webapp:latest .


I’m running it on Mac M1, and I have to specify --platform parameter explicitly to be compatible with Azure deployment. I also have to activate the Docker Buildkit by specifying the DOCKER_BUILDKIT=1 parameter and using buildx to be able to build an image for another architecture.


If you are running it on the Intel x86/x64 platform, you can use docker build command without the need to specify --platform parameter and activate buildx.


You can tag your image differently, but since I’m going to use Docker Hub, I have to specify my account name: drmoz as part of the image tag drmoz/webapp:latest.


When an image is built, you can check if it is present in the Docker by running the following command:

docker images


It should be on the list:

REPOSITORY        TAG         IMAGE ID       CREATED          SIZE      
drmoz/webapp      latest      0cfac748256b   37 minutes ago   216MB


Let’s run the docker container to verify that the newly created image works fine. Execute docker run command to start a container:

docker run -p 5555:8080 drmoz/webapp:latest


Specify the -p parameter to map the 8080 port inside the container to your local machine 5555 port. Also, specify the image name to create the container. In my case, it is drmoz/webapp:latest.


Now, you can navigate in your browser http://localhost:5555 to see the ASP.NET Core Web App home page.

ASP.NET Core Web App: Home page



We need to push an image to the Docker Hub. Before that, you must register on the Docker Registry, and create a repository. Click on the ‘Create repository‘ button on the right corner of the home page.

Docker Hub's new repository


Specify the Repository Name field, and keep the repository visibility Public.


In the command line, you have to log in to the Docker Hub registry:

docker login


After that, you will be able to push a newly created image to the registry:

docker push drmoz/webapp:latest


Navigate to the repository, and you will see the information about the image:

Docker Hub repository


3. Create a Web App in Azure

Now, we are ready to deploy our ASP.NET Core Web Application to Azure. Let’s log in to the Azure Portal, and create a new resource group. Specify the Resource Group name as ‘webapp-rg’, and click the ‘Review + create’ button.


Create Resource Group: Basic tab


On the next screen, just hit the ‘Create’ button.

Create Resource Group: Review + create tab


Now, we can create a Web App. Navigate to the ‘Create resource‘ page, and find WebApp. Click the ‘Create’ button.

Create Web App: Basic tab

You need to specify the Resource Group one that we created previously. Also, specify a unique Name for the Web App. Select ‘Docker Container’ in the Publish field. Later, we will be able to specify which Docker image to use.


Select any suitable options in the Pricing plans section, but I recommend using a Free F1 tire for test purposes. Navigate to the Docker tab.


Create Web App: Docker tab


On this tab, select ‘Docker Hub’ in the Image Source field. Select ‘Public’ in the Access Type field, and specify the Image and tag value with the name of the image we pushed to Docker Hub. Navigate to the ‘Review + create’ tab. On this tab, click the ‘Create‘ button:

Create Web App: Review + create tab


When the new resource is deployed, you will be asked if you would like to navigate to this resource; just do it. You will be able to see information regarding the Web App.

Web App resource information


Click on the ‘Browse‘ button to open a deployed web application. If everything went correctly, you should see the ASP.NET Core Web App home page similar to the one you saw in your browser by navigating http://localhost:5555.

Enable Continuous Deployment

If you navigate to the ‘Deployment Center’ settings and enable ‘Continues deployment’, you will be able to redeploy your image every time you push a new one to the Docker Hub. In that manner, you can make changes to your code, push it to the Docker Hub with a new image, and see changes in minutes in Azure.

Web App - Deployment Center

Azure Web App Troubleshooting

To be able to see deployment logs and identify issues, you need to enable saving logs to the file system under the ‘App Service logs’ chapter as follows:

Web App - App Service logs


When it is done, you can navigate to the ‘Deployment Center’ and see logs as follows:

Web App - Deployment Center


Summary

If you reach this point, you managed to create an ASP.NET Core web application; pack it to the Docker image, and deploy it to Azure. Nowadays, technology makes life easier and speeds up the development process. You can see how easily you can deploy your application to the cloud provider and expose it to the whole world, perform some testing, and see the result of your work.


Now, you can dive into the details of Azure cloud providers using Microsoft documentation. Also, take a look at the Docker documentation for a deeper understanding of this piece of technology. I hope it might be helpful.