Continuous deployment with Web App for Containers using Azure Container Registry – Part 2

 

This Post is in continuation of Post : https://blogs.msdn.microsoft.com/paraspatidar/continuous-deployment-with-web-app-for-containers-using-azure-container-registry-part-1/ as Part 2

Our next step is Setting up Docker Section:

  1. Download docker CLI or docker for windows.

I am installing docker on my local windows 10 from https://www.docker.com/docker-windows

after installation I could see this in tray icon:

  1. Signup for a docker account at https://cloud.docker.com/ & activate the account & sign in .

3. Login to docker on your PC.

image

  1. Download any container image from Docker hub to local using CLI :

For this example, I am using nginx image , thus we shall download it from docker by running this command on command prompt.

docker pull nginx

3

  1. By default, the image tag is taken as latest.

 

6. Verify image is up and running on local :

running this command on command prompt

docker run -it --rm -p 8080:80 nginx

and in browser open url  http://localhost:8080/

 

7.  Create an Azure Container Registry:

by Refering here : https://docs.microsoft.com/en-us/azure/container-registry/container-registry-get-started-portal
Login to azure portal and create a Azure Container Registry over there from market place & get the ID and password for Azure Container Registry  as per documentation link above.
Please enable the Admin User option .
Please note that Login Server name , which is <registoryname>. azurecr.io
From here onward for example purpose we shall user the registoryname as myregistry considering you have created the registry using this name.
Also note the Username and password.

 

5

 

 

8. Login to Azure Container Registry from docker.

Run this command on CLI

  docker login myregistry.azurecr.io -u xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx -p <password>

Now my CLI / Local docker si connected with Azure Container Registry.

 

9. Map the Tagged container image with Azure Container Registry account with a repository name and tags.

docker tag nginx myregistry.azurecr.io/samples1/php
by using above command , I am instructing that my local image named nginx should be mapped with my azure container registry end point myregistry.azurecr.io/samples1/php which is actually creating a repository Image with name samples1/php .
we will see this repository in Azure Portal, once we push the image in next step.
Please note : don’t get confused with tag here , the tag in step 5 is the tag for image and we can have multiple tags and default tag is “latest”.
But Tag command here is kind of mapper between your image and registry end point.

10. Push the local docker image to Azure Container Registry.

        docker push myregistry.azurecr.io/samples1/php

        clip_image004

issuing this command , will push my image which I have already tagged/mapped in step 9 and this will create a repository on azure container registry.

11

11. Create Web app for container.

From Azure market place, create a new web app for containers & select the containers values here (which covers up the steps 12 & 13 as well)
After create button click it will create that web app in few minutes from that image which we pushed earlier.

12

13

 

12. In Docker Container option, select the Azure Container registry.

Same was already done in step 11, however can be reconfigure at Web app’s “Docker Container” option

 

13. Select the values for Registry, Image, Tag & hit Save.

Same was already done in step 11 , however can be reconfigure at Web app’s “Docker Container” option

 

14. Restart the Web App.

If you are changing the Registry, Image, Tag , please restart the web app after save to reflect the changes.

 

15. Browser the web app to see if the image is up and running on Web app.

Now browsing my web app will show the container image.

clip_image012

 

16. Enable the auto deployment mode on Web app.

In the App settings, add an app setting called DOCKER_ENABLE_CI with the value true.

clip_image014

 

17. Get the service URL from publishing profile.

For the Webhook URL, you need to have the following endpoint: https://<publishingusername&gt;:<publishingpwd>@<sitename>.scm.azurewebsites.net/docker/hook.

You can obtain your publishingusername and publishingpwd by downloading the web app publish profile using the Azure portal.

 

14

So service url looks like :

  https://<publishingusername>:<publishingpwd>@<sitename>.scm.azurewebsites.net/docker/hook.

 

18. Go to Azure Container Registry & create Web hook.

Couple of values which you will require are :
Webhookname : any meaning full name
Service URI : the service uri from step number 17 something like below :
https://<publishingusername>:<publishingpwd>@<sitename>.scm.azurewebsites.net/docker/hook

Scope : this will be in format of Image:Tag (see point number 5,9 & 11)
Thus earlier we have been using Image as samples1/php and by default the tag was latest ,
Thus the value here will be samples1/php :latest
I have created one more image names samples1/php with tag latest and that what is being shown here in figure.

15

 

19. Fill up the values and save and do a test ping.

16

Sometime your kudu is down or process not running ,thus you may encounter error , please make sure your KUDU process is running while ping or deployment .
Now your continuous deployment is up and running, you can test it with deploying modified image or new image with same tag , lets see how to do it ?

 

 

Here to test it either we can :

1) Modify the locally residing nginx image

2) rebuild it so that changes are persistence

3) push the new image on Azure portal to verify it should auto deploy .

 

OR

1) Or we can do a trick by using another container image lets say phpmyadmin docker image.

2) tag it with same name/endpoint as nginx end point .

3) deploy that image to azure web app

4) so now our Azure Web app will show phpmyadmin page on browsing which is also a verification that auto deployment worked.

 

I am going to show second way by putting phpmyadmin image via continuous deployment.

 

20. Go to Docker CLI.

 

21. Modify the image or give the same tag mapping to any other image.

1) So now to do so , I will download the phpmyadmin container image from docker by running following command :

docker pull phpmyadmin/phpmyadmin

clip_image021

2) Now if I verify the images in my docker by running command

docker images

it shows something like :

17

watch carefully here:

Line 2 : the image NGINX is having tag as latest with image id 40960******
as I have mapped that image with Azure container registry end point sample1/php,
Line 1 : my sample1/php end point is having same tag and same image id as line 2.
This also gives us indication , that currently which image is mapped to our azure registry end point.

3) Line number 7 : Now my recently downloaded phpmyadmin/phpmyadmin image tag is also latest ,with image id f4674******
But that is not mapped with my existing azure end point ,
Thus in line number 9 , that end point with that image id is having Tag as <none>.

4) Now let me map the phpmyadmin image to azure end point by running following command :
           docker tag phpmyadmin/phpmyadmin myregistry.azurecr.io/samples1/php

 

clip_image025

5) Now verify the docker image again to see if it pointing to correct end point

18

6) Look closely ,

7) Now line 1 NGINX local image having image id 4096*** with tag latest.

8) Line number 4 :This same image id 4096*** , the tag has become <none> , that means now NGINX is not pointing to azure end point samples1/php any more

9) Line number 5 : Phpmyadmin/phpmyadmin local one having image id f46764*** with tag latest ,

10) Line number 6 : Same image id is now pointing to azure container registry end point samples1/php with tag latest.

11) From above, we have mapped phpmyadmin/phpmyadmin image to azure container registry and pushing this on on registry will auto deploye phpmyadmin image on our web app , which is currently running nginx image.

 

 

22. Push the image to Azure Container Registry.

docker push myregistry.azurecr.io/samples1/php

Run following command will push this image on azure registory , which should ideally push it on Azure web app as well .

clip_image029

Now , in few minutes it should auto deploy phpmyadmin container on my web app

 

23. Browse the web app to see that new image is up and running.

clip_image031

24. After some time, the auto deployment logs are visible in the Azure Container Registry’s Web hook’s Logs/events

        20

Advertisements

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