Remote Development using Visual Studio Code and AWS EC2

hey everyone I wanted to do this quick little video to kind of walk you through how you might set up a remote environment for doing development using node and react as well as using an ec2 instance on AWS as your server so the first thing you want to do is log into the AWS console and we're going to go ahead and create a new instance from here so first thing we'll come up here we'll select launch instance and I'm just going to call this my react server and I'm going down here I'm going to pick the Amazon Linux quick start here I'm going to come down leave all that the same I'm just going to make a little bigger I'm going to pick the t2 medium and I'm going to select a key pair if you don't have a key pair go ahead and create one we'll need that because we're going to be using SSH protocol in order to actually plug this into uh vs code all right so we'll leave that all the same there I'm going to create a security group and I'm going to make sure I enable SSH I'm also going to enable https from the internet and also HTTP we're also going to add one additional one later on but we'll come back to that all right give myself a little bit more storage so I'm going to make this 50 gig and I'll leave everything else the same and go and launch that instance and once that's launching you'll be able to then connect in and continue the setup within AWS okay so the server is now running and still initializing but we're able to continue on here first thing we want to do is go down and select the server from our list of instances and go to the security group here for launch wizard three we are going to then edit these inbound rules we're going to add one additional rule here and this is going to be a custom TCP rule for 3000 which is the default default port for react whenever you're doing development so we're just going to kind of do that just so that we have access so we can actually run the react server on a different port number and be able to access it from the internet so we're going to go ahead and do that we're going to save those rules and we're going to come back to the dashboard and this is running now okay so now that we got that the next thing we're going to do is confirm that we can actually SSH into the server because because with vs code do remote debugging it utilizes the SSH protocol so we're going to go ahead and do that so let's go back and bring up a bring up a command window on your workstation here and go to wherever you have your pen key so you'll need that that that pem key that you downloaded from AWS so we're going to do an SSH here Dash I and we're going to put the dev key pen in there we also need to get the public IP which reminds me I forgot one additional step that we want to do before we go any further and that is we want to make sure that we set up a a elastic IP so our IP doesn't change so we're going to come down here to the elastic IPS and we're going to allocate a new one okay and then once it's been allocated we're then going to come down here and we're going to associate that elastic IP with our running instance which is going to be the react server one go ahead and select associate associate all right come back over here to ec2 dashboard and come down now that we have that Associated we'll come back to here and we'll go to details and we should have a public DNS entry here that'll be static I mean it won't change whenever we shut down the servers and bring them all in line so that's the advantage of having elastic IP so go ahead and take that public IP DNS copy that to the clipboard then we're going to come back over to our Command window then paste that in and we're going to just confirm that we can connect in through SSH so we're going to use the ec2 user account all right at sign and hit enter [Music] let's make sure I got that right let me just go back here real quick and refresh 74.63 just gonna make sure I hit the right one there nope it had changed I must not have I must not have waited for and refreshed the page so that was the old IP so let's go ahead and replace that with the one that's we're using there there we go okay hit enter so we're gonna get prompt there yes all right so we are connected in so we know now at this point that we have access through SSH to to go into that server so the next step is going to be we're going to go ahead and configure vs code in order to connect in and set up the remote remote development or debugging environment we'll do that next all right I am now in Visual Studio code and the first first thing if you haven't already had added this go ahead and find the extension for remote development and it's the visual studio code remote development extension pack go ahead and install that that will install a number of different components and that'll all give us the option to use SS SSH to do remote development so once we have that we're going to come down here to the very bottom left here and select that option and this is where we're going to be able to connect to the host and switch and do a couple different things as we're doing our development but before we do that we have to continue off continue on setting up the connection so we're going to open up the SSH configuration file and select the one that we're using and I'm happy to be using this one so in here is where you can Define all your various remote sessions so I'm going to go ahead and uncomment the sample I have here it doesn't matter what you call this I'm just going to call mine react remote react development you have to give it the IP address of the host the user and then your pem file so I need to go get the public IP so I'm going to come back over here to the AWS console and come down here and go ahead and select that copy that to the clipboard that's our public IP come back in here and replace that all right and then I have to give it the location of my pen file my pen file is actually stored in a different folder so it's documents and AWS keys and then it is if I go back here and just to confirm I called mine devkey.pem so that's the location just confirm the folder so it's going to be AWS keys in AWS and that's going to be devkey.pem so I'm going to come down here devkey.pam go ahead and save all that all right now that I have that I can come back down to the green option at the very bottom left select it again and select connect to host and then I have my option here to remote reactive go ahead and select that and you're going to get the option here to continue make sure you select that click continue and give it a second it'll go ahead and set everything up once you're connected as you see down here it says remote Dev remote react Dev I'm connected I'm going to go ahead and open up the terminal and uh this is actually a terminal inside of a remote server so if I do a PWD you can see that I'm actually on the Linux box now and there's nothing in there okay so we now have action we have set up the remote development The Next Step would be to go ahead and install node and react and continue on setting up our development environment we'll do that next okay so now what we're going to do is we're going to go ahead and install node and then after that we should be able to set up the react app the way we want to so the first thing we have to do is we have to install the node version manager okay so the command to do that you can get that from GitHub user account and I'll paste this into the comments so you have access to it we'll go ahead and install that and then after that we're going to go ahead and activate it so we're going to type in the Fallen command sorry all right I'm gonna go ahead and we're actually going to go ahead and run it first activate it so we don't want to run that command once we install this and activate it now once we have the node version manager this allows us to have different versions of node so we're going to be using version 16 because at the time of recording this 16 is the latest version that is supported on the ec2 Linux instance okay so if you install a later version you're going to run into problems so please make sure that you do an install of version 16. that will go ahead and install what we need once we have that we can should be able to say node version to the version it is we're at 16.19 in PM version and see the version we have that so we have eight Dimensions so we're good there so now we have node installed and now we have to go ahead and create our react app so we're going to use the npx create react app to do and hit enter that's going to go ahead and install all of the required packages that are needed for react development this may take a couple minutes as the prompt tells you once that finished finishes we will continue on with the remaining remaining steps okay once that finishes the install we are going to be at a point now that we should have a an empty react app so if I do an LS on my internal window here you'll see that I have a two to a full to do folder so I'm going to go ahead and CD into that all right and that will give us all of our files that we have for react app we can also come up here to the file menu and open folder and you can kind of see that there's also we have access to those remote folders so we can select to do there as well and open go ahead and select yes you trust the author here and now we've got our to do directory with all of our node packages for react setup for us so let's go back and reopen the terminal window here and let's go ahead and we're now in the to do folder let's go ahead and do an npm start and go ahead and make this a little smaller here I also have my browser here so we can kind of see that so we can do npm start start the development server and there we have it so so what's nice about this is we can actually use localhost so it'll actually port forward all that traffic through Port 3000 to our Local Host uh which is kind of nice so we also have access just like you'd expect that if we go over here to the source folder here and select our app.js and let's go ahead and change this from learnreact on AWS go ahead and save that and we should see [Music] we should see the changes being reflected within the browser as we expect so now you have it you have a working development environment where you can do remote development and you don't have to put it on your your local workstation you can utilize the the server there that you've set up one final thing we can do just to confirm is we can try to hit this from the internet since we opened up for 3000 let's give that a shot next all right so now we're going to go back into our AWS console and come up to the public DNS copy that to the clipboard come up here to the browser window and go ahead and paste it in and we have to put Port 3000 there hit enter and there you have it so now you can you can also utilize it directly from the internet you're hosted on the internet uh through that ec2 or that aw that that that link and you can also hit to hit it from localhost while it's running so there you have it so you now have a working development environment that allows you to quickly create react apps and work on them remotely thanks for watching and see you over the next video

Channel: Randy Michak

Views: 2,200

Keywords:

Id: GavCQFzesy8

Length: 14min 25sec (865 seconds)

Published: Wed Jan 25 2023