NodeJS Debugging in Docker

[Music] what is up youtube welcome to another video now for those who know me i run everything on my linux machine inside of docker container that is my browser my email my editor everything related to my development environment inside of containers the only thing that i have installed on my host is a terminal and docker now on windows i do a slightly similar thing where i keep all my development environments inside of containers so dot net c-sharp python golang and node.js i don't have any of that installed on my machine i use docker as my development environment to keep my dev environment the same as production now when i do this the most common question i get asked is how do you debug code inside of your container and how do you make sure every time you change code on your local machine it automatically reflects inside of the container so in this video i'm going to show you some simple steps in a few minutes of how to debug node.js code inside of docker containers all the source codes on github so you can follow along without further ado let's go so this is the docker development youtube series all the source code in here is on github so check the links down below and make sure you like and subscribe and follow along okay so in this github repo i have a folder called node.js and everything that you that we're doing in this video is in here so we're going to be interested in this node.js folder now i like to keep my source code separate to my deployment scripts and separate to my docker file that is because i like to keep this repo very simple so new developers can find really easy to navigate the source code so i have this src file for my source code everything source related is in here i'm sure you're familiar with node.js we have a package.json and i have no dependencies other than just the web server i use express and then in server.js i basically just start up a web server so it's a hello world application i say port 5000 i i say startup express and here we tell it to listen on that host and port and if a user arrives at um this path which is the home page of the website they'll just get a hello world message so very simple hello world application so now i also have this docker file here now before i get into the details of that the dockerfile is basically used to take all our dependencies node.js included and pack it inside of a container image because i don't like to have node.js installed on my machine i don't like to have multiple versions of node.js run lying around so i like to keep it my development environment inside containers and matching my production environment so if you take a look at the docker file we start with node 12.4 so i can have 12.4 for this microservice and i can have node 13 for some other application it doesn't really matter it keeps it simple now i just want to show you how to get this up and running really quick so to get it up and running to get it built i have this docker compose file now i've just collapsed all these other services because they're for other videos but for this video we have node.js and what i'm doing here is i'm just giving the image a name i'm giving the container a name and i'm telling the docker where to find my source code and docker file so the context is set to the node.js folder which is this folder over here i also tell docker that i want to use target debug now this is where it gets interesting because in docker you can define multiple stages or targets and i don't want my debugger to end up inside of my production image so what i do is i'm going to i define a target called debug and then i have a different target called prod that allows me to use the same docker file where both of them are identical the only difference is one of them one has a different target where the debugger lives and we'll take a look at that in a second so i also define a volume and this is where i basically tell docker to mount the local source code which is the source folder into the container inside of a working directory so that allows me to do all of the debugging and and like work on my local machine but mounting it into the container so i'm basically doing remote development and i don't have to have node.js installed locally i also have a port now because our application is exposing port 5000 inside of the container i don't want ports to conflict because i have multiple other things running on my machine so i'm just going to map it to port 5002 now to build this i just say docker compose build node.js so very simple for you to get this up and running and once that's built we can run it by saying docker compose up node.js and that'll go ahead and start it in debug mode so it's starting with the debug target of this container image so once that is up and running you can see we have the browser open localhost 5002 and that means 5002 is mapped to 5000 inside of the container so we can see our service is up and running and working [Music] so how do i add a debugger to the image well it's very simple if we take a look at this docker file i mentioned that i have multiple stages so you can see we have two stages one defined over here from node 12.4 as debug and then we have from node 12.4 as prod that means we're building two separate layers two separate targets in this image so this is one target and this is the other target and what we do is we create a working directory called work we copy in our package.json then we do npm install and we're taking advantage of docker's cache so we don't want to build this image multiple times um when the source code changes we only want to build it when the package.json changes so i copy the package.json in first do npm install and this is the magic i add i do another npm install here for nodemon nodemon is basically just a node.js tool it has a lot of features it allows us to one add a debugger and the other feature is there's auto reloading of code so it's automatically when we change code on our machine it's automatically going to restart our node.js express application so what we have here is then we copy in the rest of the source code and then we start up our application using nodemon so we say nodemon inspect so this is basically telling it to enable the debugger and then which file to run so we say server.js so this is all we need for the debugger to work so if we then take a look at the the remaining part of the docker file which is the production stage um it's no it's not it's not really different the only difference is we don't install nodemon we just do we create a working directory we copy package.json we do npm install we copy the remaining a bit of the source code and then we say we start this command say node. so just start up our node application that means when we build this as target debug we're going to get a docker container with a debugger if we build it with a target prod we're going to get a docker container without a debugger [Music] so now that we have a debugger inside of our container how do we get debugging to work so firstly we're going to need an extension so you're going to want to head over to extensions and then search for docker and you're going to want to get the docker extension by microsoft and once you've installed this this will give you access to the docker icon over here which gives you a bunch of features like managing containers images registries networks and volumes we're not going to cover this in this video but the main feature i wanted to show you was if you press ctrl shift p and you type debug open launch.json and the debugger is going to need this file called launch.json and when you click that you'll see a docker node.js you're going to want to go ahead and click docker node.js and just click any folder that's fine and what it does is it creates under your repository it creates a vs code folder and a launch.json file in here now it generates this one on the fly now if you look at the github repo you'll see i have multiple entries um so you can see here there's like one entry over here if you look at the one on github that i'll check in um it has multiple entries i have a copy of that one which i'll open up on the side here and you can see that there's a bunch of things now the firstly there's a name uh docker attached to node that's then the name you'll see when you wanna add a debugger type is node for node.js we do the attach request meaning we're going to attach the debugger to the remote container now we want to change a couple of things up so we have remote route that is where's the code inside of the container now because in our docker file if we take a look we've made our working directory slash work so our source code is going to be inside slash works source so in the remote route you're going to want to go ahead and change the sky so we know the code is over there right then the next bit we're going to do is give it a port number so the port to listen on if you look at the docker compose file you'll see that i've exposed that port already that's the debug port so with that there the other thing is we're gonna give it an address localhost so that is where to find it from our host it's gonna be easy just call localhost and where is the code on our machine we have to tell the debugger the code locally exists in the workspace folder under node.js source so that's this folder over here then the other bit i need to to tell it is what protocol to use inspector that's because we're using nodemon inspect and the other cool feature is restart equals true so if any code changes um the nodemon will restart our application automatically so these are the bits and pieces you're going to need in the launch.json file so with the application up and running here you're going to want to go ahead and click on server.js add a couple of breakpoints so i'm going to add one right here where i return the hello world message then you're going to want to click on the debugger and click the docker attached to node that's the one that's in our json launch.json file hit the play button that's going to go ahead and attach the debugger to the container so you can also check the debug console make sure everything is running everything is healthy all looks good and then when i go to localhost 5002 and hit enter you can see that my breakpoint has been hit so if i hover over like this for example i can start debugging i can start having a look at the object it also gives me this panel on the left hand side where you can like inspect stuff so this is the debugger in a nutshell so now you can see we can debug code remotely inside of a container if i go ahead and press play can step over i can hit continue and one cool thing i want to show you is i can put a message in here running version two now watch what happens if i remove the break point and i save that file the node mod is automatically going to restart the web server if i refresh this application i can go ahead and look at the logs and i can see running version 2 if i go ahead and change my code to version three hit save running version three so this is really cool so i don't have to go to like out of inside the container go out of the container do docker build again to build a new image i can work as if i have no js installed on my computer meanwhile it's all installed in a container i don't have to worry about managing different versions and dependencies and it's kind of like like for like with my production system so if you're a node.js developer and you're learning about docker and kubernetes be sure to check out my link down below to my xero to kubernetes guide with no [Music] js

Channel: That DevOps Guy

Views: 12,241

Keywords: docker, kubernetes, node, nodejs, javascript, deno, js, reactjs, react, framework, angular, vuejs, vue, frontend, front-end, dev, developer, coding, code, vscode, visualstudio, debugging, debug, containers, programming, webdeveloper, web, tutorial, guides

Id: ktvgr9VZ4dc

Length: 12min 38sec (758 seconds)

Published: Tue Jun 09 2020