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
.
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
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!
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.
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.
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
.
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.
Have fun with it!
Also read: How to Get AWS Certification