Gatsby Build Gitlab CI Pipeline

Guangzhou, China

Adding a CI/CD Build Pipeline

Continuation from NGINX Docker Ingress for your Gatsby Build

I now have a Gatsby webpage that I build locally. Wrap it inside a GoFiber Web Container. I then uploaded this container to my server and provided an NGINX Ingress container to handle the SSL certificate and direct web traffic to my web site.

Now I want to use Gitlab to do the hard work for me with Gitlab CI/CD Pipelines. I want to be able to upload my Gatsby source code to Gitlab and have it run the build for me. Afterwards it should trigger a second job that takes the Build Artifacts, wraps them inside the GoFiber Webserver Container and uploads the container into the Gitlab Docker Registry.

Adding a CI/CD Build Pipeline

After you Installed Gitlab you can add your Gatsby project to your account. After adding a .gitignore file to the root directory:

# Dependency directories
node_modules/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# dotenv environment variables file
.env

# gatsby files
.cache/
public/

# System files
.DS_Store
.thumbs

Additionally, we need a .gitlab-ci.yml file that holds our instructions for the CI Pipline:

image: node:latest

cache:
  paths:
    - node_modules/
    - .cache/
    - public/

stages:
  - build
  - deploy

page-render:
  stage: build
  script:
    - npm install
    - npm run pre-build
    - ./node_modules/.bin/gatsby build --prefix-paths
  artifacts:
    expire_in: 1 days
    paths:
      - public
  only:
    - master
  tags: [build]

containerize:
  stage: deploy
  script:
    - curl --request POST --form "token=mysecrettoken" --form ref=master https://my.gitlab.com/api/v4/projects/75/trigger/pipeline

The Containerize step above is a Pipeline Trigger - see "Setting a Pipline Tigger". This will take the Build Artifacts from the Gatsby build and build the GoFiber Container around it - Dockerfile:

# Building the binary of the App
FROM golang:1.16 AS build

# Project labels
LABEL maintainer="m.polinowski@instar.com"

# `wiki` should be replaced with your project name
WORKDIR /go/src/wiki

# Copy in the build artifacts from the Gatsby static build to add it to your GoFiber container
COPY . .
RUN curl -L --header "PRIVATE-TOKEN: myprivatetoken" "https://my.gitlab.com/api/v4/projects/wiki%2Fwiki_en/jobs/artifacts/master/download?job=page-render" >> ./temp/artifacts.zip
RUN apt update && apt install -y unzip && unzip -qq ./temp/artifacts.zip -d ./static

# Downloads all the dependencies in advance (could be left out, but it's more clear this way)
RUN go mod download

# Builds the application as a staticly linked one, to allow it to run on alpine
RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -a -installsuffix cgo -o app .

# Moving the binary to the 'final Image' to make it smaller
FROM alpine:latest

WORKDIR /app

# Create the `public` dir and copy all the assets into it
RUN mkdir ./static
COPY --from=build /go/src/wiki/static ./static

# `wiki` should be replaced here as well
COPY --from=build /go/src/wiki/app .

# Exposes port 9999 because our program listens on that port
EXPOSE 9999

# CMD ["./app"]
RUN chmod +x ./static/run.sh
CMD ["ash", "./static/run.sh"]

The last step in the Dockerfile above triggers a shell script that I added to the static folder of the project. It simply executes the compiled Fiber app for me - as I had difficulties to get it to run otherwise.

#!/bin/ash
./app

Adding a CI/CD Build Pipeline​

Adding a CI/CD Build Pipeline