Gatsby Development Server + AWS free micro instance

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

Make sure the indentation stays the same.

HostName ec2-your-instance.amazonaws.com
  User ubuntu
  Port 22
  IdentitiesOnly yes
  IdentityFile ~/.ssh/file.pem

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

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

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

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

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]-----+

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

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",

We will install pm2 globally in order to run the server all the time

npm install pm2 -g

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

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": "",
    },
  },
}

Run the following required updates and installs to run smoothly

sudo apt-get update

sudo apt-get install build-essential

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 try the following

apt-get update     
apt-get install python2.7    
ln -s /usr/bin/python2.7 /usr/bin/python 

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 :)