Amazon CloudFront CDN acceleration principle and configuration tutorial: "move" your website to the user's door

2026-05-27 阅读 16

Imagine you opened a hot online mall with servers located overseas. One day, a user in Tokyo opened your website and requested that it need to cross the Pacific Ocean and pass through several international submarine cable nodes to reach your server. The server will return to the original road after processing. This trip "long-distance rush" down, web page loading took 5 seconds.

In the "web page load more than 3 seconds, the user will lose half" today, this delay is fatal.

How? the answer is

CDN (Content Delivery Network)

. In the field of cloud computing, Amazon CloudFront is the top "accelerated express delivery". Today, we will use the vernacular to thoroughly deepen the acceleration principle of CloudFront, and take you hand in hand to complete a set of actual combat configuration.

1. Core Principle: How Does CloudFront Eliminate Delay?

If I could sum up the core logic of CloudFront in one sentence, it would be:

Use space for time, and "busy" static resources to the place closest to users.

To accomplish this, Amazon has created a vast network around the world that is supported by three core concepts:

[Origin Site (S3/EC2)] <---> [Regional Edge Cache (Regional Edge)] <---> [Edge Site (Edge Location)] <---> [End User]

Origin: The place where you store your original website data, such as an Amazon S3 bucket or an EC2 server.

Edge Location: Data centers deployed in cities around the world (hundreds of locations worldwide). They don't run complex business code and only do one thing-hoarding (caching data).

Regional Edge Cache (Regional Edge Cache): A "large warehouse" between the origin and the edge site ". When the edge site is out of stock, go here first instead of directly alarming the source station to further reduce the pressure on the source station.

When a user visits a website configured with CloudFront, what happens behind the scenes?

Nearby access: When a user in Tokyo initiates a request, the CloudFront directly directs the request to the local edge site in Tokyo through intelligent DNS resolution.

Cache Hit: If the edge site just caches the image the user wants to see (such as logo.png), it will directly pass the image seconds to the user. Time may only take a few milliseconds, the website to achieve seconds!

Cache Back to Source (Cache Miss): If this site is visited for the first time and there is no such picture, it will immediately "ask for goods" from Amazon's internal backbone network to the source station. After receiving the picture, it will send it to the user while saving a copy (cache) for the convenience of the next east.

Beijing users come and get it.

In addition to accelerating static files (images, CSS, JS),CloudFront can also accelerate

dynamic request

(e. g. login, API interface). Although dynamic data cannot be cached, it allows users to enter through the nearest edge site

AWS self-built global optical cable backbone network

. This is like driving a car on a "high-standard dedicated highway", completely avoiding the congestion and detours of the public network.

2. actual combat tutorial: hand-in-hand configuration of your first CloudFront distribution

Just talk about not practicing fake handholds. Let's go through the complete configuration process using the most common scenario-"Accelerate a static website/image in an Amazon S3 bucket with CloudFront.

Step 1: Create a Distribution (Distribution)

Click the Create distribution button in the upper right corner.

Step 2: Configure Origin Settings (Origin Settings)

Origin domain: Click the input box and AWS will automatically list the resources under your current account. Select the S3 bucket that you prepared (for example, my-website-bucket.s3.amazonaws.com).

Origin access: It is highly recommended to choose the Origin access control settings (OAC).💡Avoidance guide: Many novices set the S3 bucket to "fully public" for convenience ". This is very dangerous! With OAC selected, your S3 bucket can remain private and only the CloudFront has permission to read it. Users cannot bypass CDN and directly brush your S3 traffic, which is safe and economical.

Click Create new OCI to directly create a control policy using the default recommended configuration.

Step 3: Configure the default behavior (Default the cache behavior)

This part determines how the CDN handles user requests:

Viewer protocol policy: Choose Redirect HTTP to HTTPS. Today's websites are safe first, automatically converting insecure HTTP traffic to secure HTTPS.

