The Dev Env: AWS, VS Code, and SSH

Sick of installing endless utilities on your laptop, then debugging confusing PATH issues or global dependency problems? Want to keep your laptop configuration clean and separate from your development?

Consider using a free (or very cheap, if you want more power) Virtual Machine on AWS and interacting with your codebase over SSH using Visual Studio Code.

At the end of this tutorial, you open VS Code on a remote virtual machine.

That’s right, that’s my home directory on my virtual machine in the cloud, open in VS Code.

Launch a Virtual Machine

• Start a VM in the cloud
• Note the IP address
• Note the key-pair .pem file

Under “Services”, select EC2. EC2 is AWS’s service for provisioning Virtual Machines.

Many, many services. You want the first one. I know, how boring.

Select “Launch Instance”.

They don’t make it hard to find this button.

Select Ubuntu Server or Amazon Linux as your operating system. You probably want to stick to a free tier OS of the many options, so select the “Free Tier” checkbox if considering another OS.

Too many options. Don’t Panic.

Select t2.micro. It’s free if this is your only instance. (Even if you choose a higher tier, the cost is remarkably low and billed hourly.)

Then, click “Review and Launch”. Then click “Launch” after reviewing.

Don’t click the Next: Configure Instance Details button. It’s a trap!

If you want to create a key pair (think: asymmetric encryption and the building block of SSH), name it and download the file. Don’t save it in your recycle bin. Not wise. Select “Launch Instances”.

Select “View Instances,” or from the EC2 Dashboard select “Instances”

Look on the left side of your screen.

Find your newest EC2 instance in the list and select it. When it is running (green circle under “Instance State”), find its Public IP (NOT Private).

How to find the Public IP. (Don’t take the Private IP!)

Set Up VS Code

• Install VS Code and extensions

Install:

• VS Code (https://code.visualstudio.com)
• “Remote - SSH” extension (https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)
• “Remote - SSH: Editing Configuration Files” (https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh-edit)

Configure SSH

Using command palette (cmd+shift+p or ctrl+shift+p), find the “Remote-SSH: Open Configuration File…” command.

The first one. You bet I used it recently.

Of the options presented, select the one that looks like ~/.ssh/config

Select the config in your home directory.

In your SSH config file, follow this format:

On line 2, you can name the Host whatever you want.

On line 3, use your VM’s Public IP. (When you shut off your VM, your IP will be lost. If you start your VM again, you will have a different IP. Don’t forget to keep this config file up to date!)

One line 4, `ec2-user` for Amazon Linux, or `ubuntu` for Ubuntu. I chose Amazon Linux.

On line 5, give the path to your .pem . I suggest moving it to ~/.ssh.

Save. To test, run ssh ec2_vm_01 (put the name you assigned your host).

When SSH gives you a warning about some sort of unknown signature, say “yes”. It will remember your decision for this IP. When your IP changes, you will see this prompt again.

Connect in VS Code

In VS Code, attempt to connect to your VM:

Either of these options will work.

Select your VM when prompted.

I’m going to choose ec2_vm_01.

Your view will reload, or a new window of VS Code will open. This will have a terminal open, connected to your cloud VM. Run code . to open your current directory in VS Code. The command will not work if you are not using VS Code’s SSH extension to connect.

Spoiler alert — that `code .` command will open your current directory in your IDE!

This will open a new window of VS Code, viewing your home directory on your VM.

That’s a nice home directory, there!

You’ve made it. Welcome to your Linux development environment. Happy Hacking!

But How Do I Open Another Terminal?!

You can open another terminal on your server using ctrl+backtick (`, it’s above tab), or using command palette.

Apparently, cmd+shift+c does the same thing. That one always surprises me.

But How Do I Access A Port?!

Using command palette, select “Remote-SSH: Forward Port from Active Host”.

First, provide the port on the remote machine you wish to access. If you have a web server running on port 4200 on your dev environment, for example, type “4200” (and keep writing that Angular app).

Then, provide the port on your local machine (your laptop or desktop) where you want to see this port. To avoid confusion, I find selecting the same number is nice if possible. (Remember that a port can only be used by a single process at a time, so if the port is already being used you may see an error message).