Custom CNAME for media files URLs at Publitio

By Publitio • Oct 02, 2018 • In Blog 9 2 1998

It is now possible to set your own custom CNAME  (CDN) for your media files URL's via Publitio. This can be even your own CDN like CloudFront or CloudFlare (if you think our 'upcoming' global infrastructure - which acts as CDN - will not be fast enough). To cut the chase, jump directly to Publitio Settings page and look for Custom CNAME option to get stared. Here are some detailed instructions how to setup everything on both your CNAME (DNS/CDN) part and on Publitio part.

Basic CNAME setup via DNS (no https support)

First, let's do some basic CNAME setup via DNS. This will give you simple http://subdomain.yourdomain.com URL for your media files. Please note, basic setup will work by default with HTTP protocol (for HTTPS you need to install SSL certificate on your end, or to use Publitio HTTPS URLs).

1. Create DNS record for your CNAME

Go to DNS settings of your domain. This could be at WHM/cPanel, Route53, CloudFlare or your domain registrar. At our example we will add CNAME named keepit.keepdsmile.com pointing out (having CNAME value) to media.publit.io. (notice the dot "." at the end of io.)

Once added and Saved, our subdomain keepit.keepdsmile.com should work and point out to media.publit.io (if you see text output of your subdomain.yourdomain.com this part of setup is OK)

2. Enable Custom CNAME usage on Publitio part

Finals step of basic setup for Custom CNAME usage is to go to Publitio Settings page and to enter info & enable use of custom CNAME for media files URLs under the Custom CNAME panel

This step is necessary for us to detect use of your custom CNAME, and here you have an option to Enable/Disable usage of Custom Cname globally. Since we used simple DNS and CNAME setup on our end of keepdsmile.com (where no SSL is installed), this will work only with HTTP protocol.  

Our media files URL (retrieved via Dashboard or API) will now be in following form:

http://keepit.keepdsmile.com/file/cloud3dWM.png

And you can perform all on-the-fly transformations on it as same as you do on media.publit.io

Alternatively you can still use (with HTTPS support) media.publit.io and it will work) as follows:

https://media.publit.io/file/cloud3dWM.png


Advanced setup via CloudFront CDN with HTTPS support 

Now, lets create a CloudFront (CDN by Amazon) and setup it as a custom CNAME for your media files at Publitio. Setup is very similiar for CloudFlare, so you should be able to do it in same maner as we do it here for CloudFront.

1. Create CloudFront Distribution

Please go to AWS CloudFront Management Console and create new distribution for Web. For Origin Domain Name enter media.publit.io. Origin ID can be anything you want (for your identification purpose). Origin Protocol Policy can be set to Match Viewer (but will work with other two options also) : 

While still at Create Distirbution page, scroll down to Distribution Settings part. Under the Alternate Domain Names (CNAMEs) enter your subdomain you want to use as a final custom CNAME - in our example it is cdn.keepdsmile.com.  For SSL Certificate please opt-in Custom SSL Certificate radio button and select your custom ssl certificate - in our example it is SSL for *.keepdsmile.com. You can create free wildcard SSL certificate for your domain at AWS (follow instruction on page). 

Once done, click on Create Distribution button at bottom of page and please wait till your CloudFront Distribution is created, 

2. Create DNS record pointing out to your CloudFront Distribution

You will get Domain Name URL for your CF Distribution in following form: diev3oxjp395j.cloudfront.net. Go to DNS settings of your domain and create CNAME record to match Alternate Domain Name (CNAME) you used on your distribution (in our example it is cdn.keepdsmile.com) that points to CF Domain Name URL diev3oxjp395j.cloudfront.net. (notice the "." dot at the end!)

Once everything is saved and your DNS record is propagated your subdomain ( our example cdn.keepdsmile.com) should now act as CloudFront CDN that points to media.publit.io.

3. Enable Custom CNAME usage on Publitio part

Finals step of advanced setup for Custom CNAME usage is to go to Publitio Settings page and to enter our info & enable use of custom CNAME for media files URLs under the Custom CNAME panel

This step is necessary for us to detect use of your custom CNAME, and here you have an option to Enable/Disable usage of Custom Cname globally. Since we used CloudFront with custom SSL certificate this will now work both via HTTPS and HTTP protocols. Our media files URL (retrieved via Dashboard or API) will now be in following form:

https://cdn.keepdsmile.com/file/paris.jpg
http://cdn.keepdsmile.com/file/paris.jpg

4. Additional Step for Domain Level Protection

If you have Domain Level Protection enabled on your account, it is necessary to perform one more step in order for whole setup to work properly. You need to Whitelist Headers sent via CloudFront Distribution to media.publit.io. Please go to your CloudFront Distribution and look out for Behaviors tab

Check Default (*) and click on a Edit button. While on Edit Behaviors page under the Cache Based on Selected Request Headers please select Whitelist and at Whitelist Headers add Referer and Host to list.

This will allows us to identify referring domain and is necessary step in order for Domain Level Protection to work via CloudFront CDN. Good luck with setup and if you have any questions or comments please let us know.