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.
Add the above configuration inside your http block.
Change the root to match your websites location.
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.
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.
- Under Web click
- Click on the Origin Domain Name input and select the elastic load balancer used for your ec2 instance.
- Leave all the setting as they are except enamble Compress Objects Automatically his means your files will be develiered in gziped.
Create Distributionbutton 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’
Your cloudfront domian is listed under
Domian Name on cloudfront page.
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
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.