How Strapi triggers Nuxt static site generation for S3 bucket

I have been working on ecommerce website, we just suppose to build the website as operational.

I choose Strapi and Nuxt, Algolia for search engine

Strapi is headless CMS, open-source, provides the large-scale of APIs without hard-coding.
Nuxt is SSR vue.js based framework, useful for pre-rendered pages for ecommerce.
Algolia is client-side search engine, very impressive tool to make high traffic in business.

The infrastructure I use

1. Source repositories on Github
2. Strapi on AWS EC2 instance
3. Nuxt on AWS S3 bucket

The things I need

The static website should be generated again when

1. The developer commit the code updates.
2. The author upload own product.

How did I tweak the problems

I solved all problems with GitHub Actions, it is the great tool for CI/CD.

> SSG : The developer commit the code updates.

It involves several steps:

• Specify when the github action should be trigger
• Configure AWS Credentials
• Create ENV files
• Cache Packages
• Install Packages
• Generate Static Pages
• Deploy website on S3 bucket
• Cloudfront Invalidation

> SSG: The author upload own product.

This is the tricky, I was stuck on this for couple of days.
There should be something to trigger S3 updates from Strapi,
I had researched the solutions and found that Netlify is the best solution because it provides build hook for CI/CD.
However, I wanted to take the challenge and decided not to use Netlify.

How can I achieve the same behavior without Netlify, keep S3 bucket?

1. Make the custom node app for webhook

After a while, I noticed that Github has REST APIs to control resources. I can dispatches APIs to certain repository.

https://api.github.com/repos/{ORG_NAME}/{REPO_NAME}/dispatches

This is the key.
In this node app, we just set headers to call github APIs.
I named the event as ssg.

const postData = Buffer.from(
  JSON.stringify({
    event_type: "ssg",
  })
);

headers: {
    Authorization: "token *****************",
    Accept: "application/vnd.github.everest-preview+json",
    "Content-Type": "application/json",
    "Content-Length": Buffer.byteLength(postData),
    "User-Agent": "nodejs request",
  },

Finally, upload nodejs app on EC2 instance. Here is the completed code.

2. Configure CI/CD script

Configure script to listen dispatch events from node app.
Github action listens the nodejs app request and regenerate the static website, deploy updates on S3.

name: CI/CD
on:
  repository_dispatch:
    types: ssg
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

3. Register webhook in Strapi dashboard

Register webhook on EC2 in Strapi dashboard

That's all, long journey. Thanks for joining me. :)