Remote Development with VSCode (SSH)

in this video we're going to take a look at how to set up vs code to do remote development and to understand why we would want to do this i'm looking at the general information page for remote development in vs code and they have a bulleted list of the pros of why you might want to do this but long story short what we can do with this is we can use some remote server as like a development server in other words a place where we work on our applications while they're in progress before we're ready to deploy them to like our production server all right this is uh in contrast to how we might have done things previously where maybe we were running the server locally on our computer we're managing all that software instead of doing that we could do it on a remote server and there's lots of benefits we can see from that and they do a good job here outlining those benefits so that's just some quick background of the why let's dig into the how and when it comes to doing this you have a few different options with how you can do your remote development and to see those options i'm going to switch over to vs code let me pull up the extensions and i'm going to search for remote dev and you can see that there's this kind of main extension here this is an extension pack this contains three separate extensions that each represent the different ways you can do remote development so extension one is remote ssh this will allow you to create a remote connection just using the ssh protocol and that's actually the example i'm going to show in this video another option is remote wsl this is something you can do if you want to use the windows subsystem for linux if you're on a windows based operating machine you could use that and then finally the third option is if you're working with like docker containers and you want to remotely connect to them you can use this particular extension but like i said in this example i'm just going to show you kind of the most basic one which is just making a remote connection via ssh so the first step to this is getting this extension installed i mean you can install the entire pack and get all three but for this example we really just need the remote ssh so uh pull that up and uh i've already got it installed on my end on your end you would just click the install button and get that installed and then once it's installed just take note at the very bottom left is the little remote connection icon as this these little double angle brackets i guess you would say and if you click that it'll give you some options of things that you can do before we get into that though we need to talk about the server that we're actually going to be connecting to and for this example what i'm going to do is actually just create a brand new server that we can connect to if you want to follow along i'm going to be creating this server on digitalocean it's just one of many hosting providers out there i'm going to create what's called a virtual private server and the way i'm going to do it i'm already logged into digitalocean so i'm just going to say create and they call their servers droplets so i'm going to choose droplet and then from the options here i'm going to go over to marketplace i'm going to search for limp i'm just choosing the software i want on this server it's going to be set up with the lemp stack so that's going to be linux nginx mysql and php um but really any server would work for remote development it doesn't have to be this particular stack that's just the one i'm going to use in this example then i do have to go through and select a plan so this is just a very basic demo i'll be destroying this after this example so i'm just gonna make it the cheapest plan that they have five bucks a month and then skimming through these other options i'm just gonna leave everything as the default um i am gonna set it up with ssh keys that way i will be able to connect to the server without having to enter a password um whether you if you're following along whether you use ssh keys if you have them you could use them here or you could just set it up with a password and then you can connect using that password but in my case i am going to use my existing ssh keys um and then again leave everything as the default if you want to give it a um an alias name you can do that so i'll just say my server and then we're just looking for the the green button at the bottom to create this droplet and this will provision a new server instance for us so i'll give this a few moments to finish and i'll wait for it to give me my ip address for this server all right excellent that's all done here's the ip address so if i want to pull this up in the browser give it a second it might have not quite propagated yet let me refresh that there we go all right so this is just the default splash page that every new limp server on digitalocean comes with the other thing that i want to test is just that i can make an ssh connection to the server so back in vs code in my terminal pane let's attempt to connect so i'm going to say ssh all of these servers are always set up with the default user called root so we'll connect as that user and i'll paste in my ip address and perfect so i was able to successfully log in didn't have to enter a password because i was using ssh keys so depending on how you set things up it might prompt for a password all right so now that i know that i can establish an ssh connection with the server we want to use the remote development extension to make that connection so coming down to the remote dev icon let's click that and we want to open up our ssh configuration file i could go directly to connect host and give it the information there but what i'm going to do is i'm going to put my host information in the configuration file just so that anytime i want to reconnect to the server that configuration will be saved for me all right so we're going to open that configuration file and then choose the first option it gives you that is probably the main ssh config file on your system so that's the one you want to use so i'm going to choose that and then if you've ever worked in this file before you might have some existing configs as you can see i do in my case in which case what i'm about to have you add you just want to add at the end of the file if you've never worked with this config file before this might be an empty file and that's fine just add it at the top of the file all right now here's what we're going to add here i'm actually going to jump over to the notes so i can grab the configurations for this so skimming down we're setting up a new connection here's what we're looking for all right so this is a host block that we're going to add to this config file so i'm going to copy that and bring that in there and then um i'm going to change it for for my connection here so the first thing i need to do is come up with an alias for this uh and i'm just going to leave it as the default of my server you can change this as you see fit for your needs next we need the hostname this is just going to be the ip address that we want to connect to so let me go back and just copy that from my browser uh then the user and again right now i'm just connecting as the root user ultimately if this was a server i was going to continue to work with i'd want to create a different user and not always access as the root user just because it has admin privileges there's some dangers involved with that but for this example i'm just going to leave it as is next up i have two settings that are going to determine um basically how the context connection is going to be maintained with the server and this is something i'll talk a little bit towards the end there's some optimizations um tips i have in regards to doing remote development and it relates to this so we can come back to that but for now just leave this as part of the block that i give you you don't have to change anything here all right so save your changes and then coming back to the remote dev icon again we're going to click that and this time we're going to say connect to host and we should see that server that we just defined in our config there so click that and it should pop open a new vs code window and the very first time you connect to the server with this extension you'll see it'll go through like a setup process and what it's doing there is it's actually installing a vs code server on your server and that's what really powers the whole remote development process all right so now that i'm connected this window right here this is all dialed into my server right so anything i'm doing here is actually happening on the server for example down here in the terminal window this prompt this is the prompt on the server and if i run a command like list to show the directory contents of where i currently am that is not files or folders that's on my computer this is on the remote server similarly with my file explorer i can start to work with files on my server here so let's say open folder and on this particular server the document root is located at within our var directory so i'll start there go in the var directory then there's a www direct www directory i'm going to open that and i'll go ahead and just open that just so we can see that parent directory alright so you can see that now it's open here on the left and within there we have a single folder called html and then within there that's actually where our default splash page is set all right so this html folder inside of vera ww that's our document root on the server by default and of course depending on the server that you're working with all of these things are going to vary but if you're following along with this example that's where you'll find the default document root all right so here's that index file that um file is what we're seeing here this content here and just to show that and to make our first edit using this extension we're going to do is i'm just going to clear all of that out and just put in a basic html template and just put some content there so i'll say my server example and i'll throw that in h1 on the body of the page as well all right so now when i save these changes and i'm just using my keyboard shortcut for that that's automatically going to make that change happen on the server so now coming back to the server if i refresh it i can see the changes there all right with that you can see what your development experience would look like you would just work in vs code like you would usually the difference is is just that any of the things you're doing are happening on that remote development server now with all that set up before we conclude though there's a few optimizations i want to talk about the first is just some initial configurations you'll note that if you're using something like a theme in vs code you won't see that automatically when you connect to the remote server and you can even see that here so here's my remote dev window and it has the default vs code theme this like gray background where as this other window i have here that's just on my local computer this is using a different theme and the reason that happens is because when we first set up this connection not all of the extensions we have in vs code are going to automatically be installed on the remote server some of them we have to explicitly install to show what i mean let's bring up our extensions and if you scroll through your list of installed extensions you'll see that some of them are grayed out these are the ones that were not automatically installed on your remote server so if these are extensions that you want to use on that server all you have to do is just click the little install button next to them and just to demonstrate this i'm going to find my theme it's this one right here pop and lock so you can see it wasn't installed so i'm just going to go ahead and install it give it a second it's going to set that up on the server and then when it's done it should update my theme and there you go all right so that's one thing you'll want to do anytime you establish a new connection to a server is just go through and check what extensions were not automatically deployed there and make sure that they're set up now just a word of caution if you use a lot of extensions i wouldn't just go and install every single extension because the more extensions you're using the more it can sometimes bog down the remote development experience so just be a little selective there and keep in mind that you can always add extensions later um so if you find that you're missing something that you're used to working with in vs code you can always come back and install it another footnote is a couple of optimizations and things that you can do to make the remote development process run smoother the first is a setting within your remote dev extension that you can make so let me pull up my settings to show you i'm going to go into preferences and settings and i'm going to search for remote dot ssh and i want to find this setting right here for connect timeout by default it's going to be set to 15 seconds i recommend upping that to 60 seconds now what this setting is doing is it's specifying basically how long it should wait when it's attempting to establish a connection with your remote server and ideally that that should happen within 15 seconds but from my experience in using this extension and then working with students using this extension sometimes if you have a slow internet connection it might take longer than those 15 seconds and when it does it kind of gets stuck in this loop of continually trying to reconnect but not having enough time to reconnect and then trying to reconnect so on and so forth so to ease that i just recommend upping this to 60 seconds um similarly if we go back to our ssh config settings so i'm going to click the remote dev icon on the bottom left again go to open ssh config file open that config file i want to highlight these two lines here server alive interval and server live count max what this is going to do is it's going to help maintain your connection to the server so that as you're working and as you're you're making changes you're saving files opening files or whatever it doesn't have to reconnect behind the scenes to the server every time because it's going to maintain that connection for you um basically every 60 seconds if you haven't done anything it's going to like send a ping to the server to keep that connection alive all right so that's another thing that i've just found it makes the process run smoother between that and the connection timeout setting now the final recommendation i have is if you're trying to do remote development on a budget server in other words a server without a lot of resources maybe it's got limited ram i found that that doesn't always go so well because running the vs code server can be a little resource intensive so if that's the case if you're running on a budget server like a really cheap server with low ram and you're running into problems where it's timing out um it's it's not connecting things like that what i recommend trying is enabling something called the swap file and what a swap file will do is it'll basically use the hard drive space on your server as a backup if it runs out of ram memory all right so that's just like a fail safe um otherwise if you don't do that what i've found with some budget servers is it'll just lock up because it'll run out of memory and then vs code will get in this loop because it'll constantly try to reconnect but it can't reconnect because it's run out of memory and um oftentimes when that happens the the only thing you can do to resolve it is actually restarting the server so that that's really bogs down the whole experience so uh i definitely recommend if like i said you're working on a budget server check out something called the swap file look into setting that up that can make the process go smoother and then my final footnote or suggestion in regards to this remote development process is just keeping in mind that when you're doing development remotely on a server like this this information or this this work is going to be publicly available right by default this is a publicly available server it's different than if you're just doing local development on your own computer where the rest of the world can't see it so very typically if you're if you're using this process what you want to do is set up some sort of restrictions for example you could do like a basic http auth password that would make it so that anybody that's trying to access the server in the browser would have to enter some credentials to be able to to see the work and that would be something that you know you would have access to you could share with colleagues clients that sort of thing but the general public wouldn't be able to see your work in progress and with that that's my last tip in regards to using this particular extension i hope you found this useful i can see a lot of development moving towards this remote approach in the future so it's always interesting to look at tools like this

Channel: Susan B.

Views: 46,265

Keywords:

Id: miyD4c1dnTU

Length: 15min 57sec (957 seconds)

Published: Wed Feb 23 2022