Allowed HTTP methods (allowed HTTP methods): For static acceleration, select GET and HEAD. For dynamic API mixing, select GET, HEAD, OPTIONS, PUT, POST, PATCH, and DELETE.

Cache key and

origin requests (cache key and origin request): We recommend that you keep the default cache allowed and origin request settings. In Cache policy, choose CachingOptimized. This is the best practice of AWS official configuration. Gzip and Brotli compression will be automatically turned on, reducing the size of your code files by more than 70% and transferring them faster.

Step 4: Set up settings (Settings) and alternate domain names

Price class: If your business is global, choose the Use all edge locations. If the budget is limited and the users are mainly in Europe and the United States, you can choose a cheaper class.

Alternate domain name (CNAME): Enter your own beautiful domain name, such as cdn.yourdomain.com.

Custom SSL certificate: Since you use your own domain name, you need a certificate. Click the Request certificate below to request an SSL certificate for free through the AWS Certificate Manager (ACM). Refresh the page after successful application to select it.

Default root object (default root object): For a static website, enter index.html.

After checking, click at the bottom

Create distribution

. Mission accomplished! AWS starts deploying your distribution globally and the status becomes

Deploying

. It takes about 3 to 5 minutes, when the status changes

Enabled

When you get a shape like

Kan

The official accelerated domain name.

Step 5: Important closure-Update S3 Bucket Policy

Remember when we chose OAC in the second step? At this point, CloudFront have created permissions, but you have to go to the S3 bucket to "open the door".

On the prompt page of the successful creation of the CloudFront, you will see an eye-catching yellow prompt, click Copy policy (copy policy).

Go to your S3 bucket and click the Permissions (Permissions) tab.

Find the bucket policy, click Edit, paste the copied JSON code, and save it.

Now, go to your domain name service provider (such as GoDaddy, Aliyun, DNSPod) and put your subdomain (such

cdn.yourdomain.com

) do a

CNAME record

, pointing to the one CloudFront gave you

.cloudfront.net

Domain name.

3. Advanced Tuning and Money Saving Hacking Tips

If you want to use it quickly and save money in actual business, you must know the following three points:

1. The art of cache refresh (Invalidation)

When you update a picture or JS file on the website, and the cache in the CloudFront has not expired (TTL has not expired), the old users still see the old version.

Brute force solution: Go to the Invalidations tab of the CloudFront console, create a refresh task, and enter/* (refresh all stations) or/images/*. This will force the global edge site to delete the cache and return to the source.

Elegant solution (recommended): Add version number or file Hash in front-end engineering. For example, when updating an image, logo.png is not overwritten, but is named logo_v2.png. In this way, there is no need to manually refresh the cache, the old cache will not be invalidated, and new requests will automatically go to the new file, which is extremely friendly to the source station.

2. Be alert to cache breakdown and return rate

The premise of CDN to help you save money is

High cache hit rate

. If each request has to go back to the source station to get the data, CDN becomes a decoration, and you have to bear two additional traffic charges (source station to CDN to user).

Try not to include frequently changed query strings (such as timestamp? t = 123456) in the cache key. This will cause the CDN to think that every request is a brand new file, which will trigger a crazy back-to-origin.

3. Use CloudFront Functions to process edge logic

Sometimes you want to display pages in different languages for users in different countries, or do URL rewriting. In the past, you had to write rules in the server (such as Nginx). Now, you can use the CloudFront

Edge computing (Functions / Lambda @ Edge)

. Run a few lines of minimalist JavaScript code directly at the edge site, dispose of the requirements before the request is sent to the source station, fly fast, and save a lot of server computing costs.

Conclusion

In today's Internet era, where even one second delay is long, Amazon CloudFront is not only a technical component, but also a "moat" of user experience ".

By reasonably distributing resources to edge sites around the world, it can not only help your website plug in wings and realize second-to-second opening, but also act as a solid shield to block massive concurrent pressure for your source server. Just follow the steps in this article and step on OAC.

For every pit of permissions and caching strategies, you will find that the seemingly high-level global acceleration is actually only a dozen minutes of configuration effort.