Skip to main content

Gatsby.js on CloudFlow

Learn how to deploy a Gatsby.js app on CloudFlow. At the end of this tutorial, you'll have a Gatsby.js app deployed with the following:

  • Publicly accessible URL for your app
  • Automatic SSL
  • Automatic HTTP/2
  • Multi-Region hosting
  • Multi-Cloud hosting
  • Layer 3 and 4 DDoS protection

Step by Step​

Follow the step-by-step instructions to deploy a Gatsby.js "Hello World" application on CloudFlow. We'll Dockerize it, push it to Dockerhub, and deploy it on CloudFlow.

Prerequisites​

You'll need the following to complete this tutorial:

  • A Docker Hub account
  • A CloudFlow account
  • Node.js installed on your local machine
    • You can install it from here
  • Gatsby.js installed on your local machine
    • You can install it from here
  • Docker installed on your local machine

Create the Gatsby.js App​

Create a new directory for your app.

mkdir gatsby-app
cd gatsby-app

Initialise a Gatsby.js project by using the Gatsby CLI.

gatsby new .

Make a simple change to the HTML in src/pages/index.js and test it locally.

gatsby develop

Create a Dockerfile​

Create a file called Dockerfile in the root of your project with the following contents:

Dockerfile
FROM node:18

# set the working directory
WORKDIR /app
# copy the repository files to it
COPY . /app

RUN npm install
RUN npm install -g gatsby-cli

RUN gatsby build
EXPOSE 80

CMD gatsby serve --port 80 --host 0.0.0.0

Then build the image with your docker daemon.

docker build -t gatsby-app:v1 .

Push to Docker Hub​

Authenticate your local docker with Docker Hub.

docker login

Ensure you have a repository on Docker Hub. If you don't, create one. E.g. myusername/gatsby-app

Tag the image and push it to Docker Hub. Replace myusername with your Docker Hub username/organization. Note: We are assuming the repository you've created is public.

docker tag gatsby-app:v1 myusername/gatsby-app:latest
docker push myusername/gatsby-app:latest

Deploy to CloudFlow​

Login to CloudFlow and create a new CloudFlow project.

Use the following values for the project settings:

  • Plan: Free
  • Image: myusername/gatsby-app:latest
  • Port: 80

Click Create Project.

Test the Deployment​

Once the deployment is complete, you can test it by visiting the section.app URL provided in the project details. Your traffic will be routed to the closest Point of Presence based on your geographical location.