How to deploy a static website with CloudFront

In this article we shown how to deploy a static website with S3. Here you will learn how to keep the website files privately stored in S3, and expose them through CloudFront to the public. The advantages of doing so are:

• Latency is reduced. Content is cached on edge locationds by CloudFront, close to where the user do the request
• It’s possible to attach a SSL certificate
• Content is exposed through edge locations while keeping it private on the S3 bucket

1. Create a public S3 bucket

Have a look at this guide to create a website with S3 (skip section 4 as you will have to connect your custom endpoint to the CloudFront distribution in this guide, not to the S3 bucket). Then follow the next steps to connect it to CloudFront

2. Create a CloudFront distribution

• Go to CloudFront and create a new distribution
• Select the origin domain to be the S3 bucket containing your static website and then click on Use website endpoint. Keep in mind that in order to use this option your S3 bucket must be public
• Leave all the other options as default and save
• Check that the website is accessible from your distribution. You can find the distribution URL under General > Details > Distribution domain name

Important: If you apply any changes to the CloudFront configuration, notice that the content is cached, so you will probably not see any changes in the website until the TTL expired. To speed up this process, you can create an Invalidation to empty the cache. To do so:

• Go to Invalidation and click on Create Invalidation
• Add /* in the object paths in order to evict the intere cache
• CLick on Create Invalidation and wait untile the process is finished

3. Use a custom domain

• Go to Route53, click on Hosted zone and then click on the hosted zone of your domain
• Click on Create record and apply the following configuration
• Record type: A
• Alias: On
• Route traffic to: Alias to CloudFront distribution
• Select your CloudFront distribution

Now create another record to redirect www to the same domain, with the following config:

• Record type: A
• Alias: On
• Route traffic to: Alias to another record in this hosted zone
• Select the record that you created in the previous step

4. Configure SSL

First thing, you need to create a SSL certificate:

• Go to AWS Certificate Manager (ACM)
• Click on Request certificate and configure it with the following:
• Certificate type: Request a public certificate
• Fully qualified domain name: your-website-domain.com
• Click on Add another name to this certificate and set the other name as www.your-website-domain.com
• Validation method: DNS Validation
• Click on Request

Now you have to attach your certificate to CloudFront:

• Go to your CloudFront distribution, click on General and then under the Settings section click on Edit
• Apply the following config:
• Alternate domain name (CNAME): add the domains specified in your ACM certificate
• Custom SSL certificate: select your ACM certificate
• Click on Save

To redirect traffic from HTTP to HTTPS:

• Go to Behaviours. There should be only one behaviour here, select it and then click on Edit
• Set Viewer protocol policy to Redirect HTTP to HTTPS
• Click on Save

Conclusion

Congratulations, you have successfully created a website with S3 and CloudFront! Thanks to CloudFront your user will experience much less latency, due to to the AWS edge locations, where the content will be cached. Have a look at this to find out how to do the same with a private bucket. Also you can read this article to have an understanding of the pricing impact of CloudFront.