DEV Community

Tony Metzidis
Tony Metzidis

Posted on

Fully Remote Development with VS Code & Cloud9

From my blog

I work from about 7 different machines, including 3 laptops, ipad, chromebook and a PC desktop. Usually this means keeping credentials, config, build dependencies and IDEs in sync across all 3--and the iPad & Chromebook just can't run my dev environment

I considered a few options to enable seamless work across devices

option pros cons
Keep a "dev" docker image that contains everything. fully-local dev only works on Desktop OSs. Inconsistency if you forget to push the image
Sync script fully-local dev Inconsistency across devices. Script mayhem
Code remotely via a VM Secure, consistent Traditionally, text-only

Solution

  1. Launch Cloud9 Environment on AWS
  2. Install VS Code + SSH Remote Extension
  3. Install tmux

With this setup, you get the highest-fidelity experience when you can (with
VS code), plus an adequate experience on iPad & Chromebook (cloud9 web ide).
With tmux you get seamless handoff across all devices.

1. Launch Cloud9 EC2 Coding Environment

Prerequisites: AWS Account

I recommend creating an EC2Environment. For a simpler experience, consider lightsail. Remember, you'll only pay while the instance is online, and it will suspend itself after 30m of inactivity.

2. Install VS Code + SSH Remote on your Laptop

Install VS Code, then go to the Extensions panel and enable Remote - SSH.

3. Connect with SSH

First, you'll need a keypair to use, since cloud9's key is hidden.
On your laptop, run this

ssh-keygen -t ed25519
# copy this key
cat ~/.ssh/id_ed25519.pub

Then in the cloud9 terminal, run

cat >> ~/.ssh/authorized_keys
[ paste your key here]

Now edit your SSH config in VS code

  1. Hit "ctrl-P" , then chose "open remote SSH config file"

add an entry for your cloud9 box:

Host cloud9-env1
    HostName PUBLIC-IP-OF-YOUR-EC2-INSTANCE
    User ec2-user
    IdentityFile  C:\Users\USERNAME\.ssh\id_ed25519

At this point you should be able to remote into the host using
ctrl-p -> "Remote-SSH : Connect to Host"

If you're having connectivity issues, make sure your security group is open to your WAN IP address. Here's some troubleshooting

I recommend creating a new key for each device. This way you can revoke a
device from the server as needed

4. [Optional] Sync Terminals with Tmux

If you want true session handoff, you can install tmux

sudo yum install -y tmux
# creates a new attachable session
tmux 

From other devices just run tmux a to attach to that session

Conclusion

This combo gives you a secure and high-fidelity environment, with all of your
dev tools, databases, code & credentials. And if you're like me with a day
job, you can easily come back to where you left off, and secure your private
assets.

Here's some more info on VS Code remote work, and why developers are moving in the direction of remote VM development.

Top comments (8)

Collapse
 
leeroy profile image
Lee-Roy

Howdy! I wrote a similar article, I appreciate the nod to tmux since I was targeting a more beginner level getting set up approach. Why did you suggest using cloud9 though afaik c9/vscode are the same layer in this equation. So why have both? Is it to have the 30m shut down?

dev.to/leeroywking/remote-developm....

Collapse
 
tonymet profile image
Tony Metzidis

Great article, i like that you go into some of the dirty details. The cloud9 env handles a lot of those (e.g. IAM policy, storage, EC2 template). About the only manual steps I needed were (1) security group and (2) ssh keys.

I'm really glad to see more investment in this. I've been doing some form of VM development for a long time, and always there was a compromise. Now that VS code remote works so well, I feel like I get the best of both worlds.

What's next for you? any new tech you're looking into to improve your experience?

Collapse
 
leeroy profile image
Lee-Roy

The EC2 default settings handle most of those too but I know having new users just click through stuff can be a little squishy.

As for new stuff, this actually gets me most of what I wanted, but I would like to make this a more general tool-set. Right now its just for remote code development but doesn't do a lot to leverage the better network placement of a cloud machine in other ways. In a perfect world I'd roll this into a bigger setup guide to include things like brow.sh and other tools to help enable people with low bandwidth connections to get the most out of these free tier instances.

Collapse
 
riscie profile image
riscie

Nice. But I have to say it: 7 different machines!? what a madman! ;)

Collapse
 
tonymet profile image
Tony Metzidis

My job is pretty strict about which machines can access corp, so I have to have multiple machines depending on what I'm doing.

Also i'm kind of an OS nerd so I like using them all. Each one has it's own strengths--if I had to pick one i'm not sure which one I'd stick to.

Collapse
 
mauriciorobayo profile image
Mauricio Robayo

Nice! What's the advantage of this over using online vscode with Azure online.visualstudio.com? Any reason to prefer your setup? It looks like more work.

Collapse
 
tonymet profile image
Tony Metzidis

Nice I'll give that a try. I already had resources in AWS and was coding using EC2 instances for a while. For years I've been coding on a VM with a mix of rsync & vim, then moved to cloud9 to do the ipad, and now tied it all up with VS code.

I think your approach may be easier to set up, and if you're in azure it's a win win.

Collapse
 
niujinghui profile image
niujinghui

Is this method limited only to Cloud9 EC2 environment? Can I connect my VSC to an existing Cloud9 SSH environment?

I tried directly connecting to my existing instance, but keep getting timeout error after connecting.