Docker: What Every Angular Developer Should Know About It! - Dan Wahlin

so I'm not even positive I'll be able to do this I think every talk I've given over the last like three months John has been with me so I might not even be capable on my own we'll see but we're going to talk about what's me is one of the most exciting technologies to come out and probably the last five years now I still would say angular is one of my most exciting of all but how many happen to have an issue where you maybe have a team that works on Windows or Linux or Mac and some of your services or on this server and some over here but sometimes your VPN and in it's really hard to get the entire environment set up on your machine exactly like production or staging for that matter I'm sure nobody has this problem right how many have ever had the problem called it works on my machine yes I'm pretty good at that one and I'd love to say that so to jump on in here we're going to talk about the role that docker can play and I'm not going to go you know super deep dive into Dockers there's a lot we could cover here but I do want to kind of make it dangerous so that you can like you know cause smoke and fire back at work and you know be dangerous that way but I'll teach enough to be dangerous here and show you why even as a front-end developer it's very possible you might find docker useful now if you came to me and said you know Dan I'm only doing like node or asp net core or something like that or maybe Java locally I don't even have to hit a database we're faking the data maybe and I just have angular then in that case I'd be like you know doctor might be overkill for that but here's where it gets really cool so if you hit my company side is code with Dan com nobody can spell my name right so my wife said once you go simple because everyone know how to pronounce my name yeah I heard Whelan no Wallen no swallowing swallowing like a wall lean that's the first time I've done that I hope everybody on YouTube will remember this please but anyway I gave up only place that says the right is Sweden in Norway they say it right but it's valine so we have any normal Norwegians are sweet Swedes in here oh yeah all right you guys know how to pronounce but anyway let's jump on in here so this is something that about two years ago I had this problem where I wanted to get a wordpress blog going locally with engine X as the front end that's a reverse proxy if you haven't heard of it very fast for especially static content things like that and it can do some of your routing to your back-end node Java asp.net core stuff like that and I had Maria DB which is basically the the my sequel variant and getting that going was just hard locally to make it exactly like my production version and it got to the point where I would try something locally you know I'd do a WordPress update or whatever and then I try it remotely using the built in features and something would break and I'm like what the heck it worked here like what is the problem so I had heard about this thing called docker which is now about four years old and said this looks interesting but I'm not a DevOps guy and if you are a DevOps guy no offense but I've always viewed that as like the either a the clickety-click people or the command line you know and you're awesome at that right and I was really neither of those but let's suffice to say I've kind of got a lot better at that so I dove in and at first glance I'm like nah this is for my DevOps folks because I have some really close friends that they are in the DevOps world or you know the IT admin whatever you want to call it so as I dove in I quickly said this is pretty cool this is really neat now as we go through it I have a bunch of slides for you this link right here I'm not going to be I'm not going to have time to go through all the slides in fact we're going to do a real quick run-through of what docker is the start now that we've kind of addressed some of the problems but here's the link you can get to for the slides so I'll leave that up for just a moment so a little more history on this story then so I started playing with docker and I'm trying to get WordPress and ninja necks and I had Redis after another project and MongoDB and Postgres sequel and you get the idea you start working with more and more tech to paint on the customer we were working with and what ended up happening was once I got the hang of these docker images and containers which we're going to talk about today oh my gosh this is amazing like you said if you hit with Dan calm or blog go it then there's probably about eight docker containers running it's up in Azure up in the cloud and that's actually how those sites are actually running it's all docker behind the scenes and it's awesome because right here on this laptop I'm not going to run the blog one but I could get my entire production version of my blog with there's three containers for that one going exactly like it will be on my Linux servers right here on my laptop and it'll be exact so that when I make a change I have the confidence that when I deploy it it's just going to work just like I thought all right so let's talk about the challenge then of this so the challenge is you know maybe you're working on a project that does use these different texts we have nginx as a front end reverse proxy we have multiple maybe micro services given that were angular developers you might be calling a Java or.net or a node or PHP or something like that and then they might call different databases it could be Postgres sequel server oracle whatever then you might also have some caching all right and you know if you just got hired at the company you might as well plan on like two days of downtime just to get everything configured right right and some of you have done this before it's pretty easy to install things but it's hard to get the security right exactly like your staging or your production environment so you're going to see that with docker it's going to make it much easier I have a micro kind of a mini micro service demo I'm going to run for you at the end here where I do have these things I have nginx that's our front end that's where angular is going to be hosted one of the things we see in a lot of the demos here this week is you know ng serve and that's great for development but you know you're not going to ng serve in production so where do you put your code well you could throw it on apache iis engine x-h a proxy there's all these different options but we're actually going to do that for real here in just a minute and then angular then if it was in the nginx host container might call into Java or.net or node or PHP or whatever now I have it where it's going to call into nodejs which uses and I have another little micro-service we'll call it which is asp.net core Coleen Postgres sequel so much more of what I would call a real-world scenario for large companies where different teams are responsible for setting up these micro services all right so let's talk about how doctor can help with this so first off you know kind of what is docker well it is all about simplifying number one getting an environment going on your box first off and that's probably why most of you would be interested but if you are also in charge of some of your back-end and how many do server-side code as well as angular in here almost everybody well you know the challenge is there to get that server configured exactly the same between your you know your dev box or your dev servers or whatever and staging and production so it'll help with this we're gonna be talking about containers and containers if you look at the doctor wail image there you can think of it just like that it literally back in the old days you know go back to like 1600 s when they used to ship stuff across the ocean there was no standardization so from what I've read didn't get to see it but for when I read it was very time consuming to get stuff on and off a ship because you had different sizes and it was just hard well then they standardized you know on these shipping containers which everybody's seen at the docs and things that's kind of how docker is they provide a very consistent way to not only get environment running on your Mac or Windows or Linux machine but also to move that forward to staging production and whatever whatever else you have it can even even be used for various testing scenarios maybe you have to run all kinds of tests and you want to kill it all then reopen it and drop it again and so on and so forth now what's nice about it it does run natively on Linux now on Mac I'm on a Mac right here obviously and I can run it as well although we'll talk about how that works and then on Windows if you have Windows 10 or higher you need professional or higher you can run what I'm going to show you in just a bit here it's called the community edition of docker it's the free one now if you're on Windows 7 at work which I know a lot of you probably are at work because they just haven't upgraded you can still do it but it's called docker toolbox and that uses VirtualBox under the covers but the bottom line is by default it's going to run on Linux but if you are a Windows server company Windows Server 2016 now natively supports the same type of technology now I'm going to be running Linux containers today but you could do whatever you want all right so that's kind of what I was saying there if you're on Windows 10 Pro or higher you'll be able to run the same thing I'm going to do if you're on Windows 7 you can do it it's just a slightly different way that you do it alright let's talk about these things then called images containers so the way it works is you're going to create something called a docker image or you're going to pull one from something called docker hub and you go to hub docker comm and you get the docker hub and they have all everything you can think it was up there if you want to get Jenkins going as long as you know how to configure it so that could take a while but you could get Jenkins up on your machine literally as fast as you can pull down the the image and we'll talk about by the way these are not VM these I don't mean image like VM this is a different concept now what we're going to do with that is we're going to create a docker container then this is actually the runtime version of the image so for those that have you know the class background which if you've done typescript or any other language that uses classes really it's like the doctor image is almost like the blueprint the class and the container is almost like you nude up the class now you're going to use it for something and that's how you can kind of think of the difference between these now an image is just a read-only template what it has is a layered file system of all the stuff internet for instance is going to have all the nginx stuff that sits on top of whatever operating system now like I said I'm going to be using Linux but you could do Windows Server 2016 if you wanted which is actually super cool now the container is actually then at runtime like if you hit my website you're hitting containers live and that is kind of like the runtime version of your image so it kind of looks like this an image is going to have these file layers these are just read-only all right so that if they're actually weilong it gives these each layer gets a unique what's cool about this is if you pull let's say engine x4 reverse proxy and it has that first layer and start what is that 9 1 or something like that and that exact ID is used by another image then when you pull that image it won't repol that layer it's going to go oh you already have this and so every little layer I think of a cake think of a chocolate cake with multiple layers each layer is an instruction on files something that should happen with files it could be your source code in this case like engine X or nodejs it's going to have the node code of course it could be your npm modules could be your javascript files so you make an image and then that at runtime you make these containers and that adds a real thin readable writable layer they call it now not something to focus on now where does it run as mentioned it runs on Linux or Windows I'm going to show you the the Linux side of that today but it is not a virtual machine this is what's so really cool about it so on the left side here this is the kind of traditional way that I think most of us that work with VMs have done it you'll have your host operating system Linux is pretty popular in this world but Windows Server can do it as well or maybe something else you have then on top of that we usually have our guest OSS so that's literally a new copy of the overall OS right and we know those that how many worked with VMs that work much either pretty big right I mean they're not one of these like oh yeah it's only 10 Meg it's maybe 10 gig depends on what what it is of course now what the difference here with doctor is is you still have your hosts and this will be Linux by default or Windows 2016 server but now on top of that imagine that some layers that add the missing pieces onto the host that you could kind of think of it as that runtime it almost like it merges them together now what's cool though is each container you run which would be like app 1 and app to here it could be isolated now it depends on how you do it because there are some tricks to this but you can literally think of it I could run like node heaven forbid 0.1 dot what - or whatever it was a really old one in one container and I could have knowed you know 6.10 dot whatever the LCS is right now and I could have knowed seven dot what are we up to five or four something like that right now all of those on the same exact box or Java or.net or you name it and each one is in its own isolated container now think about how cool that is anybody had this scenario yeah your boss comes in and you're having a meeting you say you know we'd like to move to this version the framework it's super cool has all these awesome features and then your boss then or whoever says I can't do it this app on this server if we update it's going to break nobody's had this right and so now you have this server that kind of has to stick around or the VM hopefully and eventually you'll migrate it but for now you're kind of stuck so what do you do and you spawn up another VM for that which works but with this you can still have just one VM with multiple containers running which you're going to see in a moment so let me show you that just a quick example of this real fast here so I mentioned that there's this hub site it's called hub docker comm and you'll notice up in here I have a search area and we're going to do nginx here in just a moment so let me go search for that okay so here's an engine X it's the official image you know from the group that runs that actually so let me drill in there and then there's even different versions of it I'm a big fan of Alpine Linux because it's teeny when I can use it and but you could use a lot of them will have you know an Ubuntu or Debian or whatever it is they'll have different flavors of Linux for instance and then of course on Windows you can do the same with a Windows image so what I can do is I can actually over here to the right they have this command you can run now before we run it let's go back to the different tab here we're going to go to docker calm and while this is loading let me show you up here on the top of my kind of toolbar here area for my menu this is called a docker Community Edition dr. seee you'll notice there is an Enterprise Edition as well this one is free that one is not but this will let you get to all kinds of stuff you can create a doctor ID in fact I'm not even signed in right now for some reason but it won't affect this you know I could stop it but this little whale you'll see doctors running and what this is doing under the covers is running a very lightweight kind of hypervisor and it's running an alpine Linux VM under the covers so every demo I'm going to run I'm actually running Linux technically even though I'm on my Mac and if I was on Windows 10 or Server 2016 or higher I could actually run a Windows version of the image now let me now that I've kind of shown you you can go to get docker to get it for Mac or Windows if you have Linux you can just run it natively because it's built into a Linux container option so let me go back to the command line here in fact I'm going to start a new one up and then let me zoom that just a bit okay and we'll zoom more if we need to what I'm going to do is if I do MPM or MPN wrong one docker you know whatever it is pull engine X and I'm not gonna be able to type it who wants to come up with type for me alright now I've already done this so I'm not going to run in fact it should be quick but I'm not going to trust the network here this will actually pull down the image for engine X and I'm going to show you how we could run this very quickly and you might be going I don't even know what engine X is you know what neither did I until about a year and a half ago I had never used it until I start dive into the doctor and I was like oh my gosh this is amazing I can get stuff I don't even know how to use going you know so which is kind of scary of course but let's hope you're DevOps people do know how to use it so let me go ahead in here and now I'm going to show you some commands don't feel like you need to memorize these I have some slides in the slide deck but I could say hey docker I would like to see all the images on my machine all right now you'll notice I have some node if we kind of zoom in here I have a node regular and then I have no doubt pine which is a very small version I have nginx regular that's the latest there in the middle and I have Internet's Alpine and then I have a asp.net core I have WordPress Maria DB MongoDB these are all images now this is what's so cool though if I didn't want one of these I could say docker remove image Maria DB and then actually I'll have to give an ID here the image for Maria DB would be 7 II kind of look over here in this image ID you don't have to type the whole thing you can only just type just enough to do it now I'm not going to delete it because I might need this like tonight but and hotel Wi-Fi not always good but this would actually remove that image and it there's like no trace now that ever had that there's no install I don't run an install package and then clean it up and uninstall when I'm done or you know how many have had it where new version of comes out or Postgres or whatever you use and ok now I'm going to run through that update process and you know you could use vagrant or stuff like that but with this you'll see it's very simple okay so that's the docker images now what I can do then is well let's go back so if we go to doctor images here so I have this engine X Alpine now what you do is you the left one is the name of the image and then the tag you put a colon so I'd say into next colon Alpine's let's get into the next going right here so let's pretend I did a docker pull engine X Alpine inner I'm not going to trust the network on that one because it shouldn't do anything but I don't want to screw anything up because I really need that later in the demo so let me go ahead and let's try to run it and the next command I can do is I could say hey docker I would like to run I'm going to run it what's called daemon mode that allows your console to still be active and I'm going to run it on port 8080 and then the container is going to be on port 80 though nginx by default uses port 80 for that and then I could come in and say what image do I want to run on port 8080 that forwards support 80 in the container well I want Alpine well sorry in genetics okay okay so what we've done here is said hey doctor let's run this in what's called daemon mode you'll see what that doesn't just decide on a port the external port I'm going to hit in the browser is 8080 but it's going to forward to an internal port okay which is 80 now why am i showing engine X well because as I said you know yesterday today a lot of talks you're going to see they do ng serve and that's great for development but at some point you got to get that on a real server right the little light server and things is great for dev but maybe not for production well engine X and many other options again it could be a patchy if you wanted it doesn't really matter it's up to you you could do it so let's go ahead and hit this now notice that my console came back that's because it's running in the background now in daemon mode let me go ahead and try to go to the browser now we'll go to 8080 and there we go I now have nginx up and running and I've yet to do anything now it's not going to impress friends and family but that's pretty cool now if I wanted I could say docker well let's go do that in fact say hey docker show me this PS - a will show me all the running containers and you'll notice it's running 35 seconds ago approximately it came up and now what I'm going to do is stop it so I'm going to say hey doctor stop and then you give it the ID it's on the left if c2 something that just stopped it now I'm going to say hey dr. let's just remove it I'm done with that container gone okay now if I do docker PS - a no containers are running right now so I still have images again if we go back to dr. images I didn't delete that there's my nginx but you'll notice that my container is gone so now I can't run anything but I could restart up the image if I wanted now that's cool but how does that help you with angular well let me show you how we could do that so let's say that let me see the end of my desktop and I think I have a demos yeah so let's do the good old ng good old what's it been out like a week officially or something but in the official release but let's go ahead and do ng and what do we want to do here John did it yesterday we want a new up a project right now this is a anybody else new to the CLI in here it'd be honest we kind of all are this is where the whoops yeah we could do that or - - h-help I think we'll do it this is where the little help will be very helpful so John showed this yesterday let me go up to the top here you'll notice that we have all the different options for building which I'm going to do in a moment we have Auto completion and you know it goes on and on and on so if you're new to this and you didn't have time yet to play with it I was actually not a huge fan of the CLI until really really recently John showed the ng object right there that's why I went cool because now I can have complete control over the like the webpack file and stuff things like that so you know we can generate new things we can get things we can lint we can new which I'm going to do here but anyway so where most demos go here though is they do this they do ng new let's call it my project I don't think that's taken and we could say - - and what is it routes or routing router yeah there we go so let's do that and this is going to go ahead and I don't even need the router but I just wanted to show it let's go ahead and spec that out now I'm hoping the network's going to cooperate here otherwise we'll have to move on but it should hopefully as I'm wired in get our NPM so while this is running what I'm going to do is once we get this I'm going to run a ng build that's going to generate a disk folder and then I'm going to actually run angular the demo that it generates in engine X with I'm going to take me about 30 seconds or something like that and then you can have a real server and again this could be a patch it could be whatever your server is to serve up your static content I like engine X some people like H a proxy some people like Apache hi is whatever maybe so let's let this run here and we'll come back I'll tell you what while this is running since there we go there we go not bad so what I'm going to do now is an NG let me clear this so you guys can see let's do ng build it has to be oh I have to be in it yes thank you so let's go in it so notice I have a my project so let's go ahead and CD into my project now we run ng build and then you have your different - - prod and all that I'm not going to do a OT quite yet but will that web pack and all that do its thing and this will generate our bundles and then we're going to try to do hopefully is get this up and running in engine X with docker containers so let's go ahead now and CD into the disc which is where it would have put the code let's make sure okay looks good and now what I'm going to do is let's see if I can remember the pass here if not I have it let's do the same thing I'm going to say on the external I want to call port 8080 but internally in the container it's going to call a tea but I'm going to create something called a volume now I put a few slides about volumes what this does is by default when you kill a container everything goes any logs any code anything that was in that container bye-bye it's gone that obviously would not work so well with databases now you take down the container and boom there's all your data hopefully you have backups so what I can do is create what's called a volume and I can say hey container I want you to point to this folder on the host now I want it to point to my disk folder and that's called the working directory so I'm going to use this little dollar PWD and it's just a shortcut for working directory and then I'm going to go to its us our share engine X HTML and if that's wrong I'll go look it up but I think that's right and then what is it I want to run well again I want to run into next alpine in this case that's the kind of smaller version of the image alright so again docker please go run in daemon mode on port 8080 for us this is where the browser is going to hit it go run this nginx Alpine but create kind of like a link between the container and this disk folder so that when nginx sees this us our share engine XHTML well that's where your spear code goes by default anyway you can change it I want it to point back to my local machine so that if I make any changes there it just automatically picks it up in the container so you can kind of think of it like just as an alias to some folder that's on your localhost which is my Mac right now okay so Linux pointing back to the Mac now we'll see if I got that right us our share I think that's right okay so let's go see though I'm gonna say docker PS - a will list it it looks like it's been up for five seconds okay that's a good start it's better than down so let's go back to the browser now and we'll hopefully now see the CLI you know little app that it generates so let's go to localhost and what did i do 8080 I believe and that's that's that's cache hopefully all right there we go so now I am running my angular CLI app which is very sophisticated you know if you could sell this for $0.99 on the App Store to a million people you're rich but I'm now running that now yes that's very basic but you can see how easy with just that one command I'm now able to get angular going on a real server that's capable of handling millions of users if I wanted now I have a much more robust one I'm going to show you here in just a little bit but pretty cool right not bad I mean yeah I won't lie to you I had to i've spent a few years now doing the commands so I told you I didn't really come from the either clickety-click or the command line world I was a little more of a visual back in the day and so you know now of course I love all command line stuff but takes a little practice it's all alright so now that we've seen that let's go ahead in fact how do we how do we take it down the container anyone remember stop yeah so if I look on the left you'll see on the far left 3a what is it 386 now you can name your containers by the way there's a - - name you can do I didn't do that but or you can use there's gifted Aria bata I don't know I did a course for Pluralsight and they did a random one of these that I left in didn't make it through the review process it's something I'm not allowed to say on stage we have Code of Conduct but I thought was funny so I left it in there like now you can't put that in so I had to RiRi record that clip but anyway so let me go into here and just again do it again dr. PS - a repetition is good here okay 3a so doctor I would like to stop 3a and if you have a bunch of them and maybe two of them start with 3a then you go one more three a6 you know I do as few as I can and then we'll say docker remove 3a and now if we do dr. PSA you'll see it's gone okay I still up my image don't have my running container it's as if it never existed and again if I want to remove that image if I was done with it which I'm not then I would just put the image ID right here and it's gone it's as if it never existed and it instantly deletes it it's not like this big uninstall process and something like that it's very very cool alright so let's do a little bit more here and we do it on time okay we're doing good actually now can you imagine if you had a node container nginx Postgres PHP you know maybe you have this micro so everyone use micro services that work yet okay a few of you if you ever heard of the Sola concept service-oriented architecture microservices is kind of like the next evolution of that that's an extreme summation but kind of what it is it's a way where you know this team you guys over here you're all in them that's a big team but hey you're all on one team maybe you're doing note but this team over here you know you're a different part of the company or maybe contractors or something and maybe you're doing like PHP alright well I as angular I don't really care I just need the URLs but how you going to manage this can you imagine docker run yours docker run yours docker run the database docker run this docker run that I mean you be there all day you know it that would get old and while I'm okay with the command-line I'm not that okay with the command we're not that good of friends so I'm going to show you a little extra bonus thing we can do here in just a moment so let me get back to the slides real quick and then we'll jump into something called docker compose which is like phenomenal those that are going nope I don't like this too much command line already you'll probably like what I'll show you a little bit because there's only a couple commands now the benefits then of this so you know you get back to work and you're like yeah dan said this is kind of cool and then they'll probably go Oh Dan none if John said it listen but you know Dan said it's not that's what my wife does yeah we actually our families are real good friends so they hang out and who knows what they say about us but anyway the benefits here are many having done this now for two years in production and I know several companies we work in that we worked with that are using this in production number one if anybody does have contractors and it's very difficult to get them to set things up in a way that's consistent with your staging or test environment this can be cool for that we'll talk about that in a moment maybe you have some UI folks who they're tweaking the CSS and doing the images and all that stuff that you know changes our battleship gray to readable they probably aren't going to know how to get a server up potentially you know their their skills are much better than my skills they can do things like Photoshop and all that okay so we'll talk about that app conflicts again what happens when a new version of our framework comes out well for a lot of you that probably means either a new VM or a new server if you have existing apps on an older version because you don't want those conflicts going potentially now there's ways around that too but environment consistency this is huge we're on a project for I'll just say it was a large credit card company and when we got our environment going well we use their dev environment moved it to the stage environment everything broke and it turned out they had some extra firewalls and some extra stuff in place that we didn't know about okay well this can help with that getting it to production much easier AWS as your you name an app Harbor all those different things out there will allow you to do containers now so I go to something called I'm not going to have time to show it today but I go to something called cloud docker comm and literally when I have a container update I can link it either a to a hook in my I use bit bucket for my private but github for all my public most of it anyway and I can link it and I can even have a hook then when my source code changes it rebuilds the image and then I could set it up I don't have this today but where it even redeploys the container that one I like to kind of control a little bit more right now but you can even hook all that which is very cool so if you are in this mode where you have extreme mix you have server-side folks you have UI folks you have people that just managers they have no clue you know whatever then this will help you get these servers whether it's databases web servers reverse proxies you know Redis for caching maybe all going in a consistent way and I have a kind of a much bigger demo I'm going to run here to wrap up once we get to it app conflicts I've already talked about let me go back so again you have like version 1 version 2 version 3 well that can be a little bit problematic sometimes depending on how your framework works and updates and things with this we can help avoid that and then moving between the environments our staging our production things like that could be much better so in the in the end it does this it ship software faster now let's get to where it gets really cool so kind of steps again that I've already gone through is you do need to install docker Community Edition and you do have to have again Windows 10 Pro or a now if you're running Linux there's actually some commands you can run and just get it natively on Linux that's it's kind of default home you may create a custom docker file now this is a docker file is how you make your custom images and I'll show you some of that coming up here in just a moment before we run the big demo and then you're going to run these commands you're going to run the docker run docker remove docker images docker PSA all that type of stuff to get this going now if you're on a Mac what it does under the covers is uses hyper kit and with a little alpine Linux VM to host your Linux if you're on Windows it's going to use hyper-v that's why you need Windows pen Pro or higher but again you can use docker toolbox if you're on Windows 7 and it works that's how I started so they have these things called docker files I'm going to show you a really simple example here of some of the images I have for my micro services that angular calls much more real life example coming up here and this contains all the instructions as it says there for how do I build the layers of the cake what files are going to be in this image might be my source code might be images you know who knows I so you're going to have these instructions and then when you do a docker build which I'm not going to do because mine are already built it will convert those docker files into an actual image so it kind of works like this so you're going to write a docker file for maybe engine X maybe in there you copy in your angular that's what I'm doing and then you're going to run it through this docker build process and now you have a custom image so the ones up on docker hub some of those are custom some of those are from the actual component vendors out there or the server vendors like nginx or some of the open source ones like Postgres and things so here's a quick example let me just write this out this is actually an asp.net core example but I could do node in fact the demo I'll have has node and SP net core and a bunch of other stuff so you you say from and you give it your base image now this is kind of like I want to inherit that from this cake now I want to add my own layers on top of that cake that's what this is doing of course you always got to put the maintainer so you know who to blame you have the copy I'm going to copy from the local folder that's the dot into this bar dub dub that would be where it's going to go in the container when it runs I'm going to use that folder as my my startup directory my working directory and then in this case I'm doing some commands specific to something called asp.net core now if it was node which I also have in this demo you know that's where you can run p.m. to or node Mon or whatever you forever whatever you like to use to start it up or maybe it's called note node server j/s or whatever you call it so then you do this you just kind of write all these out real quick so you say hey doctor I want to build an image I would like to tag it as now the thing on the left you can have your own repositories up in doctor hub or for most companies they'll have a local repository so this would be something that your IT admin would set up you as a developer then if you have rights would be able to make your own images now other people on the team would be able to pull that image down and use it on their box which is very cool you'll see in a moment then you can give it the image name in this case I called it net and then I gave it a version as well in this particular example and then dot means what's the context well use the current folder that's where the doctor file is in the current folder then I can do what you already saw then I could say hey I'd like to run it in daemon mode I'd like to name it net I would like to do that port internal/external well it's actually sorry external is the one the left internal is one on the right and then there's the name of my image I just made it to last slide okay now here's the problem though this is great if you do the demo I did but what happens when your app has ten containers can you imagine have to run it can get much longer than this and you're like I don't think so okay so the good news is let me skip forward here they have an orchestration tool built into docker which is just phenomenal especially for dev called docker compose and those in here and no one gentleman in the front row here where are you yeah you're probably using this right okay or that or that yep there's a couple options for orchestration but here's the general idea I have all these images that want to convert to a real-life production like environment exactly on my machine though you know I do not want to run docker run docker run docker run ten minutes later you finally got them all up but you realize you screwed up one of them now you got to take it down and you know it would be painful that's actually what we used to do by the way in the old days and I'm here to tell you you're catching at the right time because I spent way more time than I should have back then so let's say that we have this scenario I started to talk with we have maybe in turn X or Apache or whatever you want to have is your front end server that serves up your static content we then have some back-end API server so let's say angular in this case is in Engine X like the demo I ran it's going to call into these different API s will call these micro services and then they would have typically each micro service has its own database own cache kind of self responsible well to get all that going is actually challenging so fortunately we have a very simple way to do it you end up creating a file called a yamo file and this yamo file is basically just a file that says hey I have nginx here's where the images I have Redis here's where the images I have I have a have and then what it'll do is with one command you can bring up everything on your dev box which I'm going to attempt here in just a moment while I pull the rabbit out of the Hat we try to do those both the same time so it kind of works like this doctor composes a yam will file and this is one of those things you just go find a good one and kind of copy and paste and tweet if there's one thing I'm good at I'm really good at copy paste let me tell you I think that's my number one skill in programming that in googling right but what is going to do is orchestrate one or more images another convert the image in other words convert the image into containers and this is kind of what it looks like now we're not going to spend a lot of time on this but you'll notice and there's there's even a new version I'm not running it yet but there's even a new one but ASP is a service I have Postgres is a service I have and then you can even set up custom networks between your containers so that other container can't talk to this one if they're on the same box same VM for instance now you'll notice on the ASP one there's a build process there context is dot that means use the current folder and the docker file I'm going to use is called ASP docker no dr. in the example I'm going to have you for you Postgres whatever it is so it kind of works like this now this is what this is where it gets really cool this is where a lot of you especially if you're like you know what Dan I'm not a command-line person I do not want to use a command-line more than a few keystrokes then as long as you have docker seee installed you can run docker compose build that will now go into this file right here and create your images now there's bottom one Postgres I don't have a docker file I'm just going to pull the image up from docker hub or your personal company hub if you have one so in that case it's pretty simple so what this will do now is I say hey docker compose notice not docker dr compose build now that's going to read the yamo file and build up you know it could be 50 images who knows one command will do that now you'd have the images on your machine now you run docker compose up that now starts up all the containers and when you do the yamo file you can even say hey this container depends on this container you can kind of make sure they load in the proper order there's actually still some challenges there but and then when you're done you just live long and prosper it's pretty nice so let me show you an example of this in a much more kind of real life project this is actually kind of based on so so I think I went to bed about 3:30 last night because you know I was just going to do the nginx demo and I went now I just can't do it we got to do something big so like an idiot John texted me at like 2:00 or something's like you're in bed right and I'm like nope like I got as you knew I was doing the demo but hopefully you'll like it because it's it's definitely more robust the angular apps not huge but it's hitting multiple micro-services node asp net core Postgres MongoDB and everything's doc arised if you so let me open up this file right here it's called dr. compose and then we'll run it so notice I have some services I have Engine X it has its own docker file I need to tweak things a little bit it has a volume now this volume says I want to point to the local disk folder like I ran earlier but in the container the U us our share engine XHTML well really the that's just an alias for the disk folder so the container is pointing out back to my localhost so I can make changes down the disk folder and the container since it points to that automatically gets those changes now that's not good for production but in production what you would do is in the docker file you would copy in your code into the docker image now anyone that pulls your image down they have everything they have in genetics they have all your code if I'll configure the security setup for real life I have SSL certificates for instance that I can pull in to my image now those you want to secure of course now moving on down there's the ports I'm going to hit nginx on port 80 or 443 I'm not using SSL here but you could all right there's a node container has its own docker file there's a MongoDB container there's an asp.net core container my goal was throw as many technologies as possible to simulate the typical enterprise because nobody can seem to just do one thing anybody else have that we're like the question is what database you use you're like what database don't we use you know it's so ridiculous yeah I've seen no joke and some of you probably have I've still seen access driving websites you haven't seen this by chance scary scary scary stuff out there now what you can do though from here is now that I have that docker file which you know it takes a little bit of practice to get right I will admit if I do doctor images again I've already done the docker build process now I could run through it probably here pretty quick but we're getting we got about ten minutes at the most here so but I could run through that and dude I could do this I could say docker compose see if that's big enough for the back bro and I could say built now because I've already built these unless an image up on docker hub has changed and which is why I'm not going to do it because it could be that literally ten minutes ago engine X updated and would have to pull the new layers down because I'm using the latest version which by the way is dangerous you normally want to use a specific version of an image because it's kind of like saying you know I totally trust who the wrote this JavaScript library and I'm just always going to use the latest they'll never break anything never I had a problem with anybody hit the core j/s issue a couple weeks ago by chance well I had the what is it the Hat and there was a breaking change in the metadata for a core Jas for the typing and it took down every single app I had and I went why did I do that and luckily it didn't make it to production but in Devitt took them everything down so now watch this now this is the moment of truth I'm going to hope the network's cooperating here because it will have to hit the network I'm going to say doctor compose up now for your UI person and your task is to make it look real as in good how do you do that you don't because you're like I don't know node I don't know Postgres I can't get all that set up so you'd have to spend a couple days working with something to get that set up probably you know be like me going hey Dan use a Photoshop for me or one of the other tools I'd be like yeah I don't do that not too much anyway so if I do doctor composed up so take a moment to fire up but notice it's creating all these containers and now it's giving me some logging now I didn't do the you can do a dash D for Damon I didn't do that so it's going to tie up my console here but this is actually going to pull right I didn't bake in the asp.net core packages kind of like NPM packages so it's going to have to pull these in now it's feeding the database with some fake data very important for an app for production and then let's try it so now I have nginx with angular it's hitting node which hits it's hitting Postgres which hits or sorry hitting SP net core which hits Postgres and then in the real-life half I would throw in Redis I have some reddish caches so let's see what happens here so it's good as just localhost remember it was just 80 was the port alright awesome looks like it worked now I literally just got angular in engine X hitting these microservices hitting a real database now to be real honest this is all coming the names here are all coming from the node micro service and but I wanted to throw another one in which is asp.net core so it's very sophisticated that's where the states are coming from awesome I had to break it out somehow you know so anyway this has full crud operation support it's very easy literally you guys could probably get this up and running exactly like this in fact I'll give you that there's a link this is up on github right now I just put it up last night at probably three thirty years maybe three pan and this will actually does cores and all that fun stuff because I had to for microservices does the updates you know have some basic filtering paging stuff like that I won't say it's perfect because some of this was written very late last night but this is a full-on angular app in nginx hitting real databases real servers real you know micro services with docker and now that I have these images if I were to deploy these images up to a private repo or just make them public and docker hub then you actually well you can run this too by doing the docker compose build I could deploy this to AWS and Azure in probably if he gave me maybe 10 50 minutes now I'm not going to prove that but I'm pretty confident that it could I would use in my case i d--'s dr cloud because that's what i'm comfortable with but there's like even other options dr. cloud will let you push these images and get the containers running in AWS and many other things like Azure and stuff all right so I think that's cool because now if we go back to the command line I have databases web servers proxy servers all kinds of fun stuff running and then when I'm done I just do this and let me clear this docker compose down so you have up and down now what that's going to do is stop all the containers basically kill my app and it's also going to remove all of my containers now you could also do some other options but give it a sec okay let's do docker PS - eh nothing dr. images there's my images okay and now I can start it back up so if you're someone who does not deal with this side you your pure JavaScript you don't do the server-side at all literally all you have to do is doctrine compose built docker compose up and boom you can now at the live source code on your machine and see it in a real-world context of exactly how it's going to be in staging or production [Applause] alright so to wrap up here let me show you have quite a few links and things for you so alright actually this is the one you need so if you came in late and didn't get it if you get this link right here it's going to have a ton of github repos that I have for you I'm going to show you the first one in just a moment that I just ran and that will have everything in there so let me go ahead and leave that up and then I have one more thing I want to wrap up with and we'll time for lunch I'm hungry alright I'll go back to that if you need it so the project I just ran is angular doc-doctor microservices is this first one and then I have a bunch of others though that also use docker with angular so if you're interested you can do that and these are going to be a little more real-life not just the ng serve you know kind of demos Jandra said I also have some courses up on Pluralsight brand new one just came out angular a note it also has some doctor but let me go back to here and with that thank you very much appreciate [Applause]

Channel: ng-conf

Views: 67,189

Keywords:

Id: socWfhPJptE

Length: 52min 30sec (3150 seconds)

Published: Fri Apr 07 2017