“Containerizing” Angular with Docker - Dan Wahlin

okay okay and now welcome Dan the Willing it's good you just did that cuz guess what I just realized I'm like shoot I didn't plug in my power so hold on let's plug that in and we'll get going that was um I don't think you can have a better intro than shy cuz he's just awesome alright alright there we go yeah the screen went damn and I went that's not a good sign so my name is dan wall lien thanks for coming with shy everybody hopefully just woke up there I listen to a little Rammstein on the way over so I'm actually kind of pumped up that's that's like probably 10 cups of coffee or something right little Rammstein live so I run a consulting company called Wally consulting and work a lot with some of the stuff we're gonna be talking about so we're gonna focus on containers and yesterday some of you probably saw five minutes of containers and probably everybody's like yeah I got it everybody got it how many are actually using containers okay you just downloaded it good job so let me tell you a little story first on how I got into it and then we'll jump on in here so when when I switched to I switched a wordpress a while back and I'm not a PHP guy but there was a particular plugin I wanted to use and so I went ahead and used it and I was using a hosted version of it and if anybody's ever had the fun experience of you go ahead and just update production directly right and for whatever reason the new plug-in I wanted to use bombed production and of course I didn't have another way to recover this and so it was a little mini one of those my gosh what have I done you know and so I went okay I can't do it this way I didn't do that for anything else just just the blog but you know because it was hosted so I had heard about docker and this is this is probably about three and a half almost four years ago but I hadn't really done anything so I said you know let's see how this goes and I ended up getting WordPress took me I won't say I did it in a couple hours I spent a bit of time because I was learning everything you know learning curve and was able to get it a hundred percent with I used Maria DB my sequel locally on my machine so that I could run the exact same setup as what would be up in the cloud because I hosted this up on a sure so that really piqued my interest cuz I'm like oh my gosh I can run the exact same setup make changes deploy these canoes we're gonna talk about to production and boom and guess what there's a good end of this story I have never once knock on wood somewhere had a problem again with updating something because of course I always do like we should I'm able to update it locally try it out and then I can push to the cloud so we're gonna be talking about not only angular but same buddy doing micro services at all okay actually quite a bit same be doing micro services right it's a very subject very subjective comment so all the contents gonna be here hopefully you've had time to check this out it's up on Google slides so you'll be able to get to it at any point so let's jump on in here so the agenda we're gonna talk first off kind of why containers I gave that little story but I'll give you a little more here from there we're gonna go into so what exactly are containers and images and how does it work what are some of the commands you might want to know I'll run a few demos as we go along with that and then we're gonna jump into some scenarios ng serve is awesome I mean anytime I can use ng serve and call into like a restful api and not even have to bring that up at all just run ng serve and be like I'm happy then I like that but before we do move between environments staging production whatever it may be it is kind of nice to make sure it actually works the same right so we'll talk about that a little bit we're also going to go into what if you want to just automate your build process with containers you could do that and it's actually very cool it's very easy to get going to talk about the whole concept of angular calling services all right so some of you are probably lucky enough you just focus on the angular but I suspect there's a fair number in here that you're also building out some of the backend services and as you know that's where it gets a little tricky right because it's like the angular apps working great but how do I get my exact environment up and running locally or even on a dev environment and then ensure that it actually works in staging and production and stuff like that so we'll talk about that and then just a real quick section at the end on deploying like what if you did want to go to the cloud or something you know how hard would it be we'll talk real quick about that so why containers I asked that question myself because I'm one of those that when a new tech comes out that has all the hype if you have any non-technical management as an example and they went to like a CIO conference and somebody told them it was a good idea to do containers they have no idea why of course and then they came back and said let there be containers right and then you're like do we need this and I'm always one of those that right tool for the right job I'm not gonna say that containers are appropriate for every single scenario but I'll be honest everything we do now a lot of our clients they're using containers and so we'll talk about that so why well back in the day its dates me a little bit but I got one of these bad boys here for Christmas and the deployment mechanism was pretty phenomenal it was this my favorite part of this is it's a mini disk right they had bigger ones than this for those that have seen those you know and then as the web progressed things like mosaic came out this is actually one of the first browsers I ever got to use when I was in college and it was pretty easy to deploy in the right because all there really was was HTML at that point this was a pretty awesome retro editor here called hotdog Pro I don't know if anyone remembers this yeah I look at it now and I go holy like battleship gray you know it's like there's some serious design decisions there but anyway and then you know we've used things like this and I'm sure some of you still have deployment processes that are kind of like yeah just load up the files over here going to the server over here and hit a button and hope the server versions hasn't changed and things like that and patches and environment variables are all there all right now I showed this yesterday this is kind of how it sort of feels for a lot of people this is how my WordPress process was not the fault of WordPress my fault and that's kind of you know things tend to sink a little more when we don't have a more either automated process or even if it is automated how many I've ever had it where somebody updated the staging server the version or even patched it next thing you know for whatever reason your build stopped working your app stops and you're just like what you know and you can't figure it out well this is the problem so yesterday I also showed this that we can use these containers to not only ship our code but also ship the exact server I literally could run different versions of a framework on the same VM no big deal because I can containerize them all my environment variables can go in here any security settings everything unique to that part of the app can go in the container now I showed you can also have services and you know who knows could be Java could be net could be PHP Python whatever it may be all right so how does doctor help well really it provides a shipping in building and kind of way to run your app there and it runs natively on Linux that's where it kind of came they have this LXE technology and then when doctor came out doctor is not the only option but that's the one I've used that's what we're gonna talk about but it also runs on Windows Server so you can do Windows containers as well we'll get into that a little bit with mostly Linux though today now to get it going you need to install docker Community Edition very quick install and you'll be kind of ready to go that's gonna put a really small Alpine Linux install and if you're on Mac you'll have a kind of hypervisor and hyper-v if you're on Windows alright and that's kind of how it works and we're gonna talk about these images and containers so the way this works if you haven't done it it is there's a lot of containers that are already out there so I'm gonna show what a real quick yesterday I showed it really fast cuz I had like five minutes but I'll show a little bit more now on one called Engine X as an example it could be Apache though and this would be something to host our dist folder from angular gotta pick something right so what you'll do is you'll either use an existing image or oftentimes you'll tweak the existing image like they'll give you the kind of bottom of the cake and then you'll be like nah you know I think we want our cake to be this tall and you'll add additional layers these are instructions you're gonna see in a moment and what these instructions will do is say when the container does run here's what to do now what's different when we run the container here is I'm not firing up a new VM so I'm not making a new copy of the OS I'm not making a new copy of the memory I could have many containers on the same exact VM just in case you're new to this so an image is really a read-only template alright this is something we're gonna be looking at here whereas a container is like taking that template and then the way I explained is you have that layered cake and you add a little bit of frosting on top and it's this readable writable layer they call it but the way it works is somebody writes a docker file which we're gonna be talking about it a little more detail today and then we're gonna run it through a build process so you might write a docker file here for say nginx as an example and then in that doctor file you might say hey copy in the disk folder into this image that we're gonna make and then when that runs it's like a shipping container you know think of the the ship I showed earlier and that's gonna ship it over to whatever environment you want and it's pretty easy to do if you haven't done it so we'll create a doctor image out of that now of course the image then we have to push it somewhere we'll talk about that a little bit later here so here's kind of the steps then if you're really new to this number one you have to install doctor seee as I've already mentioned optionally create a docker file now I could run angular with just the engine X image that engine X actually provides the problem will be out of the box like if somebody refreshes if you have a angular Route up in the URL engine X you need to put a little redirect in there otherwise it's gonna try to go to a server side route you know it doesn't work you get a 404 so while there kind of stock image does work you're gonna find that you'll at least want to copy a configuration file if it was like Engine X H a proxy whatever it may be into the image and the container so that you can handle this redirect for angular so we'll kind of talk about that coming up and then from there you just run some docker commands or there's even if you have vs code or even some other tools there's a doctor extension which I'll show you a little bit of that today and it's pretty awesome you can literally right click and go you know look mom no command line and it can just push and build and run and all kinds of fun stuff all right so here's kind of one of the the first little things you can do if I wanted to run with Engine X and again this is certainly not the only option then I could pull this down if I had doctor C II installed and what this would do is pull this kind of layered file system down get it on my laptop for example and then we're pretty much ready to go now to run it we can go in and do something like this now what this is doing here is saying hey docker I want to run engine X I'll punt a very small image the dash D is I want to run it in detached mode by default when you kind of hit in or if you don't do dash D to lock up your console and then you know you'd have to like control C or something to get out command no control and depends on your operating system the dash P is if we're gonna call this what are we calling it on what's the port so we're gonna say externally it's gonna be 8080 now probably this will be 80 it'd be 80 or 8080 in this example then we're going to forward it to 80 which is the internal so the way I had envisioned this I'm a very visual thinker think of a container up here on the stage and on the outside of the container there's like a phone hanging on the wall and the number to call to that phone is 8080 but then when you call there's a line that goes inside of now I'm stepping inside of the container and that is easy so they're kind of forwarding the call to another number so external port internal port and that kind of shows right here and then that's your image that you want to pull all right so pretty easy you just setting up some ports that you want to run here so this one I demoed this yesterday but let me go ahead and we'll take a little more time on this so on this let me actually just open up a command here and first off I'm just gonna do docker and you can do like help and then before you all leave today I need you to memorize this so get on it it's actually not that bad honestly it's not there's there's a handful of these actually use everyday and then there's most of them I have to go look up I don't use them that much alright so we could do this dr. pol engine x alpine now real quick where is it pulling from well by default it's pulling from it's called hub docker calm dr. hub and dr. hub is where they host all the images but if you had an internal repository in your company then you could host it there you could host on AWS as your Google Cloud whatever they all have repository options so that you can host these so I would do Paul I'm gonna go ahead and assume it probably hasn't changed much yeah and it hasn't since I ran at about two hours ago and so now what it would do normally is you you know there'll be a little pause while it downloads it and then you would have it okay so now to run it we can do run and then if I want to detach it we say dash D give it the port will do the 80 82 80 here and then nginx help I'm entering all right now that's the detached see how the console came back and now I can do something and I don't kind of kill it by doing control C all right so now if I do docker PS well I can just do that it'll show me but normally I do if you want to see all your containers docker PS - eh all right so they gave it this lovely Gallants goodall alias you could use that but you'll see on the left 5 - 2 e1 to see that up there that's the container ID so if I want to stop the container I could say docker stop and then you just take because I only have a one container hit you can just take like the beginning of it and I could stop it but let's before I stop it let's go ahead and let it run and let's come back let me get into another browser here we'll do localhost 8080 and there we go so that's engine X and it literally is that easy now you might go I don't know nginx that's what's so cool about this now I'm not gonna advise you use a server you know nothing about of course you know hey let's use this I know nothing about it but really all that would be involved after this is there's gonna be a config file you'll want to you'll want to copy into your container you might have some SSL certificates this typically will sit on the front of your app but again it's not the only option H a proxy is another good one for this but it's called a reverse proxy what it'll do is it'll handle static files any dynamic requests that it can't handle it will forward to what's called an upstream node like no js' or.net or java or something like that alright pretty cool so if we go back to here that's working but let's say our I'm done with it so doctor stop then five two to enter now if I do dr. PS see how nothing's showing because the container is not running so let's do docker PS - a and now there it is but notice it kind of wraps but over here on the right says exited eight seconds ago okay so the container I can remove it by saying docker RM 5 - - and now it's clear that dr. PS - a boom all gone pretty cool now here's what's really cool though how many have installed something even with even if you have a Mac with like grew or chocolaty or something like that you know I'm one of your systems and you uninstall it but it leaves stuff behind right well I need this image so I'm not gonna do this but if I go to docker images let's find this guy right there third one down let me go back alright third one down scroll over to the the right here 18 Meg that's how big the image is so pretty dang small and now I could do this well I mean I didn't grab the ID did I so if we if you look there third one down looks like EBE - or something like that okay so let's go ahead now and I could say docker remove image RMI and that could do EBE - I'm not gonna do that cuz I need it for later demos it would literally be as if I never had that on my system now there will be zero junk left behind that's one of my favorite features right there because you know how that is where you get all those junk folders and config files alright so that's kind of the real basics so now as a review nothing's now running at all and this will be a little more obvious because if i refresh yeah looks like it's now down there's no web server now let's imagine which I'm gonna do in a moment that we actually put angular into this now we could have angular serving this up or I'm sorry nginx serving up angular alright so moving on here let's continue onward and upward so how would you run angular then on a real server like you've done ng serve which I love and then you're like hey it works I'm good to go but I actually want to run it for real on whatever your choice is okay now when it comes to servers you know there's no shortage but we definitely can't use that now I left this in here is anyone ever typed ng server is anyone like me for whatever reason you cannot type serve that works did anyone ever notice this I don't know how long it'll keep working but Angie server actually works I just wanted to show you that it because it looks like whoa you got a typo yeah technically it is a typo but it works so I'm hoping that they keep that cuz I don't know I've like a mental block or something I just can't type serve so how are you running your angular in production some of you are probably using Apache maybe is maybe in genetics H a proxy Tomcat node you know who knows but are you able to do it in a way that's always the same so in other words if I move between my environments how confident are you that nobody screwed up your version your patches your environment variables whatever you use them and for some of you you're like yeah we're pretty confident and some of you're going yeah and last night I got a call actually and you know I had to fix this so there's a lot of server options I'm just gonna quickly go you know through this you've all seen these types of things and there's many many options again my preference is engine X just because it's a very fast reverse proxy static file type server so what if we want to get angular running well one way to do this is we make a custom docker file and what we do with the docker file then is we cut in the dockerfile instructions we copy in the dist folder into the image that adds it to this chocolate cake so imagine at the top of the chocolate cake layer if that's my code if everything under is like the engine X instructions and you know environment variables stuff like that I might need okay then we build it to make an image now we take the image and then we're gonna run it now here's the deal though how fun is that where you just did a new ng built and new dist folder gets created and then you go wait a sec Mike and caner already has the old codes so you're so seriously I gotta like rerun and rebuild the container I mean that would get old really fast right you don't want to build and then rebuild the container and then run it and so what we can do locally in this example anyway is we can do the same thing I showed earlier here but see that - V now I mention this for about probably five seconds yesterday in the short talk but let's go through this real quick this sets up what's called a volume and you can also do other things there's another one called a binding bind but a volume what it's doing is this folder on the right us our share engine XHTML that's by default the folder that engine X or let's say it's your server let's say you're using Apache and whatever folder is the default where your angular code goes alright that would be that folder on the right okay that's the default for nginx now the one on the left of the coulomb there that's my dist folder now what's up with the dollar PWD for those who haven't seen that well that's my working directory in other words if I'm running this from a specific directory I want to link from the container back to my local hard drive now if I do an NG build guess what happens it's almost like I you know imagine a big container again up here on stage it's almost like I punched a hole in the container and put a little I don't know a hose or something that connects inside of the container out to your local hard drive alright and that's what you're doing now a little word to the wise on this anyone know what happens every time you run ng build to the dist folder it deletes it yes and guess what that does to your container volumes it's like somebody goes in with some cutters and chops that hose it breaks it so is anyone ever used the delete output path D it's - DOP and we never seen this I'm guessing some of you have but probably a lot of your going new never heard of that one so when you do I won't run it because I'm not in the right folder but if I do an NG build there's a - DOP delete output path false now what that will do is now when we build instead of deleting the dist folder every time it'll keep it so now my volume doesn't break my connection to the Container doesn't break and then every time we build it just updates the files instead of deleting the folder if you don't know that one and I might have not known that one when I first started this then there you go that's what you would kind of do and now I'll show you a little demo of this in just a sec here so in fact let's do that right now so let's come on in I have a really simple project I showed yesterday this is just a kind of a really basic CLI project but let's say I want to kind of containerize this we'll get back to this guy in just a sec so let me go a little up there alright and to run this what do we do well you're all experts at this now we could say docker run all right so dr. run - D - P I don't know we could do a T this time if you want 84 words - 80 and then you have this lovely syntax here so we want to go from dollar PWD now this depends if I have a blog post on this if your wanted depends on like what version of Windows you're running are you on Mac on what you use here can depend on your OS just as a heads up this is what works great on my Mac okay and then we have the path I can never remember so how about we just do this because I know you'd all love to see me fail on the demo because let's face it there's nothing more fun than that you're like how is he going to solve this one and then what do we do well we say engine x alpine all right so let me zoom that really quick here so same exact thing you saw on the slide well it better be same once any typos there I'm counting on you do you which one sorry one more time Alpine oh it might be rapping it's rapping we're good but good catch good catch so all right yeah it's like I'll pin so now I'm gonna hit enter here now what this is gonna do is let me do an LS and we'll see all our folders and notice I have kind of on the bottom left there a dist folder right now so I've already built now just as a heads up though if you build again you're gonna wreck your whole volume here it's gonna break that hose connection from the container so I'm not gonna do that we're gonna assume it's okay so now that I have that I literally have nginx running let's go now I think we ran it on a tee right okay that's cached actually got a love cache that'll be a micro service one I'm going to run at the end and what did i do what did i do oh yeah thank you thank you the problem yes thank you the customers now here's this I didn't mean to show this well actually you know what I meant to show this to illustrate a point yeah thanks for catching that what's happening here is remember I used the default nginx container in image well they don't know about server side routes at all so it's just going I don't know what to do now if this one doesn't work I got another problem but and it's not working are you kidding me yeah let's go see what's going on here all right so now we debug and if it's not a quick one I'll show you a better demo anyway but let me CD into the dist let me do an LS ah minor detail my dist is empty so okay now so here's what we're gonna have to do this will be a little debug exercise live you gotta love it if I do docker PS tache there's my container for 5d so first off how do I stop it just yell it out oh yeah there you go let's character genius I know Eric from another thing we did but yeah let's go back up yeah let's do dr build - DOP delete output path false now we're gonna hope because I haven't actually tried doing this backwards like I'm doing right now but we're gonna hope that it builds us up and we get our code here so why did we get that forbidden well because it went I don't even see anything I can run in here and so it kind of aired out all right so now let me just CD into dist and let's LS alright that looks a little better maybe huh okay now hopefully that left the folder alone if not I am gonna have to come back and stop and restart it but there it is it still says it's running notice up on the top right 84 words 280 see that right there perfect that's what I want so now let's come back to localhost oh there we go perfect give Erika applause for his thoughts what's that oh jeez and I be calling Eric Eric and Eric is actually Chris sorry there's another guy named Eric I just talked to you so Kyle is still Kyle right I know some of these guys on the front row all right well that'll be forever ingrained in video so your your now famous Eric Chris all right now this is just a really simple app nothing real fancy here but this is running in the actual container now I don't have time to change anything here because we got a bunch more I want to cover this is just the basics but if I were to change this and rebuild with that dop option false what's gonna happen when i refresh boom I pick up the changes but this is engine X this is not an G serve obviously okay so that's kind of cool so let's go in and let's stop this guy because I'm gonna need that port a little bit later so I'm gonna stop four or five D all right perfect now as a heads up the volumes kind of stick around so when you do like a stop and remove you can actually say remove the volumes I'm not gonna show that but you could and we'll do docker remove our m4 or 5d alright and anytime you see the ID kind of echoed back you're like that's a good thing so okay so that's kind of stage one is you can run your local code in a container and by the way this works for Java this works for node this works for dotnet this works for everything this isn't just for angular it's pretty cool so let's go on back continue onward and upward here so that's kind of the fundamentals of getting started with this now remember how whoever caught the / customers good well it was Chris you know good job there because what happened was I didn't have this config file copied and if I did this this is how we could copy the code in but even doing that isn't gonna help us when they have like slat a route you know any angular route and the reason for that is again the server gets it first and how many have had to program your back-end to automatically redirect back to your like index.html pretty normal right so I'll show you an example here in a moment of how we do that but this is an example of a docker file from nginx alpine and a little hint here I didn't put a version so anyone know what it grabs latest that's a great idea right probably not so you can put a coal in there after the Alpine and you could say like I don't even know what the latest version is but let's say it was 1.0 you could put 1.0 0.0 or something like that just as a heads-up you always have to put who to blame so that that's a required one no it's not required but you should put it and then what we're doing here is now I don't want to run the container and have that hose going out to my local code I actually want to copy the dist folder into this us our share engine X HTML now if I were to build this which I'm going to show you that process in a moment here then I could push this up to docker hub you could pull it down and literally within as fast as the network was to pull it down you could be running the exact same app with engine X on your laptop pretty cool now here's how you build so the way this works is you're gonna set up a repository so mine is just Dan Hwa leaned up on doctor hub or AWS or Azure or whatever it may be you're then going to name the image that you want to make in this case I just call the ng app and you're gonna give it a tag you don't have to tag it but you should with a version because then you can actually you literally could run version 1 version 1.1 version 1.2 at the same time I don't know why you would but you hood in production which is actually kind of cool or you can roll back easier as well okay then to run it we do the exact same thing but no volume this time because the code is in the container now as we copied it and now I have my same exact thing I'm running with that tag there alright now one thing I didn't mention see that dot on the very end of this build that's where does it look for the docker file so I'm saying look in the local folder where I'm running this command that's what the dot means it's the context they call it alright so how do we do that well so you could type this if you wanted and you just saw that but you know you don't you really don't have to type it so if I go to my extensions in vs code here see if I can shrink this down a little bit somewhere down in here there we go I have the dr. extension 4 vs code this is like the coolest thing pretty much since sliced bread because if you don't want to type all that and remember and you know for all your builds and you're runs and everything this will actually let you do it very easy so let me show you here I have two docker files here's the one that you just saw that doesn't copy in the code but it does copy a configuration file now this config I'm copying in this handles the redirect and a few other things like caching headers and stuff like that okay so I'm just copying a config file from a local folder into this engine X location now again ignore that part if you don't run engine X it would be you know copy your config obviously into your folder now when I do that though I'm not copying the code so now I'd have to set up a volume right but let's say we wanted to do that we want to run this custom image so at least the redirects would work and we set up the volume how would I build this well the normal way is it's called job security you type it and then you got to remember like a shoot what was the command and how do I do it or you could do this okay first off I can get into the palette here of commands shift command or shift control P and I could just type docker now this is all the stuff you can do here I don't know if the back row can see that let me zoom that just a little bit but I don't know that might look interesting and look what it does it says oh hey Dan do you have to docker files which one do you want to build and then I simply pick that and then here's the tag now latest maybe or maybe not as a good idea normally I like to tag it with a version and then I would simply hit enter okay now I already have an image for this so I'm not gonna mess it up I'm not gonna be that risky today but that's how easy would be now obviously I'm going to show you another one here which is this guy in just a little bit this is called a multi-stage docker file and I could do the same thing shift command P go to doctor build image and I could pick the prod version now this one actually copies of the code in alright pretty cool so we're gonna get back to this one in just a sec here but that's how easy it would be we're an angular but also to kind of build a custom image that would handle things so let's talk more about this whole build process then what if what if you just want to setup a CI CD type process that actually uses containers because if you do it like most people do it somebody has an actual server that has whatever your build well in this case would be note obviously for angular and it turns out somebody updated they thought it was a great idea to go to 9 dot X and it turns out we'll pretend that 9 dot X broke something not saying it would but it happens and how many have this problem right now where your environments somebody else controls it and they update it and next thing next morning you're like why did the build process stopped and then Oh Chris messed it up yeah so well no we probably should say Erik messed it up that's right that's right so we can actually use containers for any build process we could even use containers for testing processes which is very very cool because what do you do with you when you're done with the containers delete them no big deal in fact you could fire up all kinds of containers once you're done delete them no harm no foul you can even run different versions if you wanted you know maybe on Sundays you like to just experiment whereas on Tuesdays you like to do something else I don't know all right so what they have in doctors are this is a newer concept it's very cool though it's called multistage doctor files it's the same thing we saw before what you're gonna do those in the dockerfile you'll actually have multiple images that get built and containers that actually run so the way it works is you could have a node image that actually does the build but then the output from that which would be the distal derp could then be copied over to like an engine X or an H a proxy or whatever you guys like to use for your actual runtime production or staging container very cool so the way this works is actually pretty easy now if you're new to these honestly this is stuff this project in fact I'll have a link to it and there's a little bit I would change here I tried to simplify it a little bit but here's kind of what we can do this is gonna go grab the latest node now again I kept it simple just because versions change a lot you probably want to put like eight dots what is the list eight nine eleven something for node here so instead of latest you can actually put 8.11 dot you know like zero or something but I'm gonna go ahead and leave it now what I'm gonna do is I'm going to set up a working directory in the container I'm gonna call it app you can call it whatever you want okay I'm gonna copy the local code which is pretty much everything you see over here into this dot here is really like doing slash app just didn't want to repeat it I'm gonna run npm install okay now i hard-coded prod here as you can see the for the environment you can pass in variables though build arguments they call them so that you can make this dynamic so for staging you could pass in an argument for staging or dev or prod or whatever it is bottom line we get a dist folder now that's only in that one container but see how I a Lia stat right here as note well now notice stage two is I'm gonna say all right let's now make another image for Linux ok Alpine and engine X I'm gonna set up a volume this is just for some caching for runtime ignore that one but see the copy right there see that from note well node is the same as this guy it's like an alias so now I'm going to say hey copy from app dist into and then you've already seen this folder so really what we're doing then is we have a bigger container that does the build process because this one will be way bigger this top one but the output of that then gets copied into this bottom container how cool is that I think it's cool and then we copy in the config file here ok and you can see it's just not that much code now you'll probably tweak this I'm fact I can guarantee you well but at least it will give you a starting point for learning this now how will rebuild then well we again the easiest way is do this you know I've already selected this docker build right here and you've already seen that I can do this now again I've already built this one so I'm gonna leave it but let me show you the final version of what this generates so down in the bottom of this code I have this little docker thing this is my docker extension and if we open this it is awesomesauce ok you'll notice here's all my images very cool in fact I can even right-click and if I want to push this image up to my repository I can do that just right click not bad I can remove it I can run it I can run it interactive I can tag it maybe I didn't name it right maybe I didn't give it the right version this is pretty cool this just pops up a little dialog and then you just change it it'll retag it we give it a different version for example so now if we wanted to run one of these versions these two are the same one is for doctor hub no that's my doctor hub ID this was one I just built locally but I could just right click and run it you've already seen this so I'm gonna skip this part and then we would be off and running but the code is now in the container right the the engine X that would actually run very very cool or I can even do it up here we could say you know go into the ship command P do docker run and then you can pick which image to run there I'm not gonna run that in the interest of time okay that's pretty cool and keep in mind again we're focus on angular you can do this with anything you could build your Java apps your net apps your whatever apps Python you name it you can do this process now the next thing that I like about this is if you're only working on the angular part of the app which some of you probably are then I'd say more power to you it's less headache but how many are actually working on not only the angular app but some back-end services as well I'm guessing most of it yeah a lot of you so you'd kind of doing the full stack you know development well how do you get an entire environment up and running to test it out as if it was real what's that pray okay that's a valid option there it's like please work what happens when tomorrow they decide for production that a new version of the server for one of these services is gonna be used and if you've installed that service locally like installed it for real what's the fun there I think we all know the answer you hope that you can easily upgrade to the next version right well with containers and images we don't care I can easily change to the latest image maybe a DevOps team actually provides the base image that we use and then I just work with that we're good to go so for this I showed this yesterday but I showed it in probably about two seconds we might have you know we'll say these are micro services right behind the scenes where actually each microservice has its own database kind of a true microservice architecture and we might have a mobile app and our angular app and web apps and all that calling into this and that's only you what one two three four or five six seven eight assuming your databases were also containers which they could be by the way plus some over here plus you probably have a gateway and I mean but we're up to over ten already yeah good luck getting that going locally where it runs like staging and production right you could do it but man is it painful so for those new to micro services the idea is it's kind of like a car these days where you know can you imagine if they actually welded the wipers on and every time you got to change them you have to get out the torch that'd be bad we won't be able to swap out things so with microservices it's kind of like this idea where every little part of the app sometimes people go really small really granular could be a micro service now this isn't a microservices talk but some of you are doing it I know so I just wanted to kind of point this out now whether you're doing micro service this one's a little more traditional where you just have a back-end database and maybe a Redis cache or something you know you have services somewhere because we gotta and maybe they update the database maybe they integrate with Redis you know how easy is it to get all those services running not only on your laptop but consistently across any server you have how easy is it to move to the cloud if you're doing cloud and I'm gonna argue not as easy as it could be if you're doing it manually all right so what do we do in this case though cuz you saw me have to do docker run or have to right-click on each container or image and be painful right so we can orchestrate all this process here using something called docker compose which I'm gonna kind of wrap up with here and this would be for those of you that you know you're not just doing the angular app but you also have all these services and fun stuff that you want to do so docker compose file takes other images you have out there and is like the conductor of an orchestra says alright image one fire up image to fire up and it orchestrates bringing up a whole bunch or even just maybe two containers and then you can run those images convert them to running containers now I'm just gonna go through this part really quick this is kind of what it looks like so you have these services this is a yamo file if you like spacing and stuff you'll love yamo files if you don't you won't like them but they're not too bad engine X is going to be one of my services okay that's probably my angular app right and I have a ninja next dockerfile all right now it's in a network you can actually create a network so components can talk to each other in the same network that way if I have container I said component its angular this week so excuse me I containers what I meant to say if you have a container that's out there that is not part of this app I probably don't want to have it communicate with the others so it would be in a different network there's all kinds of fun security things you can do now here's a Postgres image this one is using a custom docker file when we build this one is saying just use the standard Postgres sequel image that's out there and then we can create this thing called a network now there's a lot more to this we won't have time to go into it but what you can do then is say docker compose build in the location where that yam will file is if you add 50 services that automatically builds all those you don't have to do docker billdocker billdocker build 50 times you do this one command it's awesome then how do I bring up all these containers well I'm going to show you that next doctor compose up okay and then finally you live long and prosper and everybody's happy so how do we do this well first thing I'm gonna do cuz yesterday I realized as I was doing my one taco oh shoot I didn't stop the the container okay so notice nothing up my sleeves here nothing's running it looks like on the containers so I'm not gonna have a port 80 issue now I'm gonna go to a different project this is the llamo file now there's quite a bit there's I believe six containers in this one we have engine X with angular calling nodejs Colleen we have asp net core we have Postgres and this thing called sea advisor see advisor is a kind of easy way to monitor containers so I've already done the build on this just to save time because the build depend on what you're building it can take a few minutes Oh Thank You Siri I'm not right now we'll talk after so I'm gonna come in and do dr. compose build and I would hit enter now I've already done that to save time and I'm gonna say up now what this does hello and by the way than this if you do come into here you can also do some stuff in here with dr. Campos up and down see that pretty cool but I'm used to type in it alright now this is gonna seed the database it's actually working with some volumes pointing to my local code right now so right now I can change the angular app the.net app the node app all that locally and it will update in the containers because I have volumes now this will take just a little bit more time so I'm going to go ahead and wrap up with the final topic and we're gonna come back and try to run it and we'll get you out of here as I am right now it's 5:20 so alright so how do you deploy these between environments then whether it's on-site or you want to move them up to docker hub or Azure AWS or whatever you use you know what would you do well I won't have time to demo the whole concept because my time is out but here's what you would do you would push the image or images up to your repository now those using a cloud repository they'll have a specific URL and login and stuff for you so that you can push those now those that are just want to go local you can have a local repository for your images that's what a lot of companies do that I haven't moved to the cloud yet and that way it tracks all the versions and all that fun stuff now once you push you're ready to go now I use Azure that's just where I host all my stuff this is an example of something called web app for containers here's how easy it would be to get one of these angular containers going so you would give the app a name you create what's called a resource group which is just a group to organize everything it's like a bucket and then in the configure container I can point to ECR I could point to a private registry or I just did docker hub and then this Dan Hualien ng app would be my image and then of course if there was a version on that which normally there is you would say : 1.0 point O or whatever you would then hit that button create down the bottom and give it about 45 to 60 seconds and boom that container would now be up in the cloud now here's what's so cool about that how reliant am I now on the cloud dictating the version I am NOT I control the version I control everything about the process so if you are a control freak and let's face it we all are in our world then this is pretty cool because you don't have to wait for your cloud provider or even even your local dev ops if you can get them to use containers you don't have to wait for them to give you the proper version all right now last thing I'm going to show and then I'll get off here so we can let the next folks come up is let's go back I hope this worked let's see here all right perfect so it looks like it inserts some sample data and now it's listening this is one of the micro services on port 5000 but port 80 is my nginx alright and there we go so this is now the kind of micro service app it's an angular app in engine X calling node and dotnet calling different containerized databases and so we and then we also even have well here I'll show you real quick it does actually work you can go in and do updates and deletes and all that fun stuff as you can see there this is another cool thing when I'm done screwing up the database I just bring down the containers it's as if it never happened in this case because I'm not setting up volumes or anything now I can also go in and go to port what is it 8080 I believe and this will actually now show me some stats on my cores that are being used my memory all kinds of fun stuff here for each of the containers how cool is that and that's just a free option all right so there's a lot more we could cover but we're gonna wrap up with that so let me give you a little resource here if you're interested I run a bunch of Flipboard magazines and one of them is on docker and kubernetes we didn't have time to go into kubernetes but there you go and then also there's an angular one so pretty much every time I find an awesome article some of you probably written some awesome articles that are in there I suspect that I put it into here so if you're interested I mean go to the link there and then if you're interested there's a newsletter as well with that thanks so much for your time here's the link where you can get all there's links at the end for all the code everything I showed and thanks for coming [Applause] you

Channel: ng-conf

Views: 19,145

Keywords:

Id: cLT7eUWKZpg

Length: 53min 49sec (3229 seconds)

Published: Thu Apr 19 2018