How to Use CloudFront to Serve a Static Website? AWS

The following steps below are to set up an Amazon CloudFront distribution with the S3 endpoint type as the origin. As the origin, use a REST API endpoint with OAI.

1. access restrictions. We utilize the Amazon S3 console to establish a bucket and upload the website files.

  1. Next, we’ll set up an Amazon CloudFront web distribution.

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

a) The bucket we built has an origin domain name.

b) Bucket Access Restrictions: Yes.

c) Create a New Identity for Origin Access.

d) Note: This is the default value. Alternatively, we might give the OAI a unique label.

e) Grant Bucket Read Permissions: Yes, the Bucket Policy should be updated.

3. To configure SSL, pick Default CloudFront Certificate from the SSL Certificate drop-down menu. Alternatively, you can use a Custom SSL Certificate.

To request a new certificate, we can choose Request or Import a Certificate using ACM.

If we have any Alternate domain names (CNAMEs) for the distribution, they should all be compatible with the SSL certificate we choose.

  1. Finally, we choose to Create Distribution.
  2. The DNS records for the website’s CNAME must be updated to link to the CloudFront distribution’s domain name.
  3. After that, we’ll wait for the DNS updates to take effect.

As the origin, use a website endpoint with anonymous access. This grants public read access to the bucket on the website.

  1. We utilize the Amazon S3 console to create a bucket and enable static website hosting.
  2. We copy the bucket’s Endpoint sans the http:// from the Static website hosting dialogue box.
  3. Finally, we build a bucket policy that grants public read access to the bucket we created.
  4. Finally, we’ll set up a CloudFront web distribution.
  5. We set up SSL in the same way we did in the previous step, using either the Default CloudFront Certificate or a Custom SSL Certificate.
  6. Finally, we choose Create Distribution.
  7. Change the domain’s DNS records to point the CNAME of the website to the CloudFront distribution’s domain name.
  8. Finally, we wait for the adjustments to take effect.

Use a website endpoint as the origin, with a Referrer header limiting access.

  1. We utilize the Amazon S3 console to create a bucket and enable static website hosting.
  2. From the Static website hosting dialogue box, we copy the bucket’s Endpoint without the leading http://.
  3. Next, we’ll set up a CloudFront web distribution.

We enter a random or secret value to restrict access to the origin.

  1. We set up SSL in the same way as before, using either the Default CloudFront Certificate or a Custom SSL Certificate.

5. Finally, we choose Create Distribution.

  1. Next, we’ll use the Amazon S3 console to access the website’s bucket.

After that, we implement a bucket policy that lets us to use s3: GetObject. This is subject to the condition that the request contains the custom.

On the other hand, any request that does not include the custom Referrer header would be denied access.

To do so, we employ a bucket policy with an explicit deny statement.

  1. We then alter the domain’s DNS records to link the CNAME of the website to the CloudFront distribution’s domain name.
  2. Finally, we must wait for the DNS adjustments to take effect.

At Velan, our server support engineers can help to set up Amazon CloudFront to Serve a Static Website. If you are interested in our service, please fill the Quick connect form to get in touch with us.

Credentials

Quick Connect With Us