AWS S3 is perfect to host static websites. Basic setup when you have a CNAME DNS record pointing to the bucket endpoint covers a lot of use cases. Couple of things missing are
- SSL
- continuous delivery.
For SSL you need CloudFront to serve as a global load balancer and provide SSL offload.
To achieve continues delivery connect the GitHub repo storing the source to CodePipeline. CodePipeline is triggered at every push to the master branch and automatically updates the content of the S3 bucket with changes source files.
Stack
Let’s first create a CloudFormation stack that will create
- S3 bucket - a regular bucket to store the files
- BucketPolicy - to allow the read from the bucket
- Route53 HostedZone - this is a placeholder for DNS records. Once created NS servers can be obtained from here. I’m registering domain names on GoDaddy, so I set NS servers there. It will also hold A record pointing to CloudFront
- Route53 RecordSet - the A record pointing to CloudFront. It should refer to a CloudFront hosted zone (Z2FDTNDATAQYW2) as an alias target, not the one created above
- SSLCert - the SSL certificate. It’s free from AWS and when the stack is being created the owner of the AWS account should receive an email with a confirmation link
- CloudFront Distribution - load balancer that binds it all together. It refers to SSL and drives traffic to S3
Pipeline
CodePipeline is ideal to deliver changes fast. In the case of static website, it’s possible to just run aws s3 sync from the command line, but local changes might divert from the remote repo.
The pipeline creates a separate S3 bucket to store artifact - specifically the files it got from GitHub. The pipeline itself consists of 2 steps:
- source - it will monitor changes in the master branch. For that to work an access token should be created in GitHub
- deploy - it will get the files from the artifact store and upload it to S3 hosting the website
Cloudformation templates for stack and pipeline are available here.