VSCode Remote Development and Docker

hi and uh welcome to my vs code remote development course what you can expect from this video we will handle four parts first of all we will set up a virtual machine for remote development then we will see how vs code assists us at connecting to a remote server we will then explore the vs code Docker uh extension and how we can use it to develop under Docker and in the end of this video we will combine what we learned until that point and we will remotely connect to a Docker image with vs code you can use the timestamps inside the video to go to your preferred part this being said let's get to work in this lecture we will configure a Linux virtual machine for SSH access before you know we need to do this before uh getting a vs code remote access and uh I will I already have an installed VM for this lecture if you don't have it you can uh simply uh go to the resources of this lecture and see how you can install a Linux VM it is very easy you can do it in 10 minutes but once this um VM is installed I will start a terminal but before doing that I will show you an important setting from virtual box so so this is my VM and I use this VM for my development and also for the course but in order to for it to be accessible V SSH access we need to go to its settings at make and make sure that at Network the network type it's ATT the adapter type it's type bridged adapter this is the important setting not an Nat not the other ones you need to have this as bridged adapter and uh with this settings in with this setting you will make available this VM to your local network it will be like another computer from your local network this is what this setting does all right let me close this now and uh let's focus on this VM I will start a terminal right here so first of all we need to install an open SSH server we can do this with the command sud sudo app get install open SSH server this is the one all right I already have it have it installed but you need this package in order to run SSH now we can simply check the uh connection with by calling SSH Local Host to see if this SSH works and basically this is how it looks you this will show that SSH works on your local machine and uh now let's also check the status of our SSH I can do this with Pudo service SSH status and yes everything everything is all right this means that uh your SSH is working if we see this active running if the service SSH service is uh active this means that at this point we can connect to this machine from other machines and the last important setting that we need or the last important information is the IP of our VM for this I can call IP if config this is the one and I will select the one not the one for I have Docker installed maybe you don't have it so you won't see this but what is important is this one the second entry for me for you it should be the first entry and we need this IET IP right here this is the one this is the IP of uh this machine on my local network so I will need this I will simply copy this text in order for uh me to connect to this machine so now I will open a terminal on my host machine on my Windows machine and now I can simply call SSH and my user my user I can see it from my terminal right here this is my user Alex HD so I didn't create a new user for SSH access usually is a good practice you would create a new user but this would be this is another topic I will simply use my host user right here so my user is Alex HD this is the one so I will call right here SSH Alex HD for me and now I will paste my IP this is the one I will provide my password my users's password so at this point I'm connected to this VM I have a terminal fully working terminal right here through SSH I can list my uh files my documents I can do everything from a command line interface well in the next lecture we will see how we can launch this kind of functionality from vs code and I will be able to view files to edit files to do all kinds of operations directly from my local vs code installation let's do this in the next lecture in this lecture we will explore the remote development extension from vs code and uh for this I'm using my windows vs code and we will connect to uh the a Linux VM I'm starting from an new vs code window right here I don't have any folder opened on a uh regular theme this would be a uh purple bar right here first of all we need the remote extension so for this you can go to extensions and search for remote development this is the one the remote development extension and this is an extension pack you'll see this currently holds for sub or smaller extensions these are the ones right here the uh extension for working with Windows subs tiem for Linux a div Dev containers remote SSH and remote Tunnels for this lecture I will use the remote SSH extension but you can install all of them because we will use them throughout the course so you need this extension to be installed and once you have it installed you will get a button on the lower left part of the screen I will press this button and I will have multiple options regarding remote connections I will select connect to host first of all the one from remote SSH and I will because I don't have any SSH hosts I can add a new one or I can configure them for starting I will add a new SSH host and I will simply put right here the SSH command that we used previously with the SSH command and the username and my address for me this is the one I have the my username and the address of my VM and then I will have to select a configuration file usually I will select the very first entry in this list right here so these files will be the settings will be saved to a configuration file I will save this one right here I will open this config all right and now I'm able to connect it connect to it I can even give it a cool name right here maybe I will say right here my cool VM like this and I will save this file I will close it and now I will go again to settings I will connect to a host and now I have an entry with my cool VM right here this will open a new entry right here I will select this as a Linux connection I will enter my password for my user and now I'm connect connected to my VM I can simply open a folder right here so I will open a folder and I will open the one which I'm currently working on from my work and from this one I will click okay and currently and currently I am exploring my files as I would do it directly inside the host vs code I have all the files right here and I can open them I can edit them I can do whatever I want want so this is the way we can use this vs code extension many times you will use a terminal inside this vs code extension and you will want to do some operations with this well usually you would do your remote host will be a limited resources machine and from time to time because even this vs code connection will take a good part of its memory you will want to uh maybe use a uh swap file if if server memory is limited you can search online how you can use a swap file for uh for Linux and uh and this way this technique will help you to take from the available memory from the hard drive of of the machine and use it as RAM memory and this way will help you this uh way of doing things will help you run maybe multiple connections or more compute intensive operations on your remote VM I will close now this connection and I will open again another vs code window to show you something if again from a vs code window I will go to a remote connections I can now configure my SSH hosts I will open this configuration file and I can add even other options to this configuration one very important option or two very important options are server alive count interval and server alive count Max I will select This Server alive count interval and uh give it a bigger value like uh 60 and maybe server alive count Max I will give it like a 10 or maybe 20 and if I will give this setting to I will give a bigger value to this setting then from timee to time even if the remote connection is uh bad or you have slow speed vs code will take itself more time in order to try to reconnect before giving up these two settings are very important and again will help you while you will do your remote development in this lecture we will install the docker extension we will create a simple Docker file and uh then we will see other ways in which vs code assists us with Docker this uh lecture and the next one has two important uh requirements first of all you need to have Docker installed in your system you can check that with Docker minus minus version inside the terminal I currently have it installed and of course the other important requirement is that you should have very at least a very basic Docker knowledge well this being said we are ready to install our Docker extension so for this I will go to extensions and I will search for Docker this is the extension it comes directly from Microsoft this means that it works great and it has great support I will install it and as soon as I install it I will have a new entry right here on the left bar the docker View and this is a very complex view we will explore it a little inside this lecture but for the moment let's create a simple Docker file and see how vs code assists us with this for the the sake of this uh lecture I've created a very very basic node.js server right here you can do the same with your preferred programming language maybe you can write a server with python your the choice is completely yours this is a very simple server that just return say hello from a dump server like this this is the way my basic application works what I want to do is to dockerize it and for this I will create a new file I will call this Docker file and uh let's explore and let's see how vs code assists at writing Docker files and as you can see already we have some content assist for Docker files it tells us that we should have a from start so here I'll say from and I will select node latest for me you can select whatever you like as you can see it even we even have some Dynamic content assist you know vs code goes to uh the docker Hub and searches for images I will select this node the latest all right then I will do some basic uh Docker stuff usually I uh select the work directory the work directory is usually app then I will copy our source is current directory and our destination is our app directory this is basically Docker standard stuff then I will run and PM install because this is a note package I will expose the 8080 Port because this is what uh we are exposing inside our server and then I will won't use any U port forwarding for this and then we will simply start our Command and uh basically I want to call mpm start this is the way I configured it right here in the package Json this is some internal node command this is the one I want to run on this mpm start command which will execute node and my simple JS file so my starting command is mpm and then start like this I will save this and now I need to build this uh Docker file well I can build it from the command line or I can do another way I can use the docker extension and let's see if I will call the command pallet control shift and P and search for search for Docker you can see how many Docker commands we have at our disposal from vs code that's great and not so great and it is not so great because if you are a beginner and you are trying to learn and you are relying too much on vs code it's not so good on the learning path if you just want to get things done this will be great so in order for us to know what exactly is Docker doing I want to build this image I selected this image right here and then I I will search for Docker images I want to build this image and I will give it a name cool I give it like this and it will be the latest I will press enter And while the image is Building inside the terminal right here we can take the time and this is an important advice what I that I want to give you is to always observe when when you are calling these Docker commands from the command pallet to actually see what Docker is doing and as you can see is calling Docker build from our Docker file like this all right the build is done I will uh close this terminal right here and now if we will go to our Docker view I will refresh this view all right and now I have my image my cool image right here this is the one this is my cool image and I can tweak this view right here to maybe get some more information about my image right here maybe at the description I can maybe add different information I am really concerned about the size of my Docker images this way I see the size right here all right and if I make this a little bigger you'll see that now I see the size of my Docker images right here and also with their ID you can twe this as this view as you like and now if I want to run this image I can right click and uh run interactive to get more information and again you can observe the command that it took it called Docker run with the port 8080 like this and now we are seeing the log right here so this is the way we can basically use this Docker extension of course you can take your time to explore it we can even see the logs and uh we will see in real time the logs that we are getting inside our Docker server let's move on into the next lecture and uh explore the way we can do remote development inside our Docker image so we will combine what we saw inside this section until now in this lecture we will combine what we learned until now and we will remotely connect to our Docker container for this I will go to the command pallet and search for this add Dev container configuration files I can simply search for it left container configuration files this is the one and uh with this we will create a Json file that will configure the way we are connecting remotely I will select the second option from Docker file because I want to open this or to start from a Docker file and what this option will do will create a new Dev container. Json file in a dedicator in a dedicated vs code folder this Dev container well there are all kinds of ways in which we can configure this uh file what we care about because we inside our do Docker file inside our Docker um option we are using a port forwarding option maybe I give it a more meaningful name right here I will say right here cool image like this and I will use this option right here to fold forward the ports because this is the way we configured it before I will save this file and now if we have this Dev container file Json I can go to the command pallet and search for the command reopen in container this is the one from Dev containers reopen in container and now the great thing about this uh connection is that I'm developing directly inside my Docker image this is great for me if I'm learning Docker or if I want to debug something something inside my Docker file let's see if things are working and currently as you can see here I have a terminal directly inside my docker file what can I do I can start my server so I call mpm Run start so or mpm start all right and now I I can see that my server is running right here at local host h80 and if I want to make a request to this for this I can open a new window in a vs code and try to make an HTTP request if for example is from another window I will make an HTTP request to my Docker image I can send this request Quest and I'm getting a response right here and I can even see the logs in real time inside my local terminal from vs code like this so this is the way in which I can basically use this vs code extension to develop inside a Docker image I can take things even to the next level and maybe even run this as a in debug view if I will go to my launch. Json file if I have right here a uh debug configuration I can simply execute my uhu my uh server right here so here I can say SRC server JS and I can debug this just as I would debug a uh file on my local computer I will run this launch right here launch M main file I will run this as in thebug view and now I can even toggle breakpoints right here in my server. file if I put a breakpoint right here and now from some if for somewhere else I will me make a request then my breakpoint will be hit directly inside my Docker container as I said this is great for debugging Docker problems well we saw in this lecture and in this section how we can remotely connect to our do ER images and debug them and do everything we want with this lecture we have finished this uh section about R remote development of course as in the other sections this is just an introduction to how vs code greatly assists you can take your time and explore all the functionality inside vs code for remote development so we have reached to the end of this video course there there's nothing left of me for me to say only that I thank you very much for watching this video I really hope and I'm confident that it will help you in your professional life and uh also I want to say all the things people say at uh the end of YouTube videos like And subscribe and uh comment and so on only if you want if you don't want don't like it's your choice and this big said thank you very much and have a great day

Channel: Concise Developer

Views: 1,186

Keywords:

Id: MJT0HVy3ox0

Length: 22min 23sec (1343 seconds)

Published: Mon Nov 13 2023