Cookies are used for the best experience on my website.

Accept Cookie Policy

No internet detected

Check your connection and try again.

Logo Image

No match found

Buy a coffee

I launched this blog in 1995. Since then, we have published 1603 articles. It's all free and means a lot of work in my spare time. I enjoy sharing knowledge and experiences with you.

Your support

Have you learned something new by reading, listening, or watching my content? With your help, I can spend enough time to keep publishing great content in the future.

Or, select an option below:

A small slice of my data processing time each month

It's ongoing work running this site and what's really great is ongoing support. Here's a sense of what goes into this site: research topics for discussion. Manage the Tech stuff: website, SEO, graphics, email, back-end servers, DNS routing, edge servers. Create advertisements and load the campaigns in Google Ads. Manage the social media forums (Facebook, Reddit, Twitter). Write updates to the blog. Keep GitHub up-to-date.

$4.50 — A large cappuccino at my local

Things just work better with coffee! I like to take the kids to school then grab a cappuccino from my local on the way home before beginning the things that take mental energy.

$8.99 — A month of Netflix for some quiet nights in

A lot of the work on this happens after hours when I should be relaxing on the couch. Help me make it so and I promise to keep off the devices for a bit!

$11.50 — Fund a month of email delivery

This site sends out thousands of emails every month. For that volume and to ensure deliverability, I need to pay MailChimp.

$20 — Pay for one month of AWS storage fees

Websites are not free. The storage alone takes some cash. If you are willing to lighten the burden, we can keep this site up online.

$30 — One hour's pay for a graphics artist

Art doesn't create itself without a hand to guide it. I can't draw, so I need to pay others to help.

$45 — Pay a full-stack web developer for one hour

Much of the work on this site happens on weekends which means giving up time with the kids. Help me pay the developers so I can give my kids more time.

AWS CloudFront CI/CD Pipeline With ECS and GitHub

When your source code becomes too big for Github actions ⋯


Richie Bartlett, Jr.

  • 670

  • 5173

  • 1

  • 0

  • 0

Intro 🔗

This is part two of a mini series on my journey to build my own blogging site without using WordPress or any blogging site like Tumbler or Medium. I want full control of my published thoughts. This includes if and how I should share my data with advertisers and crawlers.

I assume you are comfortable with using AWS, git, VScode, and docker. There are other sites that discuss how to get started with AWS, GitHub and programming.

Architecture Diagram 🔗 Architecture

Tools 🔗

  1. VScode
  2. Git
  3. Docker
  4. NodeJS
  5. HEXO
  6. AWS CLI

CloudFront LambdaEdge scripts 🔗

  1. pull script from git repo
  2. publish to AWS Lambda (US-1:Virginia)
  3. add trigger to CloudFront

Pipeline infrastructure 🔗

  1. GitHub
  2. Docker
  3. Amazon ECS & ECR
  4. AWS S3
  5. AWS Lambda
  6. AWS CodePipeline
  7. Amazon SNS
  8. Amazon SES
  9. Amazon DynamoDB

Containerization 🔗

  1. Install docker locally
  2. Setup environment
  3. Build the container
  4. Push to ECR

Build the Prod pipeline 🔗

This is the branch that hosts the live website. When you visit my blog, you are viewing the production code. This branch will have all the features that passed code review, multiple test users, multiple test devices for various screen sizes, and SEO verification.

Production requires minimizing the amount of data sent across the networks. As such, the website must have all the comments and white-space removed. Furthermore, the scripts must be minified and obfuscated.

  1. Setup CodePipeline to detect new push.
  2. Run docker and rebuild environment
  3. Obfuscate the JS code
  4. Minify HTML, CSS, and JS

Pipeline logic 🔗

  1. Listen for repo push updates (via EventBridge)
  2. Run ECS instance (from Lambda)
  3. Pull latest code from origin branch
  4. Run automation scripts
  5. Update website storage

automation scripts 🔗

  1. download the github repo
  2. update nodeJS
  3. Update NPM (packages to latest stable)
  4. Install/update the node modules for project
  5. run: npm run build
  6. remove comments and minify / uglify all code
  7. empty the S3 bucket (only 1x a month; otherwise, overwrite)
  8. compile the website. If error, abort S3 updates and send notification
  9. Copy /public/ folder to S3
  10. Invalidate the CloudFront cache
  11. Send completion notice.

Dev pipeline 🔗

The development environment employs only a handful of my posts while focusing on feature rollouts. They don’t need a lot of RAM or CPU to compile the site. This makes it very easy for my development team to build the site and test it before code review and production.

This environment is very basic and simple. To accommodate the troubleshooting process, all comments and scripts are left intact. No minification or uglifying (obfuscation).

PreP pipeline 🔗

The pre-production (or PreP) environment combines the codebase from the dev branch and all the posts (plus assets) from production. This is the ultimate test environment for how the site would feel and perform. If a feature that worked in dev fails here, it doesn’t get rolled to production. Again, No minification or uglifying (obfuscation).

Reference 🔗

This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. The license allows for commercial use. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.