Let’s create a website using Gatsby and learn how to serve it in a Docker container using nginx.

First, let’s initialize a new Gatsby app:

npm init gatsby

Feel free to accept the default settings, except we’ll name the app gatsby-nginx-docker.

Once the app is set up, navigate to the new app directory:

cd gatsby-nginx-docker

To use Docker, we’ll want a couple files: a Dockerfile to list instructions for assembling the image and a .dockerignore file to ignore files during the Docker build process. Let’s make these files now.

touch Dockerfile

For our .dockerignore file, let’s make sure to ignore our dependency files in node_modules like we would with git.

echo "node_modules" > .dockerignore

Building out the Dockerfile

Time to build out the Dockerfile! There are a lot of ways we could do this, but today we’ll use a multi-stage process:

• Stage 1: Node image for building frontend assets
• Stage 2: nginx stage to serve frontend assets

Stage 1: building the front-end assets

Our first stage will:

• Use a node image
• Copy all our Gatsby files into a working directory
• Install the project dependencies with yarn
• Build the app with yarn

Here’s how this looks in Docker!

# Name the node stage "builder"
FROM node:14 AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

Next up, we actually serve the content we just built!

Stage 2: Our nginx server

Our second stage will:

• Use an nginx image
• Remove any default static assets from the nginx image
• Copy our static assets from the builder image we created in the first stage
• Specify the entrypoint for our container to run nginx

Here’s what this stage looks like in the Dockerfile:

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/public .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Importantly, Gatsby builds the static assets into the public folder by default, so we copy our files from there. If your app builds the files into another folder for some reason, adjust accordingly.

Putting it all together

Okay! Let’s put this all together and run our app.

Our multi-stage Dockerfile should now look like this:

# Multi-stage
# 1) Node image for building frontend assets
# 2) nginx stage to serve frontend assets

# Name the node stage "builder"
FROM node:14 AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/public .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Now that we have assembled our Dockerfile, let’s build an image called gatsby-nginx:

docker build -t gatsby-nginx .

Now that our image is built, we can start a container with the following command, which will serve our app on port 8080.

docker run --rm -it -p 8080:80 gatsby-nginx

Navigate to http://localhost:8080, and you should now see our default Gatsby app!

🎓 Learn how the web works

Over my 20 year career in tech, I have noticed that an often-neglected part of interview prep is learning to explain technical concepts clearly. In my free newsletter, How the Web Works, I provide simple, bite-sized explanations for various web topics that you can use in your interview prep (or just to gain a better understanding of the web).

Enter your email below to get started. It's free and you can unsubscribe at any time. You won't regret it!