Optimize Image Delivery with a CDN

Before We Begin 🔗

The images in my posts are currently stored as PNG files in the public folder and loaded with the <Image> component. As the number of images grows, the project gets larger and the files become harder to manage. Image-heavy pages can also load more slowly. I looked for a better way to serve those images.

What Is a CDN? 🔗

A
CDN
(
Content Delivery Network
) stores content on servers around the world and serves it from a location close to the user. This speeds up delivery and reduces the load on the origin server.
Wikipedia↗

Some CDN providers are:

I'll set up a CDN using CloudFront and an S3 bucket.

What Are CloudFront and S3? 🔗

Amazon CloudFront

delivers

static and dynamic web content

, such as HTML, CSS, JavaScript, and images, through a global network of data centers called edge locations. When a user requests content, CloudFront routes the request to an edge location that can serve it with low latency.

Amazon S3

is an object storage service with a web interface for storing and retrieving data at scale.

Set Up the CDN 🔗

1. Create an S3 Bucket 🔗

I already had a domain hosted in Route 53, so I used the same AWS account.

Sign in to AWS, open S3, and click 버킷 생성 (Create bucket).

Check the region before creating the bucket.
I chose 아시아 태평양(서울) (Asia Pacific, Seoul).
See the bucket naming rules↗. For example, underscores are prohibited. Leave the remaining settings at their defaults. Click 버킷 만들기 (Create bucket) to finish.

2. Create a CloudFront Distribution 🔗

Open CloudFront and click 배포 생성 (Create distribution).
Under Origin Domain, select the S3 bucket endpoint. Under Origin Access, choose 원본 엑세스 제어 설정 (Origin access control settings), then click Create new OAC. Leave the default settings and click Create. Choose a viewer protocol policy for the default cache behavior. I chose HTTPS only. Basic image loads and classic scripts usually work with the default cache policy. To support requests that need CORS, I configured the following policies.
- Set the origin request policy to CORS-S3Origin.
- Set the response headers policy to CORS-With-Preflight.
I left the web application firewall (WAF) disabled for this setup because it can add charges. Finish any other settings you need and click 배포 생성 (Create distribution).

3. Configure the S3 Bucket Policy 🔗

After you create the CloudFront distribution, you'll see this message.

Click Copy policy, then follow the link to the S3 bucket policy page. Click Edit, paste the policy, and save it.

4. Test the CloudFront Connection 🔗

Upload an image to your S3 bucket. Click Upload and select the image, or drag and drop it.

Return to CloudFront and check the distribution status. Once the distribution is ready, find its domain name.

Open the image using the distribution domain.

https://[도메인 이름]/[파일명]"

Connect a Custom Domain (Optional) 🔗

AWS provides a default domain name for the distribution. You can connect your own domain to make the address easier to remember. Have a domain with

DNS hosting

ready before you start.

1. Create a DNS Record 🔗

Open Route 53 and select your domain. Click 레코드 세트 생성 (Create record set), enter your subdomain, and select a CNAME record. Set its value to the CloudFront distribution domain and create the record.

2. Request an SSL Certificate 🔗

Open AWS Certificate Manager (ACM) to request the certificate CloudFront needs. Request it in the

US East (N. Virginia)

region.

Switch to N. Virginia before continuing.

Choose Request certificate, then Request a public certificate. Enter the domain you configured with the CNAME record and click 요청 (Request).

The certificate initially shows Pending validation. If the status does not change, click Route53에서 레코드 생성 (Create records in Route 53) to create the validation record.

3. Add the Domain to CloudFront 🔗

Open the CloudFront distribution and click Edit settings.

Set the alternate domain name and SSL certificate as shown, then click 설정 저장 (Save changes).

When the change is ready, open the custom domain to test the CDN.

Conclusion 🔗

Before and After 🔗

I compared an entire post with many images before and after enabling the CDN.

Before the CDN

After the CDN

References 🔗

AWS — Routing traffic to an Amazon CloudFront distribution using your domain name↗