AWS Amplify Webhook Requests in Directus

This website, rahtz.net, uses a CI/CD workflow to trigger an automated site build any time code changes are pushed to GitHub. This is great for structural and functional changes to the site, but what about when content gets updated? As described in my article about site speed, content management is completely decoupled from this site’s hosting on AWS Amplify, so there’s no intrinsic method to rebuild the site when content updates are made. Pushing code changes to trigger a site build for new content was not going to be ideal.

In order to close this gap, I took advantage of two features: one from Amplify and one from Directus, the CMS for this website. In Amplify, I first had to set up two incoming webhooks–one for the development site and one for production.

Sending a POST request to these webhooks will trigger the build and release process in Amplify, outside of pushing any code changes in git. Next, I had to configure a way to send requests to the hooks from my CMS. 

In Directus, I used a feature called Flows, which “enables custom, event-driven data processing and task automation within Directus. Each flow is composed of one trigger, followed by a series of operations.” I didn’t want to trigger a site build anytime I updated an article, page, or any other collection. I wanted something more intentional and specific. So I created new singleton collections in Directus (development/production) and tied the webhooks to those. The build collections have only three fields: id, date_updated, and build_note, which acts as a sort of commit message when updating the collection.

I then created a Flow for both the production site build and development site build. The trigger for the production Flow is an update action on the Trigger Site Build collection. And the operation it performs is a Webhook/Request URL using the webhook address I created in AWS. 

At first, the request was not triggering the Amplify build as intended, though I knew the Flow had been activated. Looking at the sample cURL request provided by Amplify, I could see that there was a Content-Type defined in the header of the request.

The default webhook request operation in Directus contains no header information, so I had to add a Content-Type header.

Now, anytime I want to relaunch the site with new content, I head over to my Trigger Site Build collection, enter a new message in my build note, then save. This save/update event triggers the flow, which sends a request to Amplify, which builds and releases a new version of the site.