Deploying MERN App With Docker Compose

all right everybody today I'm gonna show you how to decorize your mer stack application and run each services in the same network connect with each other using Docker compose tool all right and this is an amazing Tool uh uh really you gotta you gotta learn to use it right now and use it in your projects all right so uh we're just gonna uh Implement everything in that project which is a simple today application so I'm just gonna clone this application to This Server which by the way I created the Neve brand new droplet for this video and we're just gonna do all these things in that server um so I'm just gonna say like first let's create a project folder and get into it I'm just going to say git clone this all right we're just cloning it and let's get into it perfect now we have backhand and phonics so the first thing we need to do is creating Docker file for each service all right this is the first step then we're just gonna create yaml configuration file and then we're just gonna spin up each container using Docker composer all right so let's go to backends First and I'm just going to create a Docker file create the image right and instead of typing all these required stuff in this terminal interface I'm just going to open up my vs code and uh write all these things here because it's easy to edits and it's all the control or Auto auto typing basically anyway and we're just going to copy and paste it here nothing nothing confusing so the first thing here is the parent image I'm just going to use node 80 the Alpine all right and the work directory will be app doesn't really matter what what he called here and then I'm just gonna say um copy package Json first to the current directory in that image now we're just gonna run the npm install command then we're just gonna copy all other codes inside of the into the image so the last thing is we're just gonna say CMD which stands for command and we're just going to say npm lowercase npm starts which will start our node application that's it I'm just going to copy and paste it in this original Docker Docker file so let's save it and exit all right the docker file for backend service is ready so let's get out of this uh directory and let's get into the front ends perfect now let's create the need Docker file for this finance service as well so I'm just gonna pretty much copy it right like nothing different here and of course we need to say expose uh which by the way I forgot to put the exposed part in the back end Docker file all right we're just going to do it now so I would say export and it will be export exposed in Port three tasks all right this is for front end reacts and save and exits that's it so let's go back the back ends uh let's edit it and I'm just gonna at this exposed just right here okay and it's going to be five steps for the back end not the API all right and that's pretty much it like nothing uh confusing here I guess because the main thing I want to show you in that video is how to use Docker compose so we already learned how to create Docker file and all sort of things alright so let's save it and exit perfect now our Docker file files are ready to use in our Docker compose yaml configuration file and it's time to create this file um I would say Nano um docker compose like Yama not hyphen but yaml all right and make sure you spell that right because otherwise uh Docker compose cannot find this file and spin up the containers right you can just also call it yaml or yml doesn't matter but make sure you spell the docker compose uh correctly as it is all right and let's just open up so as we did for the docker files I'm gonna type everything required in here in this Docker compost file then I'm just going to copy and paste it in the server all right the first thing that I'm going to specify is the version of the docker compost so I can just type in three it doesn't really matter um and the next thing is sources so we're just going to Define our service front ends backend and database so you can name these Services As You Wish literally it doesn't really matter so I'm just going to call the first services as front ends you can just call it react app UI learn UI or whatever you wish really doesn't matter um the first thing we need to specify is the image like because the all the things Docker compose is doing is uh uh creating and running container simultaneously so we like we need to specify the which image that the docker compose will be using right but currently we don't have any image for this front ends right uh but we have a Docker file instead and that's why we're just going to use the build commands in order to define the path where this Docker file for the front-end service exists so the basically path is frontants it exists in the front end all right and I'm just gonna make a port mapping and it's going to be three thousandths to three thousands all right and it is also going to be something like this standing true or something standing standing open true something like that and the other thing is TTY it's also going to be true like honestly I really don't know what these two things are uh but let's leave that as it is right so the other thing is depends on so I'm just gonna specify the source name that the front end will be depends on so I will specify uh backhand which I will just create right now okay and yeah pretty much it so now let's create our backend service which by the way you just need to really pay attention that all your services is in the same vertical line right this is important like spaces in uh yaml files are super important you gotta just really pay attention to it otherwise you will get an 100 of errors all right so in the back end I will again say build because we don't have any image to pull from the crop so we need to specify the path ah just like we did about backhand perfect all right the next thing is Port mapping so we will specify the ports which is 500 5000 to 5000 all right and the other thing is depends on and this API this back-end service will be depends on the database server service not server service okay and that's pretty much it let's uh create a database Service as well and now we're not gonna build any Docker file we're gonna be using uh image which is already exist in dockera so I'm just going to basically use the image commands which is used for pulling images from dakara I'm just going to specify the image name which is so uh also make the Porsche mapping for this one I'm just going to use the default port for mongodb database all right and um it will have uh extra uh feature called volumes and we're going to use volumes to back up our data in the database in somewhere in the local directory outside of the container in case of uh in case the container shutdown or removed or anything like that like in order to purchase the data that's all right and I will basically specify the directory which is home 40 and back up and data DB all right so this folder backup I will just create it right now let's just go in and just do it here so uh which by the way I think we have a time out in the terminals let's just close it and connect to it again um real cake SSH roots and connect go to the user users all right let's go to the here in here I'm just going to create a new folder called back up all right backup so I will specify this directory in here and the column and this data DB basically uh mongodb will save all the required files for the data in this directory inside of the container where the mongodb exists and when we say that it will basically copy all this data inside of this directory to this local directory so even if the container shut down or removed or anything like that we will have all the required data in here basically that's all it is volumes does here perfect now uh that's pretty much it and lastly I'm just gonna create a network for these services so I'm just gonna say networks and I'm just going to call it myrn Network all right Network and the the drivers for this one will be Bridge all right and I'm just going to use this mer Network for each service so put all of them in the same network I'm just going to say networks and the network name will be this and let's copy and paste it real quick here and in here as well perfect and now all the services uh all sources will be exist will be running in the same uh isolated Network okay perfect now I think that's pretty much it we're like when we just execute this Docker compose yaml file it will first uh pull the Mong image so why not front end we just specify the front end of the First Source because it depends on backhand service and this back-end service it depends on the database so the first service will be execute is this database right and we will first pull the image and we'll put this database into this network and then we're just gonna go to this directory get the docker file like the docker compost is just going to do that right I get the docker file build image and run the container on this port and put it on this mirror Network as well and for the front ends it will just go to this directory get the docker file and create the image and run this image as a container on this port and it will be depends on backhand yeah and it will put it on the networks as well and the lastly the last thing I forgot is uh container names like this is like super important like this is I mean really important right so uh we're just gonna use container name to connect each servers together so uh for the front ends after build let's say container name I'm just gonna name it like uh react UI right and for the back ends the container name not command bro uh containers container name will be node API all right and for the database the container name will be uh mongodb all right mongodb like as I said this is just a naming you can just name it as you wish but uh we will use the exact container names in our connection string all right uh so just make sure you name it uh or just you use the exact name in your connection string as well so that's pretty much everything all right and also you can just put restart thing here always that not about uh the connecting services but it just basically say that if the back end crash just always restart okay but that doesn't really important just don't confuse with that the important thing here is container name all right we're just going to use this database container name in the node API to connect to the mongodb database and we're just going to use this node container name in the front end in order to connect to this API all right so this is all configuration file let's copy and go to the docker compose yaml delete that Y and paste it here perfect now here we have uh let's just save and exit perfect let's cut it out and here we are Docker compose configuration yaml file perfect now uh this file is ready but as I said we need to change the connection string according to this container name that was specified all right so I'll just go to backend and I'm just gonna edit this server.js where we connect to the database and here instead of using an environment variable uh it's going to say connects I just delete that by mistake so here I'm just going to say mongodb slash DB all right and that's it like this is the standards link to connect mongodb right this basically say that hey man I'm just looking for a mongodb database and after the slashes you will just basically specify that where this mongodb database lives on like basically the host IP address or the name right and like basically guys containers are a host right when you spin up our containers these are actually isolated hosts and a kingdom of the servers right uh so you can connect them uh you can install anything like these are like basically computer right and that's why we will put the container name here in order to connect to this container where the mongodb leaves right when we when we spin up the containers using Docker compose right and that's it and after that we can just say that which database we want to connect and in this case it will be to do app of course there's no database like that but in mongodb you know if the database or collection doesn't exist that you're trying to access it will just trade it automatically for you uh so that's the string for the connection to this container in this Docker compose so just save and exit and let's just go to front ends and do the similar thing for that and the connection stream for the back end in the front ends uh in the package.js right so we'll basically connect this front end to backhand in order to interact with the API and in here we have a things called proxy and like normally we've been using localhost for 5000 right that's right because uh previously we have node and reacts in the same uh host right running on the same host are localhost but now this is not the case right because we have react up in different container and node API in different container that means they're on different servers actually so we need to specify the server name or the server IP address in here right and in this case it is node API right because we specified the container name as it is in the docker compose Services part and the port will be 5000 because to be exposed it in the 5000 so there's nothing wrong with that and we should be good to go with that perfect let's save and exit um yeah pretty much it let's go back to root of the project now it's time to spin up our containers and the command for that is Docker not the car Docker Dockers compose up and if you want to just run it in detach mode good hyphen D and I will just do it like that so this command will basically uh looking for we're looking for the docker compose yaml file in this exact like in this current directory and if it find the file then it will just execute all the services one by one right according to Deer depends on stuff like for example the mongodb service will start first because uh node API in it depends on it right so let's just watch it together so the first thing is database plink this is our server's name okay database pulling so we're just gonna pull the image from Docker up all right and then we're just gonna uh build the notes JS image like not node image this is our API right our source code and then we're just gonna do the same thing for the react and then our containers will be spin up so let's just wait until it's completed all right it's done our container are running right now right so it just creates a network and like it just start this container mongodb node API react UI like in order right perfect it just download all the required stuff it just create the image then uh to run the image as a container with the required with all the configuration that was specified in the composed file like perfect if I just say Docker PS to see the running container we'll see three container are running right now and the names like react UI node API mongodb just be specified in our compose file and the port mapping here and yeah pretty much everything so let's get the uh most important points of this lesson like these sources are connected to each other let's see them together because if they're not uh like we need to find a solution so but probably it should work so let's just go to vocal host not localhost uh this API or IP address so paste it in here and I'm just gonna go to Port 3000 where the react app is running let's just go hit enter and we have to do app all right so so let's wait until it's loaded okay now it's running like the front end part is running properly but the question is when we click this add button and add a new task uh will it connect to the API and the API will connect to the database uh we'll see that together so in that application like all the tasks in the database will display it here automatically and currently there is no task there's no database because we just created our database just right now so let's see that together I will just say homework and click save task and here we go it's working front ends connect to the API and API uh uh just make this crowd operation the postcard operation to our mongodb database which is in another separate container and then at a time uh we just pull the data full of datas uh pull the radius from the database and display it here perfect let's add a new one shop and here it is even my refresh page it's here perfect it's just working uh properly perfect like the point here is like as I said guys you need to use this container names in order to connect them each other right we connect reacts to node API and we use this node API container name in the proxy connection and we use this mongodb container name inside of the node API mongodb connection string all right and that's all the magic right and these three container running just like a computer just like a server right perfect and let's take a look at the uh uh the backup here not here LS here the mom go back up right we just created uh like a few minutes ago uh while we're just doing the volumes things and that was empty right and now we just run the container spin up the container and if I just LS it we will have like we will see a lot of weird files and basically these files uh enables mongodb to persist data or I mean basically these files I mean as I understand the required files for the data right and mongodb store these files in in the container where the mongodb lives as well uh but we also copy this data back up this data to this local directory as well so let's go to uh projects to do app again and let's say Docker PC and I'm just gonna just I want to enter the mongodb container so I'm just gonna exactly say exact it mongodb containers and I'm just gonna enter The Bash which by the way uh we're just done with it right everything is working properly the thing that I'm trying to do is showing you how things work under the hood all right so let's just get into this bash the container where the mongodb exists so if I just say sh I will be entering to shell perfect and this basically shows us that mongodb installed and running properly inside of this container uh so if I just say show DDS we will we have the to-do app if I say use to do app and then I will say DB tasks and finds and we have homework here right and also the shop as well shop and homework right and this data is pulling here and is playing here like perfect so let's just get out from this uh container and if I just say Docker compose down uh it will basically stop all the containers which spin up by the docker compose and remove them remove these containers as well it will also uh tell you already like stopping and removed right if I say Docker PC there's nothing so I refresh the page and it's gone so if we didn't specify the volumes when I uh uh say Docker compose up d uh it will spin up again but if we didn't specify the volumes the all the datas will be gone and we're not going to be able to access any of them right so but if I execute this Command right now uh we will have all the datas uh previously exist in the database back because we backup this data in this local directory right and when we execute this Docker compose like Docker compose we'll take a look at the volumes which is here let me show you real quick in here it will just take a look at this directory real quick and it will get all the files uh exist in this directory to this directory inside of the container right so basically the database will start using this data stored in this backup folder right uh basically that's the whole thing right and let's just speed it up again uh up in the detached mode so it will create it in starting the container again so if I just refresh the page of course it may take some types because we're just like thing it does it as like we're just uh restarting a computer it will take time right yes the same thing applies for the containers as well yes refresh the page all right it's just uh rounding here uh let's just wait just a little bit yeah that's that's pretty much it now we should see the exact data that we previously inserted to the database which is homework and shopping right because uh Docker compose will pull everything from the local volumes and put it on the container and here we are right perfect oh but that's it guys that's all I got for this video for this tutorial let's summarize what we learned we learned how to create Docker file um to create the image for our application um then we create a Docker compose yaml configuration file to specify all the required configuration stuff in that file right we can say I mean Docker run name uh like name it as it is and then ports and the port things in the detached mode and all sort of thing but instead of doing all these things we put them all in a sort of file in a yaml file which is a configuration file and when we say Docker compose up is the docker compose spin it up all the container for us according to this uh file that we created the docker compost file and that's pretty much it and we specify the container name inside of the docker composed yaml file and we use this particular container name to connect the services all together right um but yeah that's pretty much all things I think that was awesome tutorial for you guys and yeah I'll catch you guys next time bye bye

Channel: Kaliteli Yazılımcı

Views: 6,553

Keywords:

Id: M4nxbztmpZo

Length: 29min 13sec (1753 seconds)

Published: Mon Oct 31 2022