DEV Community

loading...
Cover image for How Strapi triggers Nuxt static site generation for S3 bucket

How Strapi triggers Nuxt static site generation for S3 bucket

jacobliu profile image Liu Yu Zhou ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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",
  })
);
Enter fullscreen mode Exit fullscreen mode
headers: {
    Authorization: "token *****************",
    Accept: "application/vnd.github.everest-preview+json",
    "Content-Type": "application/json",
    "Content-Length": Buffer.byteLength(postData),
    "User-Agent": "nodejs request",
  },
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

3. Register webhook in Strapi dashboard

Register webhook on EC2 in Strapi dashboard

image

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

Discussion (0)

Forem Open with the Forem app