How to Build Your Own CDN to Serve Static Assets with AWS S3, CloudFront, Custom Domain, and Next.js UI

If you have a website like mine (vikashpr.com) or any other web app, chances are you’re dealing with static assets. Modern web applications rely heavily on static assets; storing these files directly inside your frontend codebase (like in /public or /assets) works for small projects but becomes inefficient when the application grows. Embedding files directly in your repo or hosting server increases the build size and slows loading times. Scaling traffic means scaling how you serve assets. This is why everyone must use a robust CDN – Content Delivery Network.

Below is a step-by-step guide to setting up your own CDN with a custom domain like cdn.yourdomain.com. We'll also cover how to manage uploads and links using a Next.js file manager UI, so you'll never touch the AWS console to drag-and-drop again. We'll also use a Next.js-based UI to upload, delete, and manage files without logging in to AWS.

By the end of this article you will learn how to create your own CDN, something like:

https://cdn.example.com/images/profile.jpg

…and a beautiful dashboard to manage it all.

Before we begin, you should know why we use AWS S3 and CloudFront. You can read this article, Amazon S3 + Amazon CloudFront: A Match Made in the Cloud, or, in summary, you get multiple benefits using AWS for your CDN. Here's what you get:

• Performance: CloudFront caches files at global edge sites, serving assets close to users for peak speed.

• Security: S3 buckets remain private; CloudFront handles public delivery under your rules and SSL certificates.

• Scalability: Efficiently serve images, videos, CSS, and JS—no hosting bottlenecks.

• SEO Benefits: Faster page loads and clean asset URLs (like cdn.yourdomain.com/image.jpg) help search engines crawl and rank your content.

• Simplified Management: Integrate a browser-based file manager built with Next.js to handle uploads and deletions.

Step 1: Create an S3 Bucket

1. Go to the AWS Console → S3 → Create bucket.

2. Enter a unique bucket name, e.g., s3-cloudfront-cdn-demo

3. Select the AWS Region (e.g., us-east-1) or just leave it as default.

4. Leave Block all public access enabled (CloudFront will serve files securely).

5. Click 'Create bucket'.

You can manually upload files initially, but we will automate this using a Next.js dashboard later.

Step 2: Create a CloudFront Distribution

1. Open CloudFront → Create Distribution

2. Enter a unique distribution name, e.g., s3-cloudfront-cdn-demo

3. Under Origin Domain, click on the Browse S3 button and choose the S3 bucket we created.

5. Leave WAF, logging, and other advanced settings disabled for now.

6. Review and click 'Create Distribution'.

CloudFront will generate a domain like:

Step 3: How to add a custom domain to your CloudFront distribution (optional)

You can use CloudFront immediately with the default domain (e.g., d123abcd.cloudfront.net).

Setting up a custom domain like cdn.yourdomain.com with HTTPS is optional — but recommended if you want cleaner URLs and better branding.

You can skip this step and come back anytime later without affecting the CDN setup.

To set up your domain, you have to go `s3-cloudfont-cdn-demo to the cloudfront distribution that we created for the demo.

1. Before we configure your domain with the CloudFront distribution, we have to set up your custom domain (e.g., if you have a domain like yourdomain.com). It's advisable to use a CDN like ``.

• To do this, first you have to go to your DNS Manager for your domain, GoDaddy, AWS Router 53, Zoho Domain Manager, Namecheap Manager or whereveryou have set up your DNS. In my case I use Cloudflare to manage my DNS.

• Open your CDN Manager, and click to add new records.

type: CNAME

name: cdn

target: Distribution domain name (e.g,. d2ee23225wnee4.cloudfront.net)

• You can find the domain distribution name under your CloudFront distribution in AWS.

2. Once done, you will have your custom domain integrated with CloudFront distribution.

Enable HTTPS with AWS Certificate Manager (ACM)

1. Go to Your CloudFront Distribution and click on Add Domain.

2. Enter cdn.yourdomain.com

3. Click on Create Certificate.

4. Once your certificate is created copy the record name and values and go to your DNS Manager and add a CNAME record

5. Right afer you add the record, it will automaticlly validate the record

What to do if AWS Certificate Manager (ACM) certificate request fail (verification) ?

• If [AWS ACM + Cloudflare] Certificate validation kept failing, the culprit is CAA records.

• CAA records restrict which certificate authorities are allowed to issue certs for your domain, and if your CAA records didn’t include Amazon. It will fail to validate your certificate. In that case you have to add CAA records in Cloudflare or in your DNS manager. Add these below CAA records and try again. You will be able to verify the certificate.

amazon.com  
amazontrust.com  
awstrust.com  
amazonaws.com

You can read this article published in AWS to konw more Certification Authority Authorization (CAA) problems

Step 4: Set Up the Next.js CDN Media Manager UI

This UI allows you to upload, delete, and retrieve CloudFront URLs without accessing the AWS console.

git clone https://github.com/VikashPR/aws-s3-cloudfront-cdn-manager
cd aws-s3-cloudfront-cdn-manager
npm install

Configure Environment Variables (.env)

AWS_REGION=us-east-1
AWS_S3_BUCKET_NAME=s3-cloudfront-cdn-demo
AWS_CLOUDFRONT_DOMAIN=d34dweawb55.cloudfront.net
AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY
AWS_SECRET_ACCESS_KEY=YOUR_SECRET_KEY

How to get your AWS ACCESS KEY and AWS SECRET KEY ? you can read this article Managing IAM users or read answers in this stackoverflow How can I get AWS_ACCESS_KEY_ID for Amazon ?

Run the Application

npm run dev

Done! Upload, delete, and grab your CDN URLs in one click. No AWS Console required. From this dashboard you will be able to manage all your media and files

You now have your own blazing-fast, secure CDN—powered by AWS S3 for storage, CloudFront for global distribution, and a custom domain for sharp, memorable URLs. The Next.js dashboard makes asset uploads and deletions dead simple, with instant CDN links that you can use anywhere.