[Serverless architecture #3] Deploying Gatsby / Strapi with Live preview capability using a serverless architecture

Strapi + Gatsby (Live preview) with Azure Container Instances

Preamble

  • A Content Management System (CMS) using Strapi.
  • A public facing front end application using Gatsby.
  • A web analytics tool to measure the behavior of users on our website using Umami.

Introduction

Overview

Architecture of the solution
  • An ACR to handle our private Docker container images
  • A storage account using a file share for our database (SQLite) and a storage container for our media.
  • An ACI containing our running instance of Strapi served by a reversed proxy (Caddy).
  • An ACI containing a running instance of Gatsby in “develop” mode, also served by a reversed proxy (Caddy).
  • A powershell Azure Function that triggers the start/stop of our ACIs

Live Preview

  • Our Strapi webhook sends a POST request to “https://<your_gatsby_aci_url>/__refresh”
  • Our gatsby-source-graphql is set up with the url to our Strapi GraphQL endpoint, i.e. “https://<your_strapi_aci_url>/graphql”.

User experience

Trying it out

  • Edit variables for Strapi configuration (tokens, keys, secret..) according to your installation
  • Build Strapi and Gatsby docker images along with their deployments to the container registry
  • Convert SQLite database to WAL mode
  • Deploy the Azure Function code to the Function App

Results

Going further

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Clément Joye

IT professional with hands on automation, test and development. I’m always on the lookout for new paths and love to build solutions and systems from scratch.