Is there something needs to be done in external website to configure for AWS Cloudfront?

I decided to delete my original answer and give you a step by step of what to do based on what I just did. I created two identical web pages, called fast.html and slow.html; the only thing they do is load 9 very big images, which I got from here https://effigis.com/en/solutions/satellite-images/satellite-image-samples/, totaling 335 Megabytes. The slow.html web page will load the images from the images directory on my machine. The fast.html web page will load the images from the CloudFrond distribution, which in turn gets the images from an S3 bucket to which I upload the images. So, step by step, here it is.

1. Create an S3 bucket called cf-big-images and inside the bucket create a folder called images

2. Upload the images to the bucket. I copied them from the images folder in the root of my Apache web server with the command aws s3 cp . s3://cf-big-images/images --recursive

3. Go into the images folder in the S3 bucket and make them public; this is set readonly for the public.

4. In CloudFront create a distribution. You only need to fill the field "Origin Domain Name". Click the field and you will see your S3 bucket there "cf-big-images.s3.amazonaws.com"; select it. [Note: I had this wrong on my original message]

5. That's it. Click on "Create Distribution" and wait. It takes quite a bit.

6. Change the fast.html web page. On my slow.html page I had:

<img src="images/Img15.jpg">
<img src="images/Img16.jpg">
<img src="images/Img17.jpg">
<img src="images/Img18.jpg">
<img src="images/Img34.jpg">
<img src="images/Img41.jpg">
<img src="images/Img48.jpg">
<img src="images/Img58.jpg">
<img src="images/Img100.tif">

On the fast.html web page I have:

<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img15.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img16.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img17.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img18.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img34.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img41.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img48.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img58.jpg">
<img src="https://d1pqzepyfmpq4.cloudfront.net/images/Img100.tif">

7. Then, clearing the cache each time, I navigated to the slow.html and to the fast.html pages to run some tests; the CloudFront appears to be significantly faster, but this was not a controlled test. Here are some pictures:

Hopefully it makes sense now.

Here's how the general process should work:

1. user access the site https://example.com
2. example.com resolves to yourcdn.cloudfront.net
3. cloudfront checks the rules (there's a lot to unwrap here, but let's assume it's a cacheable content
4. cloudfront access your site's server on the user's behalf and stores the returned content
5. cloudfront then returns the response to the user

For the next user, steps 1, 2, 3 and 5 are run. Your site receives no more traffic.

Here's what you need for this setup

1. DNS www.example.com and @.example.com pointing to yourcdn.cloudfront.net

WWW

• www is just a CNAME, game over

@

• @ is the apex domain, which is the tricky part if you're not using aws's route53

• @ only accepts A records, which you don't have for your cloudfront entpoint.

• @ if you are using Route53 aws provides you with an ALIAS CNAME, which solves this dilema

• if you are not using Route53, things get more complicated. You will have to find a way (either a hosted service or third party) that will let you point @.example.com to their IP, and redirect to www.example.com

• you could have a static nginx rule that only redirects to www.example.com

  server {
      server_name example.com;
      return 301 $scheme://www.example.com$request_uri;
  }
  

That won't solve it for everyone, there are a few cases where people also use a CDN distribution as shield from the internet, which is could be called a WAF (web application firewall) and is supposed to keep you nice and hidden from internet monsters and in some cases as cloudfront + aws can provide you with some additional protection, traffic filtering etc. Giving up your server's IP for the apex domain, kind of violates that approach.

Now, you're all set for receiving traffic. And defining rules! Which is the fun part.

To be continued

You can only do this if the hosting company gives you permission for DNS management.(if yes, then you can do that).Check your real server URL. (Or in DNS where your domain is mapped) Once you have that value, you need to try to create a Cloudfront distribution with that origin. and mapped the domain to Cloudfront url.

Or you can move to DNS management to Route 53. You have to create multiple records in route 53 records. Let me explain a bit.

1. You need to create a public hosted zone.(You will get Name server) and create Name server mapping in DNS Management (mysite.com)
2. You need to have a Mysite.com mapped to CloudFront distribution. Later you need to map your hosting link of the website (Basically public server) to CloudFront Origin.
3. if that's not possible you need to create one S3 bucket same as your domain and redirect all to the public URL of the real server.

Thanks

Ashish