Saving a HUGE bandwidth cost in WordPress by automatically serving media contents from copy.com

shutterstock_132384233
The title almost says it all. Our mission is to save the bandwidth cost (and ensure better deliverability) by leveraging the power of headless installation of copy.com client in Linux, and then integrating it into WordPress. The integration must work seamlessly so that the viewers don’t see a difference, and at the same time you don’t have to put any extra effort. Beside saving bandwidth, this also reduces extra load from your web server. There’s another surprise which I will tell you later. For now, keep reading :)

You need at least a VPS to make this setup working, preferably with root access. These days VPSes are cheap. You can purchase an 128MB VPS for ~14/yr from Ramnode (such a fantastic provider) or may be for ~19/yr from WeLoveServers. Or feel free to use your existing VPSes if you have one.

Step 1: Headless installation of copy.com app
You can use your existing copy.com or register a new one using my referral code http://copy.com?r=Tbcrni, you and I both will be getting an extra 5GB if you do so.

Now log into your linux box via SSH, you need to have root privilege to complete this step.

Download the linux client

wget https://copy.com/install/linux/Copy.tgz --no-check-certificate

Unzip the tarball

tar -zxvf Copy.tgz

Run the client

cd copy  
cd x86_64
nohup ./CopyConsole -u=your_copy_email -r=/root/copyhome -p=yourpassword &

The benefit of using `nohup` is that it makes sure your process will not be interfered even when you logout from your current ssh session. And adding a trailing `&` makes the process run into the background, without blocking the screen. You can do the same thing with `screen` command in linux and then detaching the active screen.

Oh one more thing, nohup runs the process with default priority (0). If you want to run it as a low priority process, you can use `nice` command with nohup like this. By default -20 is the maximum priority, and 19 or 20 is the lowest priority. The following command runs the copy.com headless client with a priority level 5

nohup nice -n 5 ./CopyConsole -u=your_copy_email -r=/root/copyhome -p=yourpassword &

Security Tip: Always remove such commands from history which contains your password/username. To do that you can simply run a `history -d <commandid>` command

If you read the command above, you may have noticed that we told copy app to use `/root/copyhome` directory as it’s root folder. It’s important that you remember it.

Step 2: Map the WordPress upload folder with copy.com
This is a comparatively easier step. If your WordPress installation directory is /var/www/wordpress then there are 95% chance that your upload directory is located at /var/www/wordpress/wp-content/uploads, unless you had changed it exclusively. So we are going to map this directory into copy.com so that everything you upload from WordPress, will be properly synced into your copy.com account. It’s easier, remember? Just create a symbolic link like this and you are all done.

ln -s /var/www/wordpress/wp-content/uploads /root/copyhome/uploads

And copy.com app will automatically start syncing the contents of your uploads directory almost immediately. Impressive, eh?

Step 3: Share this folder in copy.com:
This is an important step, you must share the uploads directory from your copy.com account publicly. Just log into your copy.com account in the browser, right click on the uploads folder, select share and share publicly. Immediately you will see a public URL for this folder in your copy.com screen (something like http://copy.com/rNvQU2t2o4Z8), copy that url.

Step 4: Serve images directly from copy.com instead of your server.
You can do this step by several ways, for example, by registering a hook or doing it via http redirection using .htaccess. Lets do it using a simple hook this time. Of course you can fine tune it any way you’d like to, I am just keeping it simple in this article.

function link_replacer($content){
    return str_replace("://your_wordpres_blog_url/wp-content/uploads/", 
"://copy.com/rNvQU2t2o4Z8/uploads/", $content);
}
add_filter("the_content",link_replacer);

The Surprise: Now it’s time for a surprise, which I’d promised earlier in this article. Did you know that copy.com supports seamless media streaming for popular audio and video formats? As our media contents are properly synced with copy.com, you can now upload videos and audios which will be streamed without any problem at all, directly from copy.com :)

I hope you’ve enjoyed this article :)

About these ads

14 thoughts on “Saving a HUGE bandwidth cost in WordPress by automatically serving media contents from copy.com

  1. have to try it out. Looks exciting :D
    একটা ছোট্টো টাইপো সম্ভবত ভাইয়া – in the last potion, shouldn’t it be “Now I owe you a surprise” instead of “Now you owe me a surprise” ?

  2. Boss, is it still working?? I’ve created a publicly shared folder in my copy.com account, uploaded some images in that public folder, but when I try to access any image via url, that url loads the copy.com file viewer page instead of serving the image over http. Or I’m missing any other configuration/setting in copy.com account to achieve this??

    • I’ve verified that, static file serving only works with http protocol, accessing files via https protocol loads the file in a hosted viewer page in copy.com

      You may want to update the post to mention about this as well as changing the wordpress filter to something like below:

      function link_replacer($content){
      return preg_replace(“#http(s)?://” . preg_quote(‘your_wordpres_blog_url/wp-content/uploads/”,
      “http://copy.com/rNvQU2t2o4Z8/uploads/”, $content);
      }
      add_filter(“the_content”,link_replacer);

      Also it might be worth noting that, all text files are served with text/plain mime types, even though the file extension is css or html or js

    • Correction in above code:

      function link_replacer($content){
      return preg_replace(‘#http(s)?://’ . preg_quote(‘your_wordpres_blog_url/wp-content/uploads/’,’#’) . ‘#m’,
      “http://copy.com/rNvQU2t2o4Z8/uploads/”, $content);
      }
      add_filter(“the_content”,link_replacer);

    • Interesting!! Now when I tried it again, it is working as expected. May be I was doing something wrong while building the url. Anyway, thanks for the great idea & sharing it.

      BTW, I would be more happy, if static text files could also be served from copy.com with appropriate mime type and I could move the css & js files along with the images there. If you can figure out an way for this, please share as well.

      Thanks again (Y)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s