Gatsby Development Server + AWS free micro instance
There is a great article by Katie from Katie Kodes blog about setting up a live dev site with heroku, Gatsby & Sanity. I wanted to share my solution which is with an AWS EC2 t2.micro free tier instance. I have found Gatsby Cloud to be limiting in the amount of real time preview edits and always hit the limit with my very simple sites. So let's get started...
This tutorial assumes you already have a gatsby site and a sanity cms running and connected to eachother. If you need a guide on how to get that setup you can follow our Definitive Guide to Setting up Sanity.io with GatsbyJS you only need to follow up to the point of locally running Sanity and Gatsby. Once you have done so we can start by setting up an EC2 Instance on AWS. You can use an Ubuntu t2.micro instance that is under the free tier, I haven't had to pay for any of my instances so far.
Lets start by opening up aws console, navigating to EC2 clicking launch instance and you should see a page like below, click the select button for Ubuntu 18 and continue below
Selecting EC2 Instance

Now you will see the page below, free tier should be selected already if not choose it, and then click the next configure instance details button in the bottom right corner, seen in the screenshot below
Choose instance type

You can click through a few of the next options. For the configure instance details page, just click next add storage, on the storage page leave the default 8gb and click next add Tags. On the tags page add one tag Name: name-of-your-website seen below. Then click review and launch.
Add name and key

After click review and launch, review the setup and then click launch. After clicking launch, this next part is very important it is how you will connect to you instance securely. Choose Create a new key pair and name it something descriptive. You can see mine below, then click donwload, once it's donwloaded onto your machine click launch instance
download pem key

Next up we setup the ssh config, I am running linux mac should be the same, and windows you might have to use putty. You can move the file.pem
you downloaded to .ssh/file.pem and
create or open your ssh config file with code ~/.ssh/config
if you are running vscode, or vim ~/.ssh/config
if you want to edit it in terminal. In the config file you will want the HostName which you can find in aws console under ec2 instances clicking on the instance you created and copying the Public IPv4 DNS
ssh config example
Make sure the indentation stays the same.
HostName ec2-your-instance.amazonaws.com
User ubuntu
Port 22
IdentitiesOnly yes
IdentityFile ~/.ssh/file.pem
chmod you file.pem in order to ssh in
You file.pem requires chmod 600 in order to change permissions to ssh. This is for security reasons. AWS won't let you connect otherwise. Here is the command you run
sudo chmod 600 ~/.ssh/wispy.pem
SSH into your instance
You can now run the following command, it may tell you the authenticity of the host can't be established, which is fine, you can choose yes to create a fingerprint in your know_hosts so it doesn't bother you and you can connect.
ssh ubuntu
yes
After SSH in, you should see the following in your terminal

Installing node with nvm
We want to use nvm to install node, for it's simplicity and ability to switch node versions if need be. Running the following commands one after another. If everything worked you should get a version number response from node -v
and you don't have to install the stable version you can install any version you like.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
. ~/.nvm/nvm.sh
nvm install stable
node -v
Comment out interactive in .bashrc
For some reason this line in your default bashrc interferes with Gatsby and NodeJS in order to fix that we just need to comment out these lines. So open up your .bashrc with the following and comment out the lines below. In order to edit in vim, hit i to go into insert mode, in order to exit hit esc
and to save hit shift + :
and then type wq!
to write and quit the file. We are writing a Vim tutorial currently, but there are many good ones on the web.
sudo vim ~/.bashrc
## Comment out these lines at the top
case $- in
*i*) ;;
*) return;;
esac
Setup ssh key in order to give access to github later on
Type the following, hit yes to every yes/no prompt and hit enter to every passphrase prompt (no need to enter a password) you should get the following results.
ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/home/ubuntu/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/ubuntu/.ssh/id_rsa.
Your public key has been saved in /home/ubuntu/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:random ubuntu@ip-ip
The key's randomart image is:
+---[RSA 2048]----+
|... |
|... |
|... |
|... |
|... |
|... |
|... |
|... |
|... |
+----[SHA256]-----+
Cat (view contain of file) of the id_rsa.pub
So in the last command we created a file at ~/.ssh/id_rsa.pub
we want to view the contents of the file and bring it over to github, so github has access to our server. Just run the following and you should get a output starting with ssh-rsa long-random-string-of-letters-and-numbers
cat ~/.ssh/id_rsa.pub
Go to github repo and add the id_rsa.pub key we generated and paste in, give it a descriptive title and give it write access

Add -H 0.0.0.0 to package.json
In order for Gatsby to server to the right port and AWS to pick it up we need to modify the package.json
. Set the following setting below in your Gatsby project
"develop": "gatsby develop -H 0.0.0.0",
Install pm2
We will install pm2 globally in order to run the server all the time
npm install pm2 -g
git clone the ssh repo url
Next we want to clone the ssh repo url it should start with git@github.com:...
it will ask you to add a fingerprint again via prompt just choose yes, once it's cloned we can delete the repo, because we are going to use pm2 deploy to setup the repo on the instance. We did this so it would be added to our known_hosts and pm2 deploy wouldn't fail
git clone git@github.com:user/gatsbySite.git
Setup pm2 deploy config file on local gatsby github repo
In your local github repo in the root directory add a file called ecosystem.config.js
with the following configuration, replacing your host, env variables, repo, name, path and your file.pem
module.exports = {
apps: [
{
name: "wispyCo",
script: "npm",
args: "start",
watch: false,
env: {
NODE_ENV: "development",
},
},
],
deploy: {
development: {
key: "~/.ssh/file.pem",
user: "ubuntu",
host: "ec2-random.compute-1.amazonaws.com",
ref: "origin/development",
repo: "git@github.com:user/gatsbywebsite.git",
path: "/home/ubuntu/wispyDeploy",
"pre-deploy-local": "",
"post-deploy":
"npm install && pm2 reload ecosystem.config.js --env development && npm install -g gatsby-cli",
"pre-setup": "",
},
},
}
Do some linux updates and installs
Run the following required updates and installs to run smoothly
sudo apt-get update
sudo apt-get install build-essential
Install PM2 locally globally, and setup and deploy
Run the following commands in the root directory of your gatsby project to get the site deployed to ec2 and running. We will still have to add a load balancer to view it from the web, but that's easy enough. You should get a success message from both commands.
npm install pm2 -g
pm2 deploy ecosystem.config.js development setup
git add .
git commit -m "dev setup"
git push
pm2 deploy ecosystem.config.js development
If you get a python error
If you get a python error try the following
apt-get update
apt-get install python2.7
ln -s /usr/bin/python2.7 /usr/bin/python
Go to your EC2 instance in aws web console and click security the your security group and add a http 80 anywhere rule

Create a classic loadbalancer with the following settings port 80 -> 8000

Select your security group, hit next and keep defaults and when you get to choosing a instance choose the instance we have setup. Then create the loadbalancer. Hit close open up the load balancer and in about 5 minutes it should be running To visit it you can go to the DNS name of the loadbalancer. If the status says 1 of 1 instance in service it is running if not give it some time and once it does check the url to see if your site is running.
Yahoo :)