Setting up Cloudfront CDN through the AWS control panel is pretty painless. The only choice you need to make is where you are going to host the files from S3 or EC2. As long as you have an Elastic Load Balancer setup, cloudfront will be able to use your EC2 instance as the source.

For this tutorial i’ll be using an EC2 instance running Amazon Linux and Nginx and i’m working from a mac.

Step 1 - Configure Nginx

First thing we need to do is configure nginx to accept requests from any Cloudfront server. This should be done before activating our CDN as cloudfront will collect all the files in whatever location we give it.

We do this by creating a new server configuration, for this tutorial i’ll be working in the ‘nginx.conf’ file but depending on your system you may need to add this elsewhere.

Open your terminal and access your EC2 instance using SSH.

ssh -i "YOUR_SECRUITY.pem" ec2-user@YOUR_EC2_INSTANCE.compute.amazonaws.com

Open your nginx.conf file using a text editor, I’ll be using vim and the location of the file is as follows.

sudo vim /etc/nginx/nginx.conf

It is possible for your ‘nginx.conf’ to be in another location.

This config starts by blocking access to everything on the server then than allows access to a collection of media files, .css and .js files. By blocking everything you know that nobody has access to anything sensitive on your server and then gives you the control to allow certain files.

server {
    listen 80;
    listen [::]:80;
    server_name  *.cloudfront.net;
    root /var/www/html/;

     # deny everything that doesn't match another location
    location / { deny all; }

    # Media: images, icons, video, audio, HTC
    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff|woff2|eot|ttf)$ {
      expires 1M;
      access_log off;
    }

    # CSS and Javascript
    location ~* \.(?:css|js)$ {
      expires 1M;
      access_log off;
    }

}

Add the above configuration inside your http block.

Change the root to match your websites location.

root /var/www/html/;

The server is set to accept all cloudfront url, this allows you to delete your cloudfront distribution and start another without reconfiguring the server. That being said when you’re happy with your cdn set up, you can update this to match your exact url or another custom url.

server_name  d2knfgty4xb3nj.cloudfront.net

Save and exit vim, then restart Nginx by typing

sudo service nginx restart

If there where any errors they should be outputted to the terminal now.

Step 2 - Configuring nginx to accept requests from the CDN

Login to the aws console

  • Go to cloudfront.
  • Click Create Distribution.

Cloudfront getting started

  • Under Web click Get Started .

Cloudfront Web Distribution

  • Click on the Origin Domain Name input and select the elastic load balancer used for your ec2 instance.

Cloudfront Origin

  • Leave all the setting as they are except enamble Compress Objects Automatically his means your files will be develiered in gziped.

Cloudfront Compress

  • Click Create Distribution button at the bottom of the page.

Cloudfront is now uploading all of your content to its edge location this can take around 10-15mins for this to finish. When its done trying accessing a file you don’t want someone to have access to. I would try wp-config.php

Test using the CDN url with ‘wp-config.php’

d2knfgty4xb3nj.cloudfront.net/wp-config.php

Your cloudfront domian is listed under Domian Name on cloudfront page.

Cloudfront Distributions

If the file downloads, something went wrong and I would disable the CDN distribution and then delete it, there will probly be something from with nginx.

If you get access a 403 Forbidden, well done everything is as it should.

Now try accessing a file you want others to have access to. Wordpress includes its own copy of jquery so lets try that. Change the url above to match your CDN Domain Name

d2knfgty4xb3nj.cloudfront.net/wp-includes/js/jquery/jquery.js

If you see a minified version of jquery, that means you Cloudfront is working and the url can used manualy to insert content to your website or using plugins that accepts a CDN url.