Welcome to this tutorial on deploying an S3 static site with CDK pipeline!
In this tutorial, you will learn how to set up a CDK pipeline to deploy a static site to Amazon S3. We will cover the entire process, from creating the necessary infrastructure using AWS CDK to automating the deployment using codepipeline.
You can find the complete code on github here
This tutorial assumes you have AWS installed and configured on your local machine. If not, you can follow the instructions here to install and configure the AWS CLI.
Make sure the the configured profile has permissions to provision AWS resources. to make things simple the profile I used had an AministratorAccess policy attached to it.
Lets install aws-cdk:
Verify the installation by running the following command:
AWS CDK requires certain resources and permissions to be able to deploy apps for you. for example,
S3 buckets to store build artifacts and iam executation roles.
Let's bootstrap the CDK environment by running the following command:
Before we continue, let's cleanup some boilerplate code that we don't need. Open the lib/infra-stack.ts file and remove the HelloCdkStack class and the HelloCdkStackProps interface.
We're going to use the aws_codepipeline construct to create our pipeline. the pipeline will have 3 stages:
Source stage -> getting the source code from github
Build stage -> building the VITE application inside a codebuild project
Deploy stage -> deploying the built application to an S3 bucket with a cloudfront distribution in front of it.
In the AWS console, navigate to AWS Secret Manager service and store a plaintext secret. I named mine github_token2, you can name yours whatever you want.
We will use this secret to authenticate with github in the GitHubSourceAction constructor.
We will use AWS CodeBuild service to build our Vite application into a production ready bundle. the bundle will be outputed by the build action as an artifact
and is stored in an artifacts s3 bucket.
We will use S3 deployment action to deploy the built application bundle to our s3 bucket.
The output of the previous stage will be the input for this stage.
Before we continue with the deploy stage, we need to create s3 bucket and a cloudfront distribution to serve our static site.
We create an S3 bucket that we're going to use to host our static site. We set the websiteIndexDocument to index.html to enable static website hosting.
We add a policy statement to allow public read access to the bucket.
viteSidteOAI is an identity used to by the cloudfront distribution to access the s3 bucket objects securely. and forwards them to the requester.
Learn more more about cloudfront OAI here
We create a new cloudfront distribution with the s3 bucket as the origin. We set the viewerProtocolPolicy to ALLOW_ALL to allow both http and https requests.
Finally we create a new S3DeployAction to deploy the built application to the s3 bucket.
Currently, we can trigger a pipeline run by pushing changes to the master branch.
Our site will be updated as expected, but Cloudfront cache will still be stale.
We can add a cache validation lambda function to the pipeline to invalidate the cloudfront cache after a successful deployment.
Learn more here
We will cover this in a follow up posts. Happy coding!!