Multi Container app deployment to Azure Web app via Azure Container Registries (Docker Compose)

hi in this video I'll talk about how we can apply multi container application to Azure web app via your container registry before going into details I am just hoping you have some of the basic understanding how Docker Works how are your web app works how is your container registry works so these are the pre-request for this video but it's not mandatory I'll try to cover as much as possible but considering I want to make a shorter video I may not able to go into details so it's better if you have basic understanding of these things I'll try to share the links also so that you can go through that and have the basic understandings okay so let's just jump directly into code and see how it works now before going into the visual Studio One thing which you need to have is Docker installed in your local desktop and there are set of available videos or tutorials which you can go through how to download and how to install that just follow those steps you can easily install the docker into your machine this is mandatory because if you want to run your application in your local Docker is needed so I have installed in my machine here and this is the official site where you can go and easily download for the docker desktop and it will start the downloading and you can easily run it it will install and if there is an issue they will tell you the steps which you need to follow in case you are having any issues cool so let us jump directly into Visual Studio now the step one is to open the visual studio and then click on a create a new project in this I'll first go and select that web API template and then click next and first I need to give the name so I'll say docker app in azure click next and here I'll select the framework 6.0 authentication I don't want it I'm okay with https yes enable Docker I want it and operating system I want Linux use controller yes enable open API support yes this is for Swagger click on create and it will take a moment to create the project now if you see here it is if you click on the output here it will tell you it is going to restore all the packages and it will also go and check what are the prerequisites needed for this container so basically what it does when we create a project by enabling the docker options it will create the project as in container and we will see the same into the docker desktop so it says container started successfully and if I go to the docker desktop here we can see Docker app in Azure is there and that's the image name so if I click on this I can go and check various things under the logs I can inspect you can click on the terminal then files and stats so these are the set of things which I can do in the docker Azure and if I click on container this is the image which it has created so basically whenever we create a project first we need to create an image and that image we need to deploy into the Azure container registry so if I click on images we can also see from here there should be docker app in Azure so this is the image name which it has created now I'm back in Visual Studio first what I will do I'll click on this Docker and to run this project and see how it works let us initialized this project and if you see it has opened this Swagger window and where we can go and just execute it and see the output so basically this is the response which we are getting when we are executing the API and if you want you can also go back to the visual studio and click on the under this containers click on the port and there you can select which Port you want to open if you click here it will open that but since this is an API project we need to call the container also so I will say whether forecast so it has given me the Json output which is expected one cool so API is running fine now I am back into Visual Studio I will go through the docker file which this project has created at the time of creation of this project and you can create at the time of creation also or right click on your project click on ADD there's an option to add the docker support basically it will just create your application it will initialize your container for your application and create an image for that and since we have selected the option at the project creation time we denote to add it but if no if you have not done that you can add after project creation also now let me go back to the file and this is the set of the LC commands which it has added and I'll go through one by one so the first one it says it's a base image for the docker and itself basically this project will use asp.net 6.0 so that is first is required next is it sets the working directory for the docker image so slash app is the one and the other next two line exposed 80 expose 443 these are the ports which it will open for the container so the next line basically it sets the base image for the docker file to to this and which is the official one for the Microsoft right now and the next line is basically it tells build process which folder it needs to use and it basically copies the existing one so existing one right now it is present here into the build location which it will create at the runtime then it restore the project basically here it will go and restore the nuget packages which all are needed for this next is copy dot dot basically this is very important it tells whatever the things you want to copy from source to destination the this is the destination where it will go and store all the files and it does it works next it sets this line is the working directory it builds the project and finally it published the projects and this line publish the projects and it published into this location which it has created under the directory and this is the final one where it says okay whenever you're running the application uh the entry point should be this dlls because it's a.net core application everything will be converted and become a dll so far we are good we have just created the API we have executed it and it is working fine the next what I will do I will add the MVC project and to do that I'll click on the solution click on add new project and I'll select that MVC one click next and I will give it a name as MVC UI and click next again I'll just use the 6.0 authentication none yes enable Docker yes and I'll unselect this and I'll show you how we can create this Docker once the project is created click on create so MVC project is created and if I want I can just execute it for that I need to make this project as a startup and then run it so it is initialized and it is running fine cool so we are good here next we'll go and add the docker support in that MVC so let me click on this right click click on ADD click on Docker support Target OS Linux yes click on ok now as I showed you earlier for the web API file we have the docker file the same way when we created the project we can add the docker file also and for this MVC one it has added this Docker file and the same set of commands it has added for MBC one the only difference is the name of the project you can see otherwise everything remains same and if I want to run now and now I need to click on Docker and if you want there are other options also available but I'll just click on the docker it will build the project and it will run the images so if you see here so it has executed the MVC one now to run the other one let me go back click on containers click on post s okay so this is giving issue because we need to go and select where the forecast here so it's not working I know why currently we need to make both the project as in the startup and multiple startup projects section start start apply okay now run both will work and if I go back here's a Swagger one also and if I go back in the code click on containers now click on Port now if I go and type weather forecast here it has stopped in the breakpoint which I have added and this is output cool so it's working fine now next I'm back into Visual Studio what I will do next I will add the docker compose basically the container orchestration to do that you need to select the project and then click on container orchestration and under that it will show what are the different systems you have since we have just Docker it will give us that option click on OK Target operating system Linux is Okay click ok it will add a separate project and in that couple of files will be added and if you select Docker ignore it will tell the basic sets the how the git ignore or vs code works and then is the docker compose file it will tell what are the services your project have currently I have added the docker compose for API project in this only one Services is coming with the name of the DPI project and if you see these are the it's a yaml file which has which has information the image name which it will create when we run this and what is the context what is the build context which we will be using and it also tells where the docker file is present so Docker pile for the DPA project is present in this project at this location and that's what is mentioned over here now Step 2 what I will do I will add the docker compose for this UI project right click on that click to add go to contain organization select ok yes okay now if you see here it has added the orchestration it has added the service with the name MVC UI and it is under the services and and it says this is the name which I will be using when you run this and under that it tells the context the default context which we are using and then is the location where this Docker file is present so under the MVC UI project Docker file is present so this is what it will does now click save now to run this project I will click on the docker compose here and it will build and run this projects so let us see how it works now it has opened the Swagger UI and let me go back click on containers these are the two which are running so I want to run that MVC one click on that it should give me the MVC page cool so this is how we can use Docker compose to run both the projects at the same time okay I'll go back to the project and one another thing under a Docker compose there is even another file which was created it's a Docker compose override file so basically by default if you want some of the settings which should be applied to the both you can just add it here and under this file you will see these are the environment variables which it has setting and then these are the ports which it uh which is going to expose for the container and then there is a something called as a volumes so volume I will say whenever we are running any container it we build that or we destroy it multiple times and sometimes we want some of the information should be retained and those informations will be will go to the volumes not going into detail in the volume in this particular video hopefully I'll create another one for on this little little later so I'll just remove the volumes here from here and ports I also don't want it let me just remove this also from these two locations and I don't want aspu dot netco URLs here if required I will just add in the docker files or compose file itself I just keep this one variable in this particular location now the next thing which I want to do here is I will use that mvcu a project to hit that API and then get some data from there and through the docker container so to do that first what I need to do I will go to the docker compose one and under that for the timing I will just remove this image it's not needed when we are running it in the local so step one what I'm going to do here is I'm going to create a default Network so that these two containers which it will be created can communicate to each other to do that first thing what I need to do here is I need to add a network here so network will go under the build Networks and I will say the name learn Network okay and the same thing will go under the build here and it will also have the name learn Network foreign paste instead of going wrong and one last thing is so that it should get created we should have Networks at this particular location and where I will mentioning what is the name of the network I have learn Network and what is the default driver I'll be using Bridge so basically what this step will do it will create a bridge Network so what is the bridge Network and let me bring the docker official website here and it says it's a default Network driver if you don't specify driver this is the type of network you are creating and which network are usually used when your application run in Standalone containers that need to communicate since in our case we have our two containers the API one and the UI one we want both should be communicate we first build the network and then we will add this application under those Network and then they both can communicate to each other for that purpose I have added a bridge Network and given it a name learn Network and that is what I have just Associated it with the both the services so just remove the necessary spacing and click save I'll just try to run it to see if everything works fine if there is no issue and I can see no okay so there was extra space I just removed it run your application again and let's see okay I know that the the issue here is and let me click on containers no such ports cool but this application is working fine the issue is we have not added any ports here and in the docker compose files you should have the ports and if the docker combos does not have it will look go and look into the override file we have removed the ports from the override file also so let me go back and add the ports in this file so to do at the ports what I need to do here is write ports and I will just say I want this whose should go into 881 and container should be into this one and the same MVC one I need it under the port 8080 and container should open into 80. and now let me just save it and run this let's see and I think you know what is the issue here now run it okay so it's the API project is working under the t81 cool this is what we have mentioned here and let me click on containers click here click on the other one the time we see one is also running cool so we are good here now back into Visual Studio let me stop the project and next important thing which I will go and do here is I will just open this weather forecast controller and I will just copy and I will just comment this under that I will create another one and in this I will just return Rohit so I'm just modifying my controller and since it's a string it's cool this should work now the next thing which I'm going to do here is I will go to the UI controller and under that I will add little bit of code so the code is string API URL I'll just add it here and I will use the HTTP client and for that I will just use client dot Base address yes and then I'll check the response message yes and I will say we have weather forecast okay and then if response dot is succeeded yes what it should do I will just try to read it yes and then what I'll do and very important this is the MVC thing view back Dot message is equal to this party okay and if there is error view back Dot message should be error in Project and another thing which I will be doing here is should be part of task because it is an asynchronous and one another thing I will just add the try catch to see if there is any exception foreign put a debugger here okay so this looks good but one another thing is I need to add URL and for that I will go here and I'll say API URL and it should be HTTP colon columns slash slash and the service name which I have used it so this is the URL cool let me save this and it should be URL copy and go back to your controller under that add a configuration thing I configuration okay configuration having configuration here okay this looks good now this will be underscore configuration and here I will paste it the Okay cool so what I am doing here is I'm just reading the URL which I defined into the host file the app setting files and I'm just creating the HTTP thing to call the API and it will hit that API controller get the code and see if it is Success read what I'm passing from there and if not there is an error so I just wish to add a semicolon here I'll add it cool okay one another thing which I need to do here is let me go to the Views and click here click here under that just add a P tag and right here view bag Dot message so which we are reading cool everything looks good and let me run this and see if it works or not foreign containers click on that MVC one and no let me go back and error is this code should go in this particular location but I have added into privacy and to fix that what I'll do I'll go there and click on privacy and to see at least if it is returning what we need here response yes it is a success let me read the body and the body should be Rohit cool so this is good let me stop it here and let me just copy this thing from this location to this and these things also let me copy and paste it here now I will run it it should work now click on containers click the port cool this is how to API to multi container can communicate to each other over a network cool we are good here now next what I will do I will go to the Azure portal and create a container registry and the web app and deploy this one and deploy the images over there I'm into portal.azure.com first I will create the Azure containers history for that I'll just type container Registries here and this option I need to say contain Logistics then click on create and then I'll create a resource Group here I'll say rstp is here click OK you need to give the registry some name so I'll say Docker app in azure and location I'll select is us2 SQ standard is okay networking by default everything default click on validate click on create so it is going to create the container registry we just wait for a moment so resource is collected let me click on go to resource and it has created the your containers history I just need to enable one thing I need to enable the admin user this is needed whenever Azure web app tries to read the images from the container's history so I'm good here now next I'll go to the visual studio and I'll stop this solution here I'll right click on the solution click on the open folder in Explorer there I'll just type CMD to open the command prompt and Under This what I need to do first I need to connect to Azure so I'll type Azure login here connect to the Azure via Azure login if you have Azure CLI installed if not just Google it the steps to solve your CLI into a local so I'll click on AZ login and it will just open a browser window okay so I've logged in successfully The Next Step what I need to do here is I need to connect my application to The Container registry for that I have a command here which says AZ ACR login and hyphen iPhone name and the name is if I go back to the azure and click on overview this is the name of the server and paste it here okay I got a response I got error I'm just trying to reconnect that so let's see okay login succeeded I don't know why it failed earlier but we are good here okay so next what I will do I will build this project using the docker compose and the command is Docker compose build so it will build both of the projects okay so I got one error basically it failed to restore the packages here I am getting this connection error um so there is a workaround and hopefully you might not need it if in case you have succeeded just skip couple of seconds otherwise if you are also facing this issue due to the nuget packages I'll tell you uh one workaround and the workaround is go back to your project open your compose file and under that not in the compose file go to your Docker file and just going to modify this and what I'll do I'll just comment it here and I will add these two lines basically I'll just copy my local packages into the root location and then I will go and do the restore and the same I need to do here in the docker one and for the API projects just comment it add these two lines here and in this case it should be this one project and another thing which I need to do now pay your attention here I will just go to the root location so basically this is a root location where I have my nuget packages in my local machine just copy it go back to your solution paste it there while it is copying from your route to your local you need to do another thing you need to go and create a nuget file and I will just go to the notepad here I have a one here I'll just copy and paste it and I'll just need to save this file and it should be in the location I'll tell you this location and the file name should be nuget dot config click save it will just save that file now come back and let me see if it has completed this still running so we'll wait for another few seconds done now let us go back and let me rerun it okay so this is done build is completed now we can go and check by typing Docker PS and it will give us the name of these two containers and we can also check with the docker images LS images we can see here and in our case r is the one okay so I have a menu with the same name it look like these are the ones these two these are the images we have now we can we are at a position where we can push these images to the Azure container registry but these will not works we need to do couple of changes in the compose files and then we can build and deploy these images to the containers history to do that first I'll back into the project and I'll go to the compose file and there the first thing which I want to do here is I need to add the name so to add the name click on Docker API services and then type the image and then you need to give the name so I'll say the name is this thing and another same I need to do here is under at MVC UI project also service and here also I'll just type it this thing now one another thing which I need to do here is need to go to the azure and under that I need to select the server name that I need to paste it here the both the locations so the image name will consist of the location where you want to send that and then the name of the service so that is how you should always comprise the name of the image one thing is done the next thing I need to add and in that Azure remember in that Azure web app there's only one port for HTTP request you can expose any of the port but only one port will work for the HTTP request we cannot see both this API running both the services running in the Azure so what I need to do I will remove this port I'll just keep the one from that MVC one so the communication will happen from that MVC to that API this is the second thing which we have done now another thing I need to add the environment variables in both the locations I have it copied here so I'll just go and paste it and the same way it goes for API one save it now we have done all the changes which are required we have to rebuild this and then we will deploy these images into the Azure and let me go back I'll take docker compose build here the spelling is compose build it will build the images now to see the images you need to click docker image LS and the one which we have created here is these are the ones this is the one so one is this this one now to push this first I will just clear this window and push these images what I need to do here is I need to write docker push that image name you can see that image from this project just copy this paste it here add the tag and the latest one so it will push that API image to the Au container registry cool so it has pushed the API one now I will try to push the next and again I'll go back to the code I'll just copy this URL paste it here type latest and it will push that MVC project into the Azure containers history cool so both are pushed now let me go back to the azure so I'm back into Azure click on repositories cool so I can see both that here one is that MBC one another is the API one cool so we are good here I'm back into here I'll click on the app services to create the your web app I'll click on create I'll select the resource Group here then I'll name it as docker app in azure web app click on Docker container fitting system by default it will select Linux we are good with that click on use device too good with that click on Docker then click on options click on Docker compose and there it will select the containers you see we have we only just have one then now you need to give the configuration it's an optional you can give it once this web app is created but since we have the file here okay app in Azure and under that I'll select the compose file and everything looks good click on networking monitoring default options click on review plus create click on create it will take a moment to deploy Azure web app now click on resource go to resource under that click on browse and if everything is fine it should run the application superb cool now this is working fine and it is communicating with an API and it is bringing this Rohit from there Bingo we are good here cool so there are a couple of steps I want you should remember first do not try to open multiple ports for that HTTP in that your compose file in the docker compose file this issue I was doing I struggled it for a couple of days to fix this then I realized okay there is only one port and I'm just trying to opening both the ports and it is not working you need to remove the volume from that override file if you are not using it that's another issue which you will face uh if you case in case there is another issue open the logs try to have some logs and then see where you went wrong in this just try to deploy one container and then see if it is working fine and then in your local guide to make both the container communicate with each other then see if it is working fine then deploy it to the Azure you need to follow step by step approach when you want to deploy it only then it will work it took me a couple of days to figure out all these issues which I am getting to fix it cool if you like this video just subscribe to my channel and share it with your friends

Channel: Rohit Sharma

Views: 10,043

Keywords:

Id: wxp_GXZfnMk

Length: 37min 26sec (2246 seconds)

Published: Thu Mar 30 2023