How to Use AWS CloudFront to Create Your Own Free CDN
Tags: s3, aws, cloudfront, contentdeliverynetwo
Published: 2022-05-20 02:41:43

---
title: How to Use AWS CloudFront to Create Your Own Free CDN
published: true
date: 2022-03-14 05:18:39 UTC
tags: s3,aws,cloudfront,contentdeliverynetwo
canonical_url: https://blog.designly.biz/how-to-use-aws-cloudfront-to-create-your-own-free-cdn
---

![Featured](https://cdn-images-1.medium.com/max/1024/1*zOsWZYkzmYepKnF-7FxE4w.jpeg)

CDN stands for **Content Delivery Network**. They are used by large platforms such as Facebook, Amazon, Twitter, etc. Traditionally, they were only in the market of companies with deep wallets, but now-a-days, you can have your own CDN solution for an affordable price.

In years past, I used [**CloudFlare**](https://www.cloudflare.com) to cache my websites and speed up delivery — and I still do. But recently I discovered [**Amazon Web Service**](https://console.aws.amazon.com/)’s [**CloudFront**](https://aws.amazon.com/cloudfront/pricing/) product. Like many AWS services, CloudFront has a free tier! The free tier allows up to **1TB** of transfer out, **10,000,000 HTTP or HTTPS Requests** , and **2,000,000 CloudFront Function Invocations** per month. And the overage charges are just pennies. In the past, this type of service was only available to large-scale sites with millions of requests per day, but Amazon has made this service available to anyone — all you need is an AWS account and a credit card on file, but you’re credit card will only be charged if you go over the free-tier quota.

So, without further ado, let’s get started! This guide assumes you already have an AWS account and are logged in.

#### Step 1: Create an S3 Bucket

S3 stands for **Simple Storage Service**. Unlike services, such as Google Drive or DropBox, S3 treats files stored as objects. This gives you greater control over management of your files, such as versioning, deletion protection and encryption option. In this tutorial, we are just going to create a standard S3 bucket with no bells and whistles.

Ok, once you’re logged into the [**AWS Console**](https://console.aws.amazon.com), click on the **Services** icon in the upper left corner, then click **Storage** , then click  **S3**.

![Click Services > Storage > S3](https://cdn-images-1.medium.com/max/1024/1*zyTZYKHWkB_00Od9u82d7g.jpeg)
_Click Services > Storage > S3_

Next, click **Create Bucket** and enter a **Bucket Name**. The name you choose must be unique amongst all of AWS, so you may have to play around until you find one that works. You should choose a name that is DNS-compliant because this name will be part of your URI to access the bucket from the web.

Now choose your **AWS Region** , which should be the same as any other AWS services you currently use. If this if your first AWS resource, choose a region that geographically close to where you live.

![Create a New Bucket and then enter a Bucket Name and choose your AWS Region](https://cdn-images-1.medium.com/max/1024/1*T2s_N7bN4da3N3xvNEB3jQ.jpeg)
_Create a New Bucket and then enter a Bucket Name and choose your AWS Region_

Next, scroll down to the **Block all Public Access** checkbox and uncheck it. This bucket is intended to be accessible to the public so we can uncheck this option. Then check the **“I Acknowledge”** checkbox to continue.

![Uncheck Block all pubic access and check “I Acknowledge”](https://cdn-images-1.medium.com/max/1024/1*oa0q7Sk_0d-dv72qpfJWLw.jpeg)
_Uncheck Block all pubic access and check “I Acknowledge”_

#### Step 2: Setup AWS CloudFront

Now that we have an S3 bucket, we can setup AWS CloudFront, which will use that bucket as back-end storage for your CDN.

Click the **Services** icon and then choose **Network & Content Delivery > CloudFront**.

![Click Services > Network & Content Delivery > CloudFront](https://cdn-images-1.medium.com/max/1024/1*QnkkR7N5XtUEzBa9qTeicg.jpeg)
_Click Services > Network & Content Delivery > CloudFront_

Once in the CloudFront console, click **Create Distribution**. Then click on **Origin Domain** and select your newly-created S3 bucket.

![Click Create Distribution and then click Origin Domain and select your bucket](https://cdn-images-1.medium.com/max/1024/1*hPbrRjcc4gDMEpP_JnxNAg.jpeg)
_Click Create Distribution and then click Origin Domain and select your bucket_

Next, scroll down to the **Viewer** section and select **Redirect HTTP to HTTPS** under **Viewer protocol policy**.

![Select Redirect HTTP to HTTPS under Viewer protocol Policy](https://cdn-images-1.medium.com/max/1024/1*ViJ_9tRzLPxiJGUY32OqOw.jpeg)
_Select Redirect HTTP to HTTPS under Viewer protocol Policy_

Leave all the other settings in their default state and then scroll down to the bottom and click **Create Distribution**.

Now copy and paste the **Distribution domain name** into a place where you can reference it later. This is your new CDN’s base url.

![](https://cdn-images-1.medium.com/max/1024/1*wQ4ndXZC65dM8iyDiQZV9Q.jpeg)

#### Step 3: Create an IAM User/Group to Manage your CDN

Now we need to create a service account user with appropriate permissions to manage your new CDN. In the **Search Bar** next to the **Services** icon type in **_Iam_** and then click **Users** under  **IAM**.

![Search for Iam and then click Users](https://cdn-images-1.medium.com/max/1024/1*_uWwBAPIXq5OrivXHkqBRQ.jpeg)
_Search for Iam and then click Users_

Next, click **Add Users** and enter a username. Then check the box labeled **Access key** under **Select AWS credential type**.

![Click Add Users and enter a Username then check Access Key](https://cdn-images-1.medium.com/max/1024/1*P34OH39glKpYtxKG0CcCng.jpeg)
_Click Add Users and enter a Username then check Access Key_

Now you’ll need to add your new user to a group. We’re going to **Create Group.** Name the group whatever you like and the type **S3** in the search baar and check **AmazonS3FullAcess**. This will give this group full access to your S3 bucket for managing objects.

![Click Add User To Group and then search for S3 and check AmazonS3FullAccess](https://cdn-images-1.medium.com/max/1024/1*Qf1fYfMKmWVKB-iQmOsMjw.jpeg)
_Click Add User To Group and then search for S3 and check AmazonS3FullAccess_

Now search for **cloudfront** and check **CloudFrontFullAccess**. Then click **Create Group**.

![Search for cloudfront and check CloudFrontFullAccess then click Create Group](https://cdn-images-1.medium.com/max/1024/1*AFh_BQqShKCRAULrEfvgnQ.jpeg)
_Search for cloudfront and check CloudFrontFullAccess then click Create Group_

Click next, skip adding tags and then click **Create User**. Now copy and paste your **Access key ID** and **Secret access key** and store them in a safe place. Once you close this screen you will not be able to see your secret key again!

![Copy your Access Key ID and Secret access key](https://cdn-images-1.medium.com/max/1024/1*qEtgsDDSnfqX0OSkkqnXZA.jpeg)
_Copy your Access Key ID and Secret access key_

#### Step 4: Install the AWS Command Line Interface

We have our own free CDN! Yay! Now we need to be able to upload files to the S3 bucket and control our CloudFront cache. So we need to install the AWS CLI. I offer methods to install this on **MacOS** or **Linux**. I’ve never used it on **Windows** because… well… I hate Windows! So sorry.

#### Install AWS CLI on MacOS

Assuming you alread have [Homebrew](https://brew.sh/) installed on your Mac, run the following commands:

```
$ brew update
$ brew install awscli
```

#### Install AWS CLI on Linux

Debian/Ubuntu

```
$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
$ unzip awscliv2.zip
$ cd aws
$ sudo ./install
```

Once the installation completes you can test if it installed properly by running:

```
$ aws --version
```

It should output something like:

```
aws-cli/2.1.33 Python/3.8.8 Linux/5.4.0-70-generic exe/x86_64.ubuntu.20 prompt/off
```

Next, we need to login using the **Access key** and **Private key** you so carefully wrote down. To do this, we’ll run aws configure:

```
$ aws configure
AWS Access Key ID [None]: YOUR_ACCESS_KEY
AWS Secret Access Key [None]: YOUR_SECRET_KEY
Default region name [None]: e.g: us-east-1
Default output format [None]: LEAVE_BLANK
```

If all goes well, you are now logged in and may begin uploading files to your S3 bucket!

There are two ways to get your file uploaded to your CDN. You can use the aws s3 cp command or the aws s3 sync command. Personally, I prefer the sync command as it works very similarly to **rsync**. So in this example, I’m going to show you how to sync a local **images** directory to your CloudFront CDN:

```
aws s3 sync /Users/johndoe/httpd/images/ s3://designly-test-cdn/images --delete --exclude ".*"
```

If you’re familiar with **rsync** then this command should look very familiar. The --delete option tells the command to delete any files in the target directory that no longer exists. The --exclude directive tells sync to ignore any files that begin with a dot. Most likely, you won’t want to upload any operating system hidden files like .DS\_Store.

Ok, you did it! You now have a globally-syndicated CDN for your website’s assets! You should see huge gains in loading times on your site.

To access your files, remember the **Distribution domain name** I asked you to note earlier. In my example it was [https://dmcgr6zwv04i4.cloudfront.net](https://dmcgr6zwv04i4.cloudfront.net). So to get to a specific image file we just uploaded you would enter [https://dmcgr6zwv04i4.cloudfront.net](https://dmcgr6zwv04i4.cloudfront.net)/images/your-image-file.jpg.

#### Invalidating Your CDN Cache

CloudFront automatically caches your S3 files at the CloudFront edge server for lightning-fast delivery. If you are doing a lot go development and changing files regularly, it may be necessary to invalidate certain files from the cache. To do this run the following awscli command:

```
$ aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"
```

Where --distribution-id is your CloudFront **Distribution ID** and --paths is the specific files you want to invalidate. If you enter "/\*", it will invalidate everything.

Well, that’s it. I hope you found this tutorial as useful as I have! For more great information, please visit our [**Blog**](https://designly.biz/blog).

See also: [Automating S3 + CloudFront CDN Using PHP](https://designly.biz/blog/post/automating-s3-cloudfront-cdn-using-php).

* * *