For those who just want to see the source and get into it:
https://github.com/loupeen/aws-cdk-frontend-pipeline

Ok, I am going to keep this post short. To be honest, frontend pipelines can be crazy easy or stupidly hard to achieve in AWS. One easy way is Amplify, that is easy, or CodeStar, but if you know your AWS, that is not the best way when it comes to separating your applications in AWS referring to https://aws.amazon.com/organizations/getting-started/best-practices/

Architecture

So I made this little cdk-helper to easily setup and create new pipelines for multi-account setups. It is based on CodeCommit (for now), CodePipeline, S3, Lambda and CloudFront.

Architecture is something like

As you can see there are two CodePipelines, one is for setting up the AWS services in all accounts you want the frontends to be deployed, and the other CodePipeline is just for building the frontend and deploying it to a S3 bucket.

Infrastructure CodePipeline

A pipeline that creates the resources in all specified frontend accounts (eg. Test, QA and Production)

Some of the resources

The main resources the infrastructure CodePipeline creates is following;

S3 Bucket Frontend — the bucket where the frontend pipeline publish the built frontend.

Lambda Copy — a lambda that listens on changes in the S3 Bucket Frontend, and when something is changed (the pipeline publish new version) it copies it to the S3 Bucket CloudFront.

S3 Bucket CloudFront — a bucket where CloudFront serves files from.

Lambda Cache Invalidation — a lambda that listens on changes in S3 Bucket CloudFront and is for invalidating the cache in CloudFront so we can get the updates asap.

CloudFront — So we can have a secure frontend with HTTPS.

Optional resources

If route53 configuration is specified in the configuration.

ACM — Just a SSL certificate for CloudFront.

Route53 Alias — Alias pointing to the CloudFront specified.

But why two buckets? I had some problems with owner of objects in buckets when only using one bucket. Tried to use a lambda to just update the permissions of all files, but it failed. So using two buckets was the fastest way to fix the permissions problem.

Frontend pipeline

A pipeline that just builds the frontend for every environment and publish it to a bucket in that environments account. But why do we build the frontend multiple times? So we can configure specific environment settings per account, for example different AWS Cognito user pools.

Frontend app

For this frontend I have just used Create React App to fast and easily create a frontend.

npx create-react-app my-app — template typescript

And the build pipeline is also using the stack as parameter to REACT_APP_STAGE in the build step. There will be another blogpost about this later on.

Don’t forget
Bootstrap all accounts as well that you wish to deploy your application to.

cdk bootstrap aws://2222222222222/eu-north-1 — trust 111111111111
cdk bootstrap aws://3333333333333/eu-north-1 — trust 111111111111