Deploy a Docker based ASP.NET Core app to Azure

Deploy a Docker based ASP.NET Core app to Azure

In my last tutorial I created my First ASP.NET Core web App in Docker Container. I will now deploy this Docker Containerized app to Azure cloud service provider. This will make this app live on the internet so that it will be accessible on the browser with a URL.

Remember docker hub is a free registry for containing docker images. It is an easy way to create, manage, and deliver your images. You must create your free account on it if you haven’t done it till now.

Deployment Procedure

The deployment procedure of the dockerized app contains 3 steps.

  • Step 1 – First I will build a docker image of this app in my local docker environment.
  • Step 2 – Next, I will push this image to my repository located on docker hub.
  • Step 3 – Finally, I will instruct Azure to pull the image from the docker hub and make the app live.

I have illustrated this whose procedure in the below image:

deploy docker azure

Build the Docker Image locally

Open the command prompt and navigate to the directory of the Dockerfile of this ASP.NET Core app. Build the image so that it is named in this format – username/repository:tag.

Here “username” is the name of your docker hub account and “repository” is the name of a repository in your docker hub account. The “tag” can be anything like “v1”, etc.

The docker build command to run is:

docker build -t yogyogi/apps:first .

Note that yogyogi is the user name of my docker hub account. The name apps is the name of the repository, situated in my docker hub account, and it is where this image will be pushed from my local pc. The first is the tag for the image.

build docker image locally

Tagging an image is helpful as we can keep multiple images in a single repository. For example I can push another image called yogyogi/apps:second into the same repository.

Pushing the image to docker hub using “docker push” command

Now login to your docker hub account and create a new repository by the name of apps. Once the repository is created it will show the push command that will push a local image to it. The command in my case is.

docker push yogyogi/apps:tagname

Recall, I have tagged the image as “first” so my push command would be:

docker push yogyogi/apps:first
repository docker hub

Pushing an image to docker hub requires an authentication. That is, you should be logged on to your docker hub account in your docker desktop. Right click on docker desktop and you can find out if you are logged on or not. See below image:

docker desktop login

Suppose you are not logged on then in that case you can log on from your docker desktop itself.

Another way to do is through login from the command prompt window. The command to login is:

docker login

It will ask you for your username and password for the docker hub account. Note that when typing the password, it will not show there, so don’t think that your keyboard has broken down. You will get login successful message. Check the below image which shown this message on successful login.

docker login command

Next, I am going to push the image. The command to run is:

docker push yogyogi/apps:first

The below image shown the screenshot of this docker push command.

docker push command

In a few minutes time, the image will be pushed to docker hub. Now open your repository in the docker hub and you will find this pushed image there. In the below given image I have shown this thing.

docker hub repository image

Instructing Azure to pull the image from Docker Hub

Now coming to the final part where I will instruct Azure to pull the image from my docker hub repository. Login to your Azure account and go to App Services, then click Create.

create app service azure

Next, on the Create Web App screen, give the name to your app. I have given it a name as FirstDockerApp. For the Publish field select Docker Container.

Also select the Operating System to be Linux. Then click the Next: Docker > button.

publish docker container azure

In the next screen you have to do some Docker settings in Azure for your ASP.NET Core app. Select Single Container as our app is based on single container. For the Image Source select Docker Hub, and for the Image and tag field add yogyogi/apps:first as this is what it is there on my docker hub.

Docker Settings Azure

Click the Review + create button. The screen will show your docker setting for review. Next click the Create button to create your app and make it live.

deploy asp.net core app azure

Azure will start the deployment of your app and it will be done in a minute or two. Azure will notify you once it is complete.

After that go your app service where you will see the url of this app.

app url azure

Click the url and your ASP.NET Core app will open in the browser. I have shown this in the below given image.

aspnet core app live in azure

YouTube video – Deploy ASP.NET Core app on Docker to Azure

I have created a YouTube video showing this full deployment of the app to Azure. Kindly check it, Link Here.

Continuous Deployment

Next, I will show you how to do Continuous Deployment in Azure. So, in the App Service called FirstDockerApp which I created, go to the Deployment Center setting. Here change the Continuous deployment to On and save it.

continuous deployment

Now open the Index.cshtml page and change the heading as shown below.

Change in App's Page

Next, rebuild the image:

FirstDockerApp>docker build -t yogyogi/apps:first .

Push the image to docker hub.

docker push yogyogi/apps:first

Azure will automatically detect when the image is updated in Docker Hub and it will update the app with the new image.

Now open the apps URL once again and you will notice the changes.

Continuous Deployment Azure
Conclusion

This completes the deployment procedure of the ASP.NET Core app on Docker to Azure. I hope you loved learning for this tutorial. Kindly share this knowledge with others.

SHARE THIS ARTICLE

  • linkedin
  • reddit
yogihosting

ABOUT THE AUTHOR

I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate

Leave a Reply

Your email address will not be published. Required fields are marked *