Build ASP.NET Core Web App and deploy as Azure Web App on Containers

Azure Web Apps or Azure App Service Web Apps or simply Azure Websites is a PaaS service from Microsoft Azure which can be used to host web apps or APIs build using a variety of programming languages like ASP.NET, ASP.NET Core, Java, Ruby, PHP etc. It is also optimized for hosting web applications and containers, in case the SDK version required is not already supported by Web Apps. Rather than using ACS (Azure Container Services) and AKS (Azure Kubernetes Service), Azure Web Apps are more suitable for deploying long running containers. Also they become more affordable in terms of pricing as compared to the ACS and AKS. In this post, we’ll discuss how to create a very basic ASP.NET Core App and then deploy it as a container on Azure Web App. 

Create a ASP.NET Core Web App

We’ll be creating this using Visual Studio 2017. Open Visual Studio and go to file -> new -> project and Select an ASP.NET Core Web App project:

Create an asp.net core web app project using Visual Studio

Provide a name for the project and path to store files. In our example, this would be the DemoWebAppProject and then click Ok. After this, out of the templates provided by Visual Studio, select “Web Application Template”:

Select web application template and asp.net core version

Select appropriate dotnet version. Also uncheck the option for “Enable Docker Support”. Click Ok and it will create a very basic web app project based on dotnet core version.

Go ahead and build the project and it should build fine.

Create Docker Image

We’ll need to go to root project path and add a basic Dockerfile to it. After this, open the file in Visual Studio and type below code:

FROM microsoft/aspnetcore:latest
WORKDIR dockerdemo
ADD ./DemoWebAppProject/Debug .
ENTRYPOINT ["dotnet", "DemoWebAppProject.dll"]
EXPOSE 8086
ENV ASPNETCORE_URLS http://0.0.0.0:8086

Create the dockerfile for the project

After this, save the Dockerfile. By default, if you do not expose a port and bind the application to it, ASP.NET image will expose port 80 and bind the application to it.

Build a Docker Image

We need to open command prompt in admin mode or PowerShell in admin mode and browse to the project root directory. After this, we can run below command to create a docker image:

docker build -t aspnetcore/demowebapp:1.0.0.0 .

Create docker image for web app

Verify that image has been built fine using docker images command. We can also initiate a container to make sure that our image is working fine as expected:

docker run -d -p 8086:8086 -name=demowebapp aspnetcore/demowebapp:1.0.0.0

Initiate a container from the docker image created

And browsing the application in a browser:

Verify that application is working fine inside container

Push the image to the Azure Container Registry

For deploying docker image, first we need to push it to a container registry. For this post’s purposes, we’ll be using ACR or Azure Container Registry. First we need to login to ACR using below command:

docker login -u {username} -p {password} {ACR-name}

Now, we need to tag our image again so that ACR can accept it. For this, our image tag needs to be first accompanied by ACR name:

docker tag aspnetcore/demowebapp:1.0.0.0 mgoyal.azurecr.io/aspnetcore/demowebapp:1.0.0.0

After this, we can push docker image using:

docker push mgoyal.azurecr.io/aspnetcore/demowebapp:1.0.0.0

Tag and Push docker image to a registry

Deploy image from Azure Container Registry to Web App

Open Azure Portal, select ACR in reference and then go to Registries. You should be able to find the uploaded docker image here. Click on the image and then click on the ‘deploy to web app’ option:

Deploy docker image to Azure Web App from azure registry

Now, submit the web app details:

Fill in azure web app details

It will take a few minutes to deploy the docker image to the Azure Web App. Once it is done, we can browse the application using Azure Web App URL fine.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s