Docker For Beginners: From Docker Desktop to Deployment

what's up everybody its Travis here from Travis dot media so about a year ago I decided to look into this thing called docker at that time I just wasn't ready for pulled up the documentation there were images there were containers there were volumes there was docker compose I tried to make sense of it but I just couldn't I just wasn't there yet in my journey I even did like a docker pool and pull down a couple of images and then I was like where's my image I can't find my image and then finally I ran the command to show my images but it's like what I do with these images so it's so I ditched it then a couple months later I started a job that use docker and I had to learn so over the past year I've been using docker especially in the current job that I'm in we use a daily so I thought now would be a good time to revisit me a year ago so here's my intentions with this video I want to give you a quick overview of docker like what is a container what is an image high-level overview of the definitions as if you were me a year ago like just confused on all of these things I want to give you a high-level overview and then I want to take those definitions in turn practical in build some images with you to show you exactly how it goes down so I'm gonna take this react app and I'm gonna docker eyes it we're gonna take a wordpress theme we're gonna docker eyes it using docker compose and by the end of this video you're gonna feel at least better about docker than you did starting the video I find that when first learning something new it's good to get a high level overview and not all of this in-depth stuff that you can learn later so that's my intentions in this video so let's get started all right so before we get started as always if you're into web development coding if you're learning to code you want to land that new job or you just want some tips on conquering life in general consider hitting that subscribe button below lots of great videos are on the way for 2020 so as I stated at the beginning part 1 of this video is it's going to be a quick rundown of definitions that's what I'm getting into now and then we'll get to the practical later so here we go docker simply put is container management software so you have containers you have images you have volumes how do you manage it all well that's what Dockers for what is an image an image I like to think of it as a blueprint of your container so it's the instructions for building your container I can take that image hand that image to you you can run build on it and have the exact same setup dependencies and all that I have another way to look at it it's a snapshot of your container and it's made up of layers so an image is made up of layers so you have a base layer which would be like Debian or a bun - or something like that then you add another layer like maybe your software files then you add another layer like some dependencies and then another layer maybe some configurations or something but anyway the image is made up of layers so you start with a base you add something on it you add something on it yet something on it boom when you build it out you get a container so just think of it as the blueprint for building your container and we'll look at that practically in a minute so containers are ready to roll applications from docker images another way to look at it a container is a running instance of a docker image so you have your blueprint when your blueprint is run it is a container so what's the benefit here's four things number one simplicity it's a easy install I can hand you the image you can run it and have the exact same container running as me next is collaboration which is kind of the same thing multiple devs can work on it and not have to worry about having differences in dependencies in binaries and things like that next is flexibility you can build it with whatever you want it's a container you put in it whatever you want in finally totality so if you give me a wordpress site I might have a different version of my sequel or a different version of PHP or a different version of WordPress I might be building it in and setting it up with different dependencies or binaries that you may have the good thing about a container is that it contains everything you need to run that application so when I hand it to you when you run it it has all of the same versions and everything that I have all right so here's the big question that confuses everybody I'm going to keep this brief I'm gonna try to give you a broad difference instead of getting in depth if you want to get in depth there's tons of great articles out there with charts and diagrams and all this other stuff for you to fully understanding but here's the quick and easy you have VMs virtual machines and containers what's the difference well the virtual machine has a complete operating system on it so each virtual machine has a complete operating system on it so imagine a computer you have hardware on your computer you have an operating system and then jump up here you have these virtual machines that you've set up each instance of a virtual machine has a complete operating system on it and the thing you should note here is that the hardware for these virtual machines is virtualized so these virtual machines use the underlying hardware of that system or server through this software called a hypervisor so again each virtual machine has a complete operating system and dependencies and application files and whatever but the hardware is virtualized it uses the resources from that system or server now what makes a container different is that they don't have a complete operating system so the virtual machine has this guest operating system the container doesn't the container actually virtualizes the operating system so it's actually just a process running there's no hypervisor and no guest operating system so instead of being ran as this guest operating system on an operating system these containers get built into special packages called containers and inside those containers you build whatever you want from it now you might be like what did he just say that still makes no sense well just remember this a virtual machine has a complete operating system on it and it virtualizes the hardware through this hypervisor in a container just virtualizes the base operating system and then in that container you can build whatever you want so what are the pros and cons will the virtual machine since it is a complete operating system takes up more space uses more resources and it takes longer to boot up because you're booting up the operating system now a container can boot up instantly milliseconds because the operating system is virtualized and that container has everything in it it needs to run and it's more portable etc now is one better than the other no they both have their perks and one may be preferred over the other in different scenarios a VM is not bad and a container is good they're just different in the situation calls for one of the other all right so that was a quick rundown if you're still kind of confused let's start building stuff and I'll explain it better that way all right so the first thing you want to do is download docker now remember docker is just software for managing containers that's all it is just go to docker dot-com go to products and docker desktop that'll take you to this page and just choose download for Mac or download for Windows it'll ask you to create an account I believe you'll need to do that anyway because you'll have to sign in to the app and it's free and it's no reason why you shouldn't so go ahead and set that up and install it and we'll continue on alright once you've done that if you're on a Mac you'll see this little boat icon up here on the top click on that and you'll see docker desktop is running you probably don't have kubernetes enabled what you don't really need to that's not what this video is about but you can go to preferences and in preferences you can do stuff like start dock your desktop when you log in I like to do that you can allocate resources so I think this is default CPUs to memory to disk image size 60 gigs disk image location things like that docker engine you can configure the docker daemon here command-line experimental stuff and kubernetes information so those are just preferences I think you can probably leave them default for now umm you'll also see a link to documentation in docker hub which we'll talk about in a second a dashboard and then your repositories and kubernetes information so if you're on Windows you won't see it up here in the top of course it'll be down here in the little taskbar at the bottom it'll be a little boat icon there too and you should see the same preferences basically the same I think there's a couple of differences so you've downloaded docker you're ready to roll let's talk about images so a docker image if you recall is just a blueprint so it's a blueprint for how you build out an application and then you run that blueprint to build the container so when it comes to images I'll show you a couple of number one is a website called docker hub this is Dockers official repository of images and that's at hub docker calm or you can go to your app and just choose docker hub here but it takes you to this page and what this page has is official docker images for everyday applications so if you look down here official images for Engine X MongoDB node Redis images that aren't custom these are images that you would include in building your application but you wouldn't want to build yourself like think about it Redis is Redis no matter what you do you'll configure it differently but it's just rares so if you need Redis with your application you can just pull the image from here and then configure it if you need node don't worry about setting up the node version manager and all that stuff in your container just pull the image here's post grass here's golang here's httpd let's say I want a WordPress image I just type in WordPress and it'll take me to the results and always look for this official image so here's the docker official image for WordPress so again these are images that you don't need customized you just need that piece of application added to your application you would get it from docker hub so that's great and everything but in this video I want to build a custom image based on an app that I have or an app that you might have and I'm going to show you how to do that so a little while back I created this simple react app called YouTube stats all it does is you input an ID like a YouTube video ID hit enter it makes a call out to the YouTube API and returns all of the tags for that video and then some info right here like channel title video title in the number of views really simple app if you're interested in that I'll put a link above if you want to build that out it's a nice way to learn react basics anyway so this is the app we're gonna be building the image for today so if you look at my codebase it's very simple we have an index.html we have some components and all of that stuff that react comes with so how do we take this app and build an image from it well first off let's get rid of this node modules folder because we're gonna build that inside of the image but I'm gonna get rid of this build folder too and I'll put a link to this app below so you can go to github and download it and follow along with me so the first thing we want to do is open up our app in a folder so I have it here in BS code we have a folder called YouTube app and what I'm gonna do is inside of that folder I'm gonna create a new file called docker file so this technically could be anything but conventionally people call it docker file with a capital D one thing that may help you along the way here is to go to google and type in something like anatomy of a docker file and find anatomy of a docker file notes for myself from here something like that somewhere that will list out to you the main parts of a docker file so we're gonna be using that too all right the first thing and every docker file is a base image think about it you have a this completely empty container that you're gonna be building this app in the very first thing you want is some kind of base image to run your app normally this is like a Linux image like Ubuntu or Debian or Alpine if you want it really small so we just type the first thing always starts with the from and you see I have a BS code extension that gives me kind of hints here so it says from base image now what are we get the base image we don't want to build out Xubuntu or we don't want to build out Debbie and like there's no point in doing that docker hub already has it so let's go to docker hub and type in let's do debian and see what they got so they have the Debian image debian is a Linux distribution blah blah blah this is Dockers official image so we can just use this because we just need the generic Debian image if you come down here it tells you what tags are available so back in our docker file we can say from and what do we call this image if we look up here it says docker pool Debian this image is just called Debian so from Debian : now you'll see here the colon and then there's the tag so what version of Debian do we want so let's come back and look around there's Buster which is I think Debbie and 10 jesse is Debian 8 then I think they're stretch which is Debbie and 9 anyway I'm gonna grab this Buster 10 and just the latest so use the tag latest from Debian : latest and that's the start of our docker file now in this image we're basically going to be adding the steps to run this app so if you think about it we got the Debian base the next thing we need is the node run time because react requires node right so again we can go to docker hub for that so come up here and type in node whoops let's see if they have an official node image which they do right here nodejs is a Java Script platform bla bla and it's the official image so click on that now what's neat is if you scroll down to the bottom here you'll see that it has a couple of different image variants so there's node : version just like we did with Debian so we did Debian : latest you do the same thing with node this is the de-facto image and what's neat is that some of these tags may have names like Buster Jesse or stretching them these are the sweet code names for the releases of Debian and indicate which release the image is based on so what's really neat this image here node version has an option to give you Debian or Alpine or whatever underneath kind of knock out two birds with one stone there's also a slim version that just has node and then there's another version for alpine but what we want is to stick with Debian so if we scroll back up you'll see all these options here and I'm just gonna say hey Stretch is a version of Debian and they do have a latest so I'm going to use the latest tag for that too so this node so this node image has Debian baked into it so I can just use that so let's go back and change this to from node latest in there we get the node runtime plus the base Linux image alright so we got our Linux base image we have node ready next thing we want to do is copy all of these app files to our container so let's go ahead and make a folder to put this in so to run a command in docker file you simply just put run and then you see right here run command so let's say run make dur which is make directory we're gonna call it app so we're gonna have an app folder with a folder inside of it called source that's where we're going to be being Arab files - next we want to set the work directory so we're gonna use this phrase called work der and we're gonna change that directory to and you see right here the absolute or relative path to use as the working directory so that of course is gonna be apps or s-- apps source so this just sets our working directory all these commands that we run are gonna be run in this directory alright so what's the next step so we've we've made this directory we've made this our work directory what's the next step in a react app well it's gonna be the package.json that's gonna have all of our dependencies we're gonna have to run npm installs so let's go ahead and get get that ready so what we want to do is we want to copy we haven't copied anything over yet but we want to copy that package JSON we want to copy that to err work directory and what we can do is we can say copy package JSON to dot now how can I do dot because the work directory is already defined this dot says the current directory which is going to be this you can also say app dot source you can also do that but you don't have to you can just say dot we've already set the work directory so what that's going to do is that's gonna copy this package JSON which has all of our dependencies here which need to be installed with NPM install so we're gonna copy the package JSON there and then we're gonna run NPM install it's going to install their packages so what we're doing is we're piecing together the way to run this app in a container alright so we've copied our package to JSON we've run the NPM install so we have a node modules folder ready to roll next thing we need to do is copy our app to that folder our entire app we can simply do copy mm-hm and see copy source to destination so copy . because we're already in the folder we want copy all of this stuff to . the source is the folder we're in and the destination is the work directory which is the period again you can do app slash source if you want to but you don't have to copy dot tada that's the benefit of making this work directory then finally react uses in development the port 3000 so there's another command called expose and see right here exposed ports so expose 3000 that's gonna expose Airport in order to view our app in the browser and then the final thing we need to do is run the command which is NPM star so we can do CMD look right here CMD and then there's this these brackets with an executable inside of it so let's do that let's set some brackets and you have to separate these out so we have to do NPM and then comma and then start so if I want to add any more flags I can do that but NPM start is all I need to do and again you're like what is this run and copy and expose and command and all that stuff well that's why I told you to look up this anatomy of a docker file it kind of explains it to you so what is ADD what is copy do sets the username here's environment variables there's all kind of stuff so I would look that up type in the anatomy of a docker file and you'll get used to these commands pretty quick also you can go to the docker documentation it's really good so that's it this will build our docker image we have our base linux node setup we make a directory we set that directory we copy the package.json there and we run that npm install to get our node module set up we copy all of the app files to the container and again we're just copying the stuff to the container we expose the port 3000 and then we run NPM star so this is their docker file I could take this whole folder zip it up and send it to somebody and they could take this and build out the same image so how do we build the image well we use the docker command line so there's things you can do with the docker command line you can look that up you can do something like docker images to view all of your images that shows me all the images on my computer you can do docker PS I think to show you what containers are running or what processes are running you can do a lot to build the image we need to use docker build you can go to the docker documentation and look that up but basically it's docker build and then there's options the most basic way to do this is to say docker build wood directory do you want to build what directory has your docker file well that's the directory we're currently in so I can go docker build period and build this image but it's good practice to name your images to tag your images in order to do that I would just add a dash T and whatever I want to name the image so let's name it YouTube react app how about that so docker build the folder which is period we're in the current folder - t - tag it as YouTube react app and just hit return and we got an error mcdr cannot create directory app source no such file or directory with mcdr we need to add the P flag which creates the app and the source folder I think that's gonna solve it so that's my bad let me save that again and try to run that command again so you'll notice down here it shows different steps so step one is the this base node image step two we make the directory step three we assign the work directory step four copy the package.json five run npm install which is happening as we speak now these different steps are layers remember I talked about docker builds these images and layers this is the example right here the first layer is kind of the base the second layer adds the app source folders and so forth these layer on top of each other now if you ever get big docker files that have a lot of run commands you want to kind of concatenate those so you want to run and then put all of your the things you want to run into one line so it doesn't create so many layers which makes a big docker image so if I did like a run yum install in like 50 packages I wouldn't want to do 50 run commands that would make 50 layers I wouldn't want to run yum install and then put them all in line with one another just a hint and this should be done in a minute alright so you see right here I went through step 6 I did my MPM install step six seven eight again these are different layers step eight I run NPM start and successfully built successfully tagged so it built my image here's my image ID and my tag is YouTube react app : latest alright so now I have my image how do I find my image like where's my image at well you can do two things you can do docker images I'm just gonna list out all the images on your computer since this is the newest that's going to be at the top so you see right here YouTube react app tag latest image ID here it is created 34 seconds ago how big is it it's a gig it's a little over a gig not bad but here's what I like to do okay there's lots of docker commands you can run but since I'm using vs code and again I have a video about this that I did about a month ago about docker being really easy with the vs code extension I'm gonna show you how to use that so basically instead of typing in docker images I can come over to this let me show you the extension in short you just go to extensions and look for docker and you should find it says docker it's by Microsoft it's got 4 million downloads that's the extension that you want so download that and then you'll have this docker icon to the left so if I click that I can see all of my containers and to kill this container I can see all of my containers all of my images and all of my volumes and networks and all that good stuff what I'm interested in here are my images so you probably if you're just starting with docker you probably don't have any of these this is just stuff I was messing with earlier but when it comes to images what did we call it we called it right here YouTube react app latest so let's find that here's YouTube react app and you'll see my image right here latest so I don't need to worry about the command line if I'm in vs code I can see everything visually here and here's another shortcut if you have if you're in your docker file you can open up your command palette which is shift command P on a Mac and go type in docker and there's all kind of commands you can run look at all this stuff who needs a command line right docker images build image so if I click that it's gonna say tag image as what and I tagged it YouTube react app : latest let's call it that YouTube react app latest and all I got to do is hit enter and I don't I don't have to worry and there it built it since everything is cached it's the exact same as I built it last time so nothing new it built it pretty fast now if I go up here I can see the command that vs code used and if I scroll up here I can actually see the command they use so docker build they use this RM flag F flag the directory so YouTube apps slash docker file and then they tagged it and so forth so if you don't want to be like what is it again darker build and then I think I gotta use the T flag it's doing that just open the command palette and just do docker images build image boom and then what do you want to name it you to react at latest or what do you want to tag it and I just hit enter and boom it built it again so that's what I do I rarely ever type out docker commands I'm envious code I'm gonna utilize what be as codes given me so that's a docker image this image is the blueprint that I run as a container again I have my docker file I use the steps to build out my app inside of that container now how do I run it well let's get to containers so over here I have an image and it's called YouTube react app I open it up I have one tag the latest image now I could say YouTube react app : 1.0 or something and that would be another image under this so how do I run it well there's another command called docker run now there's more parameters to this like port numbers and all of that stuff but again we're in vs code the quick way to do this is just to go to the image right click and go run just click on run but I like to use run interactive because I like to see what's going on and you just click run now watch this I click run now here it is so this image this blueprint that I have is now going to run as a container so starting the development server like any react app basically it just did an NPM start compiled successfully you can now view it at localhost colon 3000 see if that works localhost 3000 there's my app running on a container now how do I know that's on a container because I can come back up here to containers and I see YouTube react up latest running as a container now a couple things to note here first off the command they used let me run it again let me do run interactive and then I'll kill it now look at this command it's docker run and then there's an arm flag and an IT flag you can look that up and then there's the port flag so 3,000 : 3000 slash TCP and what this does is make ports available to services outside of docker so basically it says map this 3000 TCP port in the container to the port 3000 in the docker host so basically this port 3000 in the container is going to map to 3000 in the browser and finally the image name so that's all it did just docker run a couple of flags some ports in the image name that's all it did and it ran our container again right click run and the container spins up again watch how fast this is you'll see it pop up here right there it took what maybe a second all right so here's our container up here and if you open up another terminal somewhere you can do a docker PS and that'll show you which containers are running and you see that YouTube react tab latest is running its created 33 seconds ago it's ports are 3000 as we set and they made up a name and here's our container ID so you can get that info there you can also get it here now there's some other things you can do in vs code you can right-click and go to inspect and it'll tell you give you all kind of information about your container you can do you can restart it you can stop it you can view logs in case you want to know hey what's going on you're running like you're having some errors or something you can run your log obviously there's no log here so I'm not doing anything with the app one big one is attached shell if you want to jump inside of your container into the command line you do that so attach shell and then you come in here and it runs this docker exec command that's another command and so when you do that it takes you to the work directory so slash app slash source that's where my files are if I hit LS I see all my files my docker file my node modules package public source my two folders all of that stuff great so that's a docker container so we took this simple react app we created a docker file which is the blueprint for the image once we have the image we can run it whenever we want over and over again if we want to and it's gonna produce the same exact container with the same files blah blah blah so I again I could zip up this whole thing send it to somebody they could build the image and run the exact same app with no problems also I could push it up to docker hub and they could go there and do a docker pool you do react tap latest alright so the last thing I want to do is talk briefly about docker compose so here's the issue let's say we want to build a wordpress container well think about the pieces to WordPress there's the WordPress files there's PHP there's Apache you know some sort of server or nginx there's also a database so you would want to go to docker hub and be like I want the my sequel database which we can just grab from there because the database is a database we can configure it on air in but we just need that image so we can grab my sequel from there we can grab WordPress from there that's another image we can grab PHP from there we can grab whatever we need but here's the problem now we have multiple containers how do we put together multiple containers oh and also to add to that we have our theme that we're actually developing so how do we have all of these containers plus our own theme that we're gonna containerize how do we have all those talk to each other and how much trouble is it to run well that's where docker compose comes in docker compose takes multiple containers and makes them run together as an application makes them talk to one another in network with one another and Dockers made it really really easy all right so the first thing we want to do let's just create a folder on the desktop and let's call it WordPress - docker I'm going to drag this into BS code and to use docker compose we need to have a docker compose yamo file so here in this folder I'm gonna right-click choose new file just choose docker - compose dot yml now a Yambol file is just a configuration file it's kind of like JSON but just a different format it's used a lot in automation and deployment things like kubernetes and ansible you'll find it pretty easy so we want to use docker compose to create our WordPress site in the easiest way to demonstrate this is I'm just gonna go to google and type in docker compose WordPress and go to the actual docker documentation so QuickStart compose and WordPress I'm going to click on that and I'm gonna grab this example they have of this docker compose gamal file copy that and come down here and paste it see if I can format it yeah there we go all right let's talk about this this is the best way to understand it let's talk about this so version this is the docker composed version it's on version 3 you don't have to worry about this the main thing here is services this is where you declare the services so you got five images and you need them all to work together you need to define the image the networking the volumes all of that stuff you would declare them as different services now if you recall from earlier WordPress already has PHP and Apache in it the WordPress image on docker hub so all we need from there is just the database we need the my sequel database well we would go to docker hub and just type in my sequel and that would show us the my sequel image and that's all we want to do we just want to pull that in my sequel image and they have that set up here for us so they have the my sequel image version 5.7 or tag 5.7 they've declared a database of volume the name of it being DB data and the path is VAR Lib my sequel restart always this just assures that it restarts it restarts all the stopped and running services and we have environment variables so my sequel root password a database user and password you're familiar with this if you're familiar with my sequel so that's it we have this my sequel image we have this DB service which uses a my sequel image it has a volume to store its data it restarts every time and it has environment variables that's service number one service number two is WordPress WordPress depends on the database we got to have that database to assure that WordPress runs properly the image is WordPress latest so this is from docker hub to the official WordPress image with the tag of latest ports 8080 we talked about that earlier so basically it Maps this TCP port 80 in the container to port 8000 in the docker host so that means we can go to localhost colon 8080 with WordPress you got to have a database name password user and host and that's it so we have two services in this docker compose now there's one other thing here at the bottom and this is volumes whenever you see volumes at the bottom outside of this services so see these indentations so services that everything here falls under services and then there's this volumes whenever it's separate down here that means this DB data is available to all the services if we just want a volume available to a service only we would put that within that service and we need to do that with WordPress think about it if we're working on a theme and we're making some theme changes or we're adding plugins or things like that we want to have a volume to save that stuff so if we kill our container and start it back up we want it to be able to pull that volume back up so that air site has the same files that it did before so we want to declare another volume here so we're gonna put volumes and two spaces with the analysts two space as always put a dash and we're gonna call this now you see up here they called this DB data that's the name of the volume what we want to do though we don't want to just declare the volume in a path we want to actually make this volume show up in our project so that we can edit the files and to do that it's really neat if you go to the compose file documentation you see different examples of volumes so there's one of them here that says path on the host relative to the compose file so we can use this dot forward slash give our volume a name and then have the path exposed locally in our project so watch this you'll see what I mean in a minute so if I do dot slash which means in this folder that we're currently in and I type in WP content that's the name of it : and then what's my path to the WP content well if you go to the WordPress image let's see WordPress docker image you'll see where all of this is stored in your container and by the way there's always great documentation in docker hub if needed so if you scroll down and kind of look around a little bit you'll find out that themes go in a subdirectory bar ww HTML wp-content themes plugins go in that same directory so we want that directory so VAR w w HTML WP con so let's plunge that in so far WWH tml wp-content whoops now what this is going to do is this gonna mount this volume here in our project which will allow us again to edit our themes plugins all of that good stuff so as soon as we run this docker compose file it's going to create that wp-content folder or volume here in our project so I think we're all set so how do we run docker compose well it's simply oh and one more note if you have a custom image that you built from a docker file that you're also including in here like you built an image and you want to include that image here you can still have a docker file file in this that builds the image you just include that image here in the docker compose so to run this docker compose we simply say docker - compose pump and there's another flag people often use - D which runs it detached from the terminals so if I don't put this D it's going to run all the processes here and I can't do anything else in the terminal because it's being used if I do a dash D it runs it as a background task and I can still use my terminal here so docker compose up - D and I hit return now watch this volume pop up here awesome WP content right there and here it says this created WordPress docker db1 that's a container in creating WordPress docker WordPress that's a container it also created a volume for a database remember that's called DB data and it created a network WordPress docker default alright and if I go over here to the docker tab I see that I have a wordpress container running and my sequel container running so a container per service if I come down here to networks I see the network and the volume DB data great so let's check this side out let me click on WordPress latest and choose open and browser it should open it in localhost 8080 DeLand just gonna call it Travis username Travis password Travis my email discourage search engines doesn't matter alright WordPress is installed let me sign in and voila here's our WordPress site I can go to media I can go to add new upload some new file like this black background here great so you see we have our file now let's check that this persists by stopping our container and starting it back just to be sure error database volume in our WP content are persisting so if we use docker compose up to spin up our containers how do we spin them back down well docker compose down that's it watch this stopping this container and stopping this container it stopped those containers and it removed the containers and it removed the network but not the volume so if we go back we still have WP content so if I start this again docker compose up detached it's gonna spin these back up and I should still have that image file in my media folder open in browser go to WP admin login go to media library and there's my image so the data persisted WordPress is running wonderful and if you want to work on your theme just open this wp-content folder say you're working on the 2020 theme you make some kind of change let's try to make some quick CSS change so let's find something we can change our site header has a background of white let's see if we can change that just to make sure that's working site header background white let's change it to black and save it now if we refresh it should work this tells us our theme and our volume is in the right place there it is we have a black background so it looks like our WordPress sites working great docker compose really is that simple and perhaps this is a simple example but you got to start somewhere and I think it's I think it's a pretty good example alright so the final thing we want to do in this video is we want to deploy these two containers somewhere now just a quick disclaimer I probably wouldn't deploy either of these containers as they are definitely not the WordPress container the react app maybe because there's really no back-end it's just the front-end and it's just making API calls maybe I would do that the WordPress container I wouldn't you wouldn't want to deploy a container just one container and then the database is also containerized that's not really a stable solution you would probably want that database on its own virtual machine somewhere more stable than we have it currently and then if you wanted high availability you would probably want several virtual machines behind a load balancer for high availability and scaling and things like that but and here's where containers shine you could set up a highly available cluster of containers the only problem is containers can't really move like that by themselves they need an orchestration tool like kubernetes stop with kubernetes you can declare how you want your cluster to look and just deploy them out there into the mysterious world of kubernetes I think I'll do a video on that here in the next couple of weeks because that's very important but for now just a quick note I probably wouldn't deploy either of these as they are in production but I want to show you how to use docker hub how to push images to docker hub and then how to deploy we're gonna use digitalocean as the example and I think you'll find some really helpful stuff here so let's get started first thing let's check out this this YouTube app so I'm gonna drag this into vs code and so what we want to do here is we want to push this image up to some kind of repository and what I'm gonna do is I'm gonna push it up to docker hub since we've been using that the whole time that's the really popular one so go to da curl up and sign into your account and you get one free repository one free private repository so if you go to docker hub at the home page I'm signed in but anyway on the home page there's this big button that says create repository click on that and it takes you to this page now what you want to do is you want to name it so I've already created one but I would put something like whitey react app for you to react out just some kind of name it's got to be lowercase I think it's got to be one word so name it whatever you want put a description and your it's gonna say you have zero of one private repositories used so choose private and then you just simply want to create it so click create it'll create your repository and then you'll end up on a screen like this alright here's my repository it's called react app docker and there's a couple things to note here one there's only one tag its latest you don't have a tag yet you haven't pushed anything up I have because I wanted to save time but I'll show you how to do that in a minute but here's the thing to note to push a new tag to this repository you're gonna use this docker push and then your repository tag now how do we do that how do we push our image up to docker hub well let me show you let's go back to vs code and here's what we want to do first we want to login to docker hub you do that easily by saying docker login and then the u flag for username and then your username so mine is Travis media and just hit enter it'll ask you for password go ahead and punch in your password and it should say login successful yeah login succeeded now I'm logged into docker hub and I can tag my image so if I go docker images I want to get this image ID so let me find it YouTube react app this is what I want to send up to talk our hub so I'm gonna grab make sure I get the right line here I'm gonna grab this image ID right here and just copy that and I want to type this in I want to type in docker tag and in the image ID and then you want to type in whatever is here in the docker command so that's gonna be Travis Media react app docker colon tag name which is going to be latest or whatever you want to tag it you can tag it 1.0.0 if you want but I'm just gonna paste that in I'm gonna change tag name to latest and this is gonna tag my image with this name hit return now that you've tagged it all you have to do is put docker push and then that tag name again and of course I need to change this to latest so you tagged it and then you push it and as soon as I hit return it's gonna start pushing this to docker hub now I've already pushed it so it's probably gonna say layer already exists so layer are bidets this yours is gonna show you each layer is gonna be push top to docker hub so give it a few minutes to do that awesome all done now as soon as that's done go back to docker hub and refresh and you should see this tag here called latest or whatever version you put congratulations your image is now on docker hub you can simply go docker pool in this right here and you can have your image on your computer you can tell your friend to do it you can tell your company to do it whatever docker pool this that's all you got to do it is available to whoever has access to this private repository they also have public ones but you got to pay for those so let's talk about digital ocean say you wanted to put this react app on somewhere cheap like five bucks a month that's what digital oceans for so let's go to digital ocean calm I have a link below that I'm gonna share with you that's that actually gives you a hundred dollars to use over a 60 day period so you get a hundred dollars to try out whatever you want it's lots of good stuff so I'm gonna sign into it you probably have to create an account if you don't have an account already and you have to create a project I have this one that I'm using that I'm gonna use again and it's really cool you create this droplet which is a virtual machine there's also a kubernetes option I think I'm gonna do a video on this in the future and there's other stuff spaces and things like that really neat so all you do is just create a new droplet and instead of choosing this abun to base or fedora or something like that go to marketplace because you want a Linux base but you also want docker already installed and set up well the cool thing about digitalocean is they have all of these pre-built distributions and images and all this stuff then you can choose from like if you want django there's probably a pre-configured django things click on the button and it'll install it and set it all up for you but what I want to do is I'm gonna come to marketplace and type in docker whoops not cyber panel what is that docker click docker and let's get some details on it so what this docker image does is it gives you docker so you don't have to worry about setting that up on your droplet but it also gives you look at this it also gives you the OS of a bun to 18.04 really cool so you get the base Linux plus docker already set up for you so I'm going to choose that an innocence a plan they try to kind of sway you into picking this $40 option never do that go down to show all plans and just use the five dollar-a-month option and by the way you only pay for your droplet when it runs so you can build this up and then kill it real quick and only pay for like you know if it's point zero seven cent an hour it's pretty affordable so choose that scroll down to you don't need any block storage choose a data center near you I'm gonna choose New York select additional options no additional options SSH keys so you can do a one-time password if you want but it's a good idea to upload your SSH keys to digitalocean that way you can authenticate easily if you come up here to your profile you should be able to go to account and SSH keys you can just add I think your public key there so I already have it so I'm gonna choose macbook SSH because I have it set up on my macbook droplets I just want one droplet now you can choose a host name how about we call this docker tutorial VM and add tags select project I'm gonna select this mezzanine project and that's it that's all you got to do and click create droplet it'll take maybe 30 seconds to create and while you're doing that check out some of this stuff so you can have manage databases you can spin up a load balancer you can do all kind of you can take snapshots it's really neat it's a nice alternative to the other cloud computing options like Amazon in Azure and stuff it's really cheap five bucks a month I think kubernetes starts at ten dollars a month really cool lots of great documentation - now once this is done you get this IP address here you can select copy and then open up a terminal so I'm gonna open up I term into SSH into this if you have a Mac if you have Windows you're gonna have to do some other stuff I like to use a program called MOBA xterm mo ba X T erm it's like way better than putty if you're on Windows but if you're on Mac you're good to go so what you want to do is just SSH and then I'm gonna use root actually I think you have to start with root anyway the first time you get into your droplet root at and then your IP address I'm gonna hit enter and that's going to ssh us into this droplet and if you provided your ssh key and that talked to your private one on your system then you should be good and it should say are you sure you want to continue connecting yes I'm sure and then it's gonna say enter your passphrase and I'm gonna do that and I don't really have time to go into setting up SSH keys I can do separate videos if you need me to or if you have problems with this just leave me a comment or send me an email or something but I'm gonna move on here because I'm assuming you know how to SSH and stuff so I'm logged in here as root now the first thing you really want to do is you want to change your user you want to set up a new user set some SSH keys up with that user and use that and then disable root that's the safe thing to do I'm not gonna do it to save time I'm just gonna use a root now if you run docker you'll see that hey guess what docker is already installed great so remember our docker hub image here docker push what we can do is just grab this copy it and we can say simply docker pull and we punch that in we change this tag name to latest and hit enter and hey error you know why because we got a log into docker so remember how to do that docker login you and then your username and it's gonna ask you for your password you punch in your password and that's incorrect let's try that again login succeeded now I should be able to do it so go back to docker pool I'm gonna pull my image and here we go it's downloading all of those layers from my image now while this is going on what do you think we need to do next well we have our image what do we do when we have our image well we simply run it and that will spin up our container alright cool so if we go docker images we'll see that we now have this image in a docker repository on this droplet call Travis media react app docker it has the tag of latest it was created says 26 hours ago yeah I guess when I actually created the image that was yesterday it makes sense and the size is 1 point 160 gig all right now that's done how do we spin up the container well with docker run we have our image we run our image and that spins up air container so we do that with docker run I'm gonna put some flags in here RM eyeteeth for the interactive and then we need to specify the ports which i think is 3000 3000 TCP and the name of our image was Travis dot media slash react app docker react react app docker tag latest alright that's all we do and if I hit enter our container should now spin up you see that react scripts start starting the development server and just a note you would want to not start the development server but a production server alright so it says you can now view YouTube app in the browser the port is 3000 so let's jump back over to our project let's copy this IP address go to a new tab paste that in colon 3000 and we should have our app BAM there's our app running in a container so if I go to YouTube real quick and grab some video ID and hit enter there it is our app works great now of course if you wanted to take your app serious you would set up some DNS records and point it to your domain or point your domain to this and not have this IP address but right now we're just taking this simple and easy route so that's the react app so let's jump over to the WordPress app now let's open up this WordPress docker so this is this was our wordpress project we were working on and remember this is with docker compose so there's a number of ways you could do this and what I'm gonna do is I'm actually going to use some other kind of visual aid because remember we have this wp-content folder that we want to be able to develop with and so we're actually going to copy this docker compose to a folder and then we're gonna run it and it's going to create a WP content there that we can pull down and work with and upload and stuff so I'm gonna use the FTP client called cyberduck such a cool name and I'm gonna create a new bookmark here and so I'm gonna click this it's gonna be SFTP and what is my IP address again copy that and all we're doing here instead of SSH in in and using the command line we're gonna use this FTP client it makes it a little easier so edit this bookmark which I thought thought I was doing anyway the server is gonna be this IP address my username is gonna be root again don't do this create a separate user my password is going to be something and my SSH private key is found in its normal place on my computer to validate with my password again and that's it and it saves it there's no Save button so I just click out of this and now if I double click it I should be able to jump into my droplet unknown fingerprint it's okay allow it they asked me for my password again and there it is now since I'm rude I'm in my root folder I don't want to be in my root folder so go back out to the main directory and I'm gonna just make one in this home directory this is usually where the user folder is so what I'm gonna do is I'm going to open this docker compose in the finder and I'm just gonna drag it in so doctor compose drag it right there into the home folder awesome and it's this simple so let me go back to my terminal and let me go to my home folder by doing LS there's docker compose you animal actually I want to make a directory here called WordPress and I want to move whoops I don't want to move docker compose Yambol to WordPress WordPress alright cool so that's in the wordpress folder that's a little better so if i refresh this there it is there's my wordpress folder so as you recall all we did was docker compose up and we have our compose file remember it pulls from docker hub the wordpress latest and it pulls from docker hub my sequel and so it does all the work for us so if you wanted to work on this site you would just simply put docker compose up I'm gonna detach it hit return and it's gonna go and pull these images because it doesn't have it currently so it's pulling from the my sequel library here's all of the layers for my sequel and here it is pulling from the WordPress repository in docker hub voila so it created my two containers the database container and the WordPress container now what's really neat is that if we go to cyberduck now and we go into this folder we should now have the WP content folder remember we made that a local volume so it's gonna grab whatever is in that wp-content folder in right here in my directory and what's neat about this is that you can take this wp-content folder drag it right down to your desktop and spin up a wordpress instance and just work on it so you can pull WP content into vs code you can build out your theme you can make a whole bunch of changes and then you can just drag it back up here onto your droplet and just run docker compose down and then docker compose up and you'll see your changes actually you probably don't even have to do that you could probably just refresh now let's check this out it should be running in was at port 8000 so let's see if that worked so let's come here and copy this IP address 8,000 it's great site title Travis username Travis password Travis confirm password email whatever discourage search engines install WordPress now if you wanted to share this with friends again it's really easy you just give them this wp-content folder in this docker compose file and of course there's the database you may want to export the database I'm not I'm not quite sure upfront how that's handled I'd have to look into it a little bit but uh it's great for development you see the benefits of these docker containers for development now with production again you need some orchestration tool to really get the benefit out of it otherwise you want to be on a stable VM or a couple of VMs especially with the database so it says success WordPress has been installed wonderful let's log in make sure it works so Travis Travis click log in and there it is there's my WordPress site again you would want to point your DNS records here so you could have a real domain not this IP address but there's my site and it's running on digitalocean in a container so hopefully that was helpful this again doesn't cover everything with docker of course but these are the things I wanted to know when I was first starting it's kind of a high level overview give me the definitions show me how to do it show me how to deploy it let me get that much down then I can move on to something like kubernetes so if you like this hit that like button leave me a comment if you got questions consider hitting that subscribe button and I'll see you in the next video

Channel: Travis Media

Views: 441,848

Rating: 4.9305668 out of 5

Keywords: docker, docker tutorial, learn docker, docker for beginners, docker for dummies, docker compose, docker react, docker images, docker containers, docker container tutorial, docker compose tutorial, docker wordpress, docker hub, docker desktop, docker install, docker vs code, beginner docker, docker made easy, dockerfile, docker run, docker build, wordpress container, digital ocean, travis media, travis media docker

Id: i7ABlHngi1Q

Length: 59min 30sec (3570 seconds)

Published: Sun Apr 12 2020