grobelDev

Setup Gatsby-Starter-Blog on Google Cloud Run

April 30, 2020

This demo is based off of Gatsby’s starter blog.

Demo Website:
https://gatsby-blog-cloud-run-zxc6fpw5uq-uc.a.run.app/

Final Repository:
https://github.com/grobelDev/gatsby-blog-cloud-run

This blog is setup using this process.

Here’s the high level overview.

  • Gatsby is responsible for styling and generating the static pages for our blog.

    • These static pages are built using Google Cloud Build
  • nginx serves these static pages.

    • nginx is also built using Google Cloud Build.
  • The application is imaged as a Docker container and deployed via Google Cloud Run.

    • Instructions for deployment is also via Google Cloud Build.

Step 1: Install gatsby-starter-blog

Run a variation of this command:

npx gatsby new client https://github.com/gatsbyjs/gatsby-starter-blog

Note that I chose to put my blog in the client directory.

If you wish to change this, just the name to be whatever you want.

You can test your installation by running npx gatsby develop.

Step 2: Setup the Dockerfile

We are going to be serving our containers from Google Cloud Run. As such, we’re going to need to containerize the application.

Begin by first going into our new client directory:

cd client

Then create a Dockerfile:

touch Dockerfile

Put this code inside:

./client/Dockerfile:

FROM node:12-slim as builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npx gatsby build

FROM nginx
EXPOSE 8080
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/public /usr/share/nginx/html

The trick behind Gatsby’s performance is that it generates a bunch of static files.

The Dockerfile we just created tells Gatsby to create a production ready version of our website.

Gatsby stores these built files in the /public directory.

We then use nginx to serve these files. The Dockerfile instructions tell nginx exactly where those built files are located.

Step 3: Setup nginx

Now we need to tell nginx what logic to use when serving our static pages.

First, create the nginx directory:

mkdir nginx
touch nginx/default.conf

Now alter our default.conf file:

./client/nginx/default.conf:

server {
  listen 8080;
  root /usr/share/nginx/html;

  index index.html;
}

Step 4: Setup cloudbuild.yaml for Google Cloud Build

We are going to be using Google Cloud Build’s Github integration to automatically deploy on commit to Google Cloud Run.

To tell Google Cloud Build how to build and serve the files, we need a cloudbuild.yaml file.

So lets get out to the root directory first:

cd ..

Then create the cloudbuild.yaml file:

touch cloudbuild.yaml

Now put this code in it.

./cloudbuild.yaml:

steps:
  # build the container image
  - name: "gcr.io/cloud-builders/docker"
    args:
      ["build", "-t", "gcr.io/$PROJECT_ID/gatsby-blog-cloud-run", "./client"]

    # push the container image to Container Registry
  - name: "gcr.io/cloud-builders/docker"
    args: ["push", "gcr.io/$PROJECT_ID/gatsby-blog-cloud-run"]

    # Deploy container image to Cloud Run
  - name: "gcr.io/cloud-builders/gcloud"
    args:
      [
        "beta",
        "run",
        "deploy",
        "gatsby-blog-cloud-run",
        "--image",
        "gcr.io/$PROJECT_ID/gatsby-blog-cloud-run",
        "--region",
        "us-central1",
        "--platform",
        "managed",
        "--quiet",
        "--allow-unauthenticated",
      ]

images:
  - gcr.io/$PROJECT_ID/gatsby-blog-cloud-run

IMPORTANT NOTE 1:

Feel free to replace all instances of gatsby-blog-cloud-run with whatever name you want your project to be named.

IMPORTANT NOTE 2:

Make sure to replace ./client with whatever name you chose to name your directory from Step 1.

IMPORTANT NOTE 3:

If you are copy pasting the above code, NOTE that copy pasting .yaml files is likely to be rife with errors.

Take care to ensure that all of the indentation levels have been done properly.

Step 5. Create a Project on Google Cloud.

Steps 5-9 are specific to Google Cloud.

As such, the below sections assume you already have a Google Cloud account.
If you don’t have one, you’ll need some form of payment (like a credit card) to create one.

Projects are the general umbrella term for how resources are siloed off from each other in Google Cloud.

For our first step, create a new Project in the Google Cloud Console.

This is also where we are going to be configuring the project.

Step 6. Enable relevant APIs.

API’s must first be enabled before being available to use in your project.

Use the search bar at the top to find and activate the relevant API’s.

Enable the Cloud Run API for your project (Search Term: Cloud Run).
Enable the Cloud Build API for your project (Search Term: Cloud Build).

The Cloud Run and Cloud Build sections can also be pinned from the hamburger menu on the left for easier access.

Step 7. Setup Google Cloud Build

Go to the trigger tab on your project’s Cloud Build page.

Use your Github account to authenticate and connect your repository to the project.

Setup a push trigger to build your app and push to production on every commit.

Step 8. Give Google Cloud Build relevant permissions.

Go to the settings tab in Cloud Build.

You’ll see settings for Service Account Permissions.

Make sure that the Cloud Run admin permission is set to ENABLED.

Step 9. Deploy

Commit your project and push to master.

You should see your project live in a couple of minutes with an autogenerated https://run.app URL.

You can find this URL by navigating to the Cloud Run section and clicking on the name of your container image.

Step 10: Done!

Now try committing and pushing another change to master.

Additional commits should automatically deploy your new changes.

Demo Website:
https://gatsby-blog-cloud-run-zxc6fpw5uq-uc.a.run.app/

Final Repository:
https://github.com/grobelDev/gatsby-blog-cloud-run

Thanks for reading.