Quickly spin up a headless Wordpress CMS on AWS usingĀ Docker
Creditāāāhttps://www.superdesk.org/news/headless-cms
Headless CMS is very popular at the moment. But what is a headless CMS and why should I start using one?
A headless CMS is a backend that is decoupled from its frontends. The backend is where the content is created and published. Whereas the frontends are where the content is displayed (web, mobile apps, set-top box, Alexa, etcā¦).
For example, a traditional CMS is a single website. The same website is used to add the content as it is to display the content. The backend and frontend are coupled.
A headless CMS is only used to created and publish content. That content is then available through anĀ API. The website or mobile apps, for displaying the content, are separate.
But why is decoupled better? Here are some of the reasons:
- Faster and more flexible content delivery than traditional CMS
- Resiliency in the face of changes on the user interface side (future-proof)
- Rapid design iterations
- Enhanced security
- Fewer publisher and developer dependencies
- Simpler deployment
*** Thanks for the list Brightspot
Now that we all emphatically agree that headless CMS is the way to go. Letās take a look at these awesome CloudFormation templates I created to help you spin up and manage your headless (Wordpress) CMS.
To be clear, this is a Wordpress installation running on AWS using Infrastructure as Code and Docker.
Waitā¦ Why use Wordpress and not one of these cool new headless CMS services like Contently or Cosmic JS? Well, these services are really great but they cost a lot of money, and I usually like to run everything myself, if I can help it. Andā¦ Wordpress is really good at managing content.
But how can Wordpress be a headless CMS? Easy, it has an API.
The trick is making Wordpress stateless so that it can autoscale, and run on AWS, with zero-downtime deployments.
Ok, headless CMS is cool, Wordpress is pretty cool, let's continue.
rgfindl/headless-wordpressHeadless Wordpress - AWS - Easy Setup. github.com
Architecture
Our Wordpress instance is running as an Elastic Container Service using Docker.
First we have the VPC, then an ECS cluster, then an EC2 instance, and finally an ECS service with tasks. Our Wordpress service is exposed to the world via an Elastic Load Balancer. Weāre using RDS as our MySQL database.
Our Wordpress service is stateless, which means we canāt rely on the file system to store content, like Wordpress Media or Plugins. Every time an instance of our Wordpress service is spawned it will only have the files that are baked into our Docker image.
Letās take a look at how we handle Wordpress Media first.
We use a plugin called WP Offload Media. This plugin allows us to store the Media in S3 and use CloudFront as the CDN. Take a look at the diagram below. We also use the same CDN to cache the Wordpress APIā¦
Now how do we handle the Plugins? (We can ignore Templates because this is headless š)
Remember when I talked about baking things into our Docker image? Thatās itā¦ We have to include the Plugins in our Docker image. Letās take a look at that Dockerfile and go through it.
As you can see our Dockerfile is really simple. It extends the latest Wordpress image and then installs 3 Plugins. It downloads, unzips, and copies each plugin to the wordpress/wp-content/ directory. When you launch your Wordpress site for the first time youāll have to activate these plugins. The activation status is stored in MySQL so you wonāt have to do it every time your ECS tasks recycle.
Installation
Alright, letās get this architecture installed. First a few prerequisites.
Prerequisites
Install the following prerequisites:
- AWS Account
- EC2 Key Pair
- cimāāā(
npm install -g cim) - AWS CLI
Stacks
Now letās install each stack one at a time.
- VPC
- ECS
- RDS
- ECR
- Wordpress
VPC
This creates the Amazon Virtual Private Cloud that our ECS cluster and RDS database will run in.
Amazon Virtual Private Cloud (Amazon VPC) lets you provision a logically isolated section of the AWS Cloud where you can launch AWS resources in a virtual network that you define.
cd vpccim stack-up
ECS
This creates an Elastic Container Service that our EC2ās will run in.
Amazon Elastic Container Service (Amazon ECS) is a highly scalable, high-performance container orchestration service that supports Docker containers and allows you to easily run and scale containerized applications on AWS.
cd vpccim stack-up
RDS
This creates a Relational Database Service database cluster that our Wordpress application will use.
Amazon Relational Database Service (Amazon RDS) makes it easy to set up, operate, and scale a relational database in the cloud.
cd rdsexport DatabaseUsername="???"; export DatabasePassword="???"; cim stack-up
ECR
This creates an Elastic Container Registry that will hold the docker images of our wordpress service.
Amazon Elastic Container Registry (ECR) is a fully-managed Docker container registry that makes it easy for developers to store, manage, and deploy Docker container images.
cd ecrcim stack-up
Wordpress
Before we can launch this CloudFormation stack. We need to push our Wordpress image to ECR.
Push Image
cd wordpress/src
aws ecr get-login --registry-ids <account-id>- copy/past output to perform docker login, also append
/headless-wpto the repository url.
Build Image
docker build -t headless-wp:<version>Ā .
docker tag headless-wp:<version> <account-id>.dkr.ecr.<region>.amazonaws.com/headless-wp:latestdocker tag headless-wp:<version> <account-id>.dkr.ecr.<region>.amazonaws.com/headless-wp:<version>docker push <account-id>.dkr.ecr.<region>.amazonaws.com/headless-wp
Update Version
Make sure the Version parameter, in _cim.yml, matches the version tag from above. The ECS Task Definition will pull the image from ECR.
Stack up
Once the Version is set you can use cim stack-up to update the stack with the new version.
cd wordpresscim stack-up
Congratulations, your new Wordpress site is now available.
First run through the Wordpress setup wizard.
Next enable some of the plugins we added.
Add a few blog posts and pages.
Then check out the API. Ex: https://<cdn-url>/wp-json/wp/v2/posts
Environment Variables
Congratulations on getting your Headless Wordpress installed. If you got stuck anywhere along the way please donāt hesitate to reach out to me for help.
One thing I want to explain is the Wordpress environment variables because they really tie everything together. They tell our Wordpress installation about the RDS database, the Media S3 bucket, and CloudFront CDN URL. Letās take a look. These can be found in the Wordpress stackās AWS::ECS::TaskDefinition.
The WORDPRESS_DB_* variables are straight from the RDS stack. CloudFormation allows you to Export Output variables which can be imported in other stacks.
The WORDPRESS_CONFIG_EXTRA variable is where we configure the WP Offload Media plugin. First we tell it to use our Task Role, AWS::IAM::Role, via the AS3CF_AWS_USE_EC2_IAM_ROLE var. Then we the AS3CF_SETTINGS var to setup the plugin.
Thanks for reading. I hope you enjoyed it!