Wondering how to serve Static Website using CloudFront? We can help you.

Recently, we had a customer who wishes to host a static website on an Amazon S3 bucket. In addition, serve the website through an Amazon CloudFront distribution.

Here, at Bobcares, we assist our customers with several AWS queries as part of our AWS Support Services.

Today, let us see how to perform this query.

Serve Static Website using CloudFront

In order to configure a CloudFront distribution with the S3 endpoint type to use as the origin, our Support Techs recommend the steps below.

Use REST API endpoint as the origin, with access restricted by an OAI

1. To create a bucket and to upload the website files, we use the Amazon S3 console

2. Then we create a CloudFront web distribution.

In addition, for the use case, we enter the following:

a) Origin Domain Name: the bucket that we created.
b) Restrict Bucket Access: Yes.
c) Origin Access Identity: Create a New Identity.
d) Comment: The default value. Or, we can enter a custom label for the OAI.
e) Grant Read Permissions on Bucket: Yes, Update Bucket Policy.

3. To set up SSL, for SSL Certificate, we select Default CloudFront Certificate. Or, the Custom SSL Certificate.

We can select Request or Import a Certificate with ACM to request a new certificate.

If we have any Alternate domain names (CNAMEs) for the distribution, then they should match the SSL certificate that we select.

4. Then we select Create Distribution.

5. We need to update the DNS records to point the website’s CNAME to the CloudFront distribution’s domain name.

6. Once done, we wait for the DNS changes to propagate.

Use a website endpoint as the origin, with anonymous access

This allows public read access on the website’s bucket.

1. To create a bucket and to enable static website hosting, we use the Amazon S3 console.

2. From the Static website hosting dialog box, we copy the Endpoint of the bucket without http://.

3. Later we add a bucket policy that allows public read access to the bucket we create.

4. Then we create a CloudFront web distribution.

5. Like the previous step, we set up SSL, either Default CloudFront Certificate or Custom SSL Certificate.

6. After that, we select Create Distribution.

7. Update the DNS records for the domain to point the website’s CNAME to the CloudFront distribution’s domain name.

8. Then we wait for the changes to propagate.

Use a website endpoint as the origin, with access restricted by a Referer header

1. To create a bucket and to enable static website hosting, we use the Amazon S3 console.

2. Then we copy the Endpoint of the bucket without the leading http:// from the Static website hosting dialog box.

3. After that, we create a CloudFront web distribution.

To restrict access to the origin, we enter a random or secret value.

4. Like the above, we set up SSL, either Default CloudFront Certificate or Custom SSL Certificate.

5. Eventually, we select Create Distribution.

6. Now, we need to open the website’s bucket from the Amazon S3 console.

Then, we add a bucket policy that allows s3:GetObject. This has a condition that the request includes the custom Referer header that we specify.

On the other hand, we can block access for any request that doesn’t include the custom Referer header.

To do so, we use an explicit deny statement in the bucket policy.

7. Later we update the DNS records for the domain to point the website’s CNAME to the CloudFront distribution’s domain name.

8. Finally, we wait for the DNS changes to propagate.

[Need help with the configuration? We’d be happy to assist]

Conclusion

In short, we saw how our Support Techs go about Static Websites using CloudFront.