Gatsby Development Server + AWS free micro instance

Author:

Anders Kitson

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 n​eed 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 :)