This is a quick tutorial on how to setup a Visual Studio Code Server on AWS and access it remotely from a web browser anywhere! Here are the fairly simple steps.

The AWS Setup

If you have one login to your AWS account or create one here and log in.

IP Addresses:

Go to Elastic IP Addresses and create a new IP address by clicking on the Allocate IP address button. Then select VPC and click Allocate.

Allocate IP Address

Route 53 for DNS Setup

In Route 53 or where ever you host your DNS server add an A host record with the hostname of your choice pointing to the IP address you just added. ie: A vscodesrvr.disruptive.io 54.160.x.x

Allocate IP Address

Starting an Ubuntu EC2 Instance on AWS

In AWS goto EC2 and create a new server I picked the Ubuntu 20.04 image on the free tier for this tutorial, just click select to get started!

Free Ubuntu 20.04 Server

Click on configure instance details and goto Step 6: Configure Security Group and, add two rules:

HTTP to 0.0.0.0/0
HTTPS to 0.0.0.0/0

Leave everything else default and click Review and Launch and launch. On the launch page when asked to select an existing key pair create a new one and download it, you are going to need it to connect to your server.

Select Key Pair

But first we are going to add the Public IP address to the server, to do this go back to Elastic IP Addresses, select the address you created and click on Action -> Associate Elastic IP Addres. Now you can associate it with the EC2 instance you created.

Associate Elastic IP

Now we are done with the AWS part.

Connecting to the EC2 Instance

On your Mac open up a Terminal window and execute the following to copy the key to your .ssh directory and create or update your ssh config file, replacing ubuntu.pem with whatever the name is of the key you just downloaded.

cp ~/Downloads/ubuntu.pem ~/.ssh 
sudo nano ~/.ssh/config

If you have never set this up before just paste the information below or if you have, you can append it or modify for your needs.

Note that you need to update the info with the hostname for your server and the key file you downloaded.

Host aws
    HostName vscodesrvr.disruptive.io # << replace this with the hostname you want for your server
    User ubuntu
    IdentityFile ~/.ssh/ubuntu.pem # << replace with the name of the cert you just copied.

Setting up the server

Now you can connect to the server by just typing ssh aws, it will automatically log you in to the server. It might ask you if you want to add the server as a trusted server, just respond with yes.

Terminal

Once connected to the server to update the server to the latest and greatest run:

sudo apt update
sudo apt upgrade

Then we are going to install the Visual Studio Code package:

curl -fsSL https://code-server.dev/install.sh | sh

Installing Caddy

Next we will install Caddy to connect to the Visual Studio Code Server from a browser. Or skip to NGINX on how to make this work with NGINX instead If you rather use NGINX:

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/cfg/gpg/gpg.155B6D79CA56EA34.key' | sudo apt-key add -
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/cfg/setup/config.deb.txt?distro=debian&version=any-version' | sudo tee -a /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

If you now run caddy version it should indicate you have version 2.3.0 or later installed.

Now we need to update the caddy config file, I like to safe the original file to review it later and am creating a new one with:

sudo mv /etc/caddy/Caddyfile /etc/caddy/Caddyfile.backup
sudo nano /etc/caddy/Caddyfile

Paste this into Caddyfile:

host.mydomain.com # << replace with your hostname.domain
reverse_proxy 127.0.0.1:8080

To safe and exit Nano press CTRL-X and Y. And yes, the file is called Caddyfile with no extension and a capital C.

We will set autostart for Visual Studio Code Server and Caddy by executing:

sudo systemctl restart code-server@$USER
sudo systemctl reload caddy

Using NGINX instead of Caddy

If you want to use NGINX instead of Caddy you do this:

sudo apt install -y nginx certbot python3-certbot-nginx
sudo nano /etc/nginx/sites-available/code-server 

and add:

server {
    listen 80;
    listen [::]:80;
    server_name host.mydomain.com; # << replace with your server name

    location / {
      proxy_pass http://localhost:8080/;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
}

And now we will start the code server and NGINX. (Replace <yourservername> with your server name and <youremailaddress> with your email address without the <‘s and >’s).

sudo systemctl restart code-server@$USER
sudo ln -s ../sites-available/code-server /etc/nginx/sites-enabled/code-server
sudo certbot --non-interactive --redirect --agree-tos --nginx -d <yourservername> -m <youremailaddress>

Now you can browse to your server in your browser and login with the password that you can find in the password field in the Visual Studio Code Server config file at ~/.config/code-server/config.yaml. Supposedly you should also be able to set a SHA-256 of your password in the hashed-password field, haven’t tried this yet, so let me know how that works out for you.

If you want you can change it and then restart code-server with:

sudo systemctl restart code-server@$USER

Done

Now you have Visual Studio Code running in a browser, password protected and accessible from anywhere in the world with a half way decent internet connection.

Welcome to Visual Studio Code Server in a Browser

Have fun with it!

Also read: How to Get AWS Certification

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts