Origin for a CDN

I have some basic questions regarding configuring the CDN. I am using Amazon CloudFront for that.

1) Let's suppose my website is example.com. In the origin of cloudfront, do I mention example.com as the origin or create a CNAME like cdn.example.com which points to the server and then enter cdn.example.com as the origin?

2) Once the configuration is done, do I redirect example.com to the cloudfront domain like dxxxxxx.cloudfront.net?

3) I will update all the links in my website to http://dxxxxxx.cloudfront.net/xxx. Now when I browse example.com, I will be redirected to cloudfront. But cloudfront is also using the example.com as the origin. Isn't it like cloudfront is trying to pull data from itself? Won't that create a dead loop?

I am not able to get my head around this. I will be really grateful if someone could help. Thanks!!

Solution

Here is how it works.

Your website is at example.com where all the static files are hosted that you want to serve through Cloudfront. This example.com is called the Origin Server, Origin Host, or simply the Origin.
Cloudfront will create a Pull Zone for you that will look like http://dxxxxxx.cloudfront.net - Now you have to use this host instead of the original example.com for your static assets. All HTML files or dynamic files will still be loaded directly through example.com . Users will still enter example.com in their browser. Only the scripts, styles, images, fonts, icons and similar static files that are loaded by the browser behind the scenes are required to be changed to use the CDN host.
Your CDN setup is complete at this point. However, if someone looks at the source code of your page, they can see the cloudfront URLs being used to deliver static assets. This may look unprofessional. As a solution to hide 3rd party Host Name, and to use your own host name to get a branded feel, you can create a new subdomain cdn.example.com at your DNS provider and CNAME it to dxxxxxx.cloudfront.net
If you created a CNAME subdomain above, you now have to update all URLs of static files again, and change their URL to use cdn.example.com . Your website will still be loaded over example.com, but assets will now be delivered through cdn.example.com that will point to dxxxxxx.cloudfront.net
When dxxxxxx.cloudfront.net will receive request from browser for static files, it will forward that request to the specified origin server example.com where the files are actually placed. Origin will send the files to cloudfront, cloudfront will save the file for future use and will send a copy to the browser.

Step 3, and 4 are not part of the CDN integration process. Also, the subdomain cdn.example.com is not a requirement. You can use some other subdomain, or some other domain. For example, the following are valid:

cdn2.example.com
static-assets.example.com
static.assets.example.com
images.example.parent-company-website.com

Similarly, it is not a requirement to fetch assets from example.com only. You can specify my-other-website.net as origin, and cloudfront will happily fetch resources from there for your example.com site.

In your scenario, all of the following are not dependent on each other. You can change any or all of these and the process will not break providing you made necessary adjustments to the configuration and the code.

Your website:  example.com
CDN origin:    example.com (since currently assets are at this host)
Pull Zone:     http://dxxxxxx.cloudfront.net/
CNAME Host:    cdn.example.com

Hope this clears the picture.