AWS CDK CUSTOM CONSTRUCT

Custom Aws Cdk CodePipeline made for build, deploy, cloudfront invalidation(optional) for static websites.

Multi stage pipeline(using aws-cdk-lib.pipelines) example code is in github repo.

Purpose

• Make CodePipeline for frontend, triggered only by source trigger action. Enable to work independently with entire Cdk Pipelines.
• Pass environment variables referencing other aws-cdk resources to frontend when build. So can use different environment variables with each ci/cd stage.(e.g. dev, prod, ...).

Need to know

• If you want to change build image, check runtime compatible.
• This custom Codepipeline will be executed once when creation, but not when update. After creation, it will be only triggered by Source Action defined in Source Stage.
• It will automatically empty the S3 bucket before deploy the build output. Be aware of that.
• Cloudfront Invalidation will invalidate all files in the cache. It will cost as 1 path. Aws Doc
• Invalidation Stage might take long time(set timeout to 20 mins. But usually end ~ 5 mins). Because createInvalidation often fails especially when do it again in a short time.
• Peer Dependencies Version recommendation(It's obvious you are using aws-cdk-lib and constructs)
  • "aws-cdk-lib": "^2.32.1" - If you use aws_codebuild.LinuxBuildImage.STANDARD_6_0 (which is Nodejs 16 runtime available), you should use 2.32.1 or new version.
  • "constructs": "^10.0.9"

CodePipeline Description

Stages	Description	Aws Cdk Resources Used
Source	input source action for website (ex.github, codecommit)	CodeCommit, Github,.. as input choice
Build	build project of input source	CodeBuild
PreDeploy	empty S3 bucket before deploy	Stepfunctions (2 lambda with aws-sdk)
Deploy	deploy the build output to S3	CodePipeline S3DeployAction
Invalidation (optional)	If you are using Cloudfront, cache invalidation will be done.	Stepfunctions (2 lambda with aws-sdk)

Usage

// destination bucket where to put static website build
declare websiteS3Bucket: aws_s3.IBucket;
// cloudfront distribution using websiteS3Bucket as an origin.
declare cloudfrontDistribution: aws_cloudfront.IDistribution;

// this is where to use BuildDeployStaticWebsite
new BuildDeployStaticWebsite(this, 'PipelineFrontend', {
    // you can use BuildDeployStaticWebsiteSource for source action, 
    source: BuildDeployStaticWebsiteSource.codeCommit(
        aws_codecommit.Repository.fromRepositoryName(this, 'CodeCommit', 'aws-cdk-custom-build-deploy-static-website-frontend'),
        'main',
    ),
    // or directly use SourceActions in aws_codepipeline_actions
    source: new aws_codepipeline_actions.CodeCommitSourceAction({
        actionName: 'CodeCommitSourceAction',
        output: new aws_codepipeline.Artifact('sourceArtifact'),
        repository: aws_codecommit.Repository.fromRepositoryName(this, 'CodeCommit', 'aws-cdk-custom-build-deploy-static-website-frontend'),
        branch: 'main',
    }),
    // install script for website build
    installCommands: ['yarn set version stable', 'yarn install'],
    // run script for website build
    buildCommands: ['yarn test', 'yarn build'],
    // you can reference aws cdk resources into website build environment variables like below
    environmentVariables: {
        REACT_APP_TEST: { value: cloudfrontDistribution.distributionDomainName },
    },
    // The build output files will be deployed to this bucket.
    // bucket files will be all cleaned up before deployment.
    destinationBucket: websiteS3Bucket,
    // If this value is set, all files in the distribution's edge caches will be invalidated after the deployment of build output.
    cloudfrontDistribution: cloudfrontDistribution,
    /** there is some optional props more. */
});