Marcos Placona Blog

Programming, technology and the taming of the web.

Speed up yor website – Part 2 – The Free CDN

Reading time: 6 – 9 minutes

To continue with our series of website optimization tricks, I’ll talk a little bit more about Content Delivery Network (CDN), and will talk you though the steps of creating a totally free CDN for your website.
Basically, as I’ve already stated on my previous post, a CDN is an external network which specializes in serving static content. It normally consists of a few servers spread around the world, so the data will travel the shortest route to get to their destination based on Geolocation.
In other words, if you’re in Japan, why should you have to wait for the data to travel from Europe, if there’s a server just next door to you.

CDN With multiple=

What you can see from the image, is that you have all of your servers in a “Cloud of Computers“, and the requests are mapped to the nearest one. In some cases you have more than one server per country or region. The beauty of it, is that applications deployed on the cloud are highly scalable, and you normally don’t need to manage the servers, as they are managed by the provider.
There are some companies offering CDN for a very reasonable price, but today we’re gonna be talking about free stuff!
Before I start with this tutorial, I have to make it clear that the form of CDN we’re going to be using here, is not truly CDN, as it doesn’t offer a very high scalability, and hasn’t been developed for the sole purpose of serving static files, so it won’t have the same high performance of a service designated only for the task.
For some (like myself), it won’t make such a huge difference, as this method still is better than nothing, and is immensely faster than much servers around. I host my applications on my own VPS and don’t have bandwidth limitations. But for most people who use Hosting Companies and have limited bandwidth, this will be a huge improvement.

Step one – The Idea:

Google provides us with it’s wonderful Google App Engine. It’s free for anyone, you can store up to 500mb (enough for static content), and have about 5 million page views a month. Anything beyond it is charged (very tiny fee). Everybody knows Google, so you know they have servers almost everywhere. Put this all together, and you’ll get started.
To make this idea start to happen, simply create an account with Google App Engine. Simply use your Google login details, and and confirm your application with the code Google sends to you visa SMS (you need to have a mobile phone).
Now, you will need to download and install Python (it’s only required for the App Engine can run on your computer). I find Python 2.5 works better than Python 3, so you can get it from here.
It’s time to install the App Engine Client on your computer. Once it’s installed, you should be ready to go.

Step two – Create an Application:

Simply login to your newly created App Engine Account and click the button Create an Application

App Engine - Create Application
Give it a name and title, and then save it. Use a short name, as it will be you application’s handler, and you’ll access it by going to [app_name].appspot.com

Step three – Create your Application Folder:

If you are on a windows environment, normally the App Engine will be installed on “C:Program FilesGooglegoogle_appengine”. If not, it will be installed wherever you chose during installation.

Go to this folder, and create a new folder with the same name as the application you have just created on step 2.

You will now copy your assets folder into this folder. I like to keep the same structure, so by only changing one variable on my website, I can change the the domain it uses to look for images.

So if for example my website was looking for images at http://images.domain.com/images, I’d just change this variable to point to [app_name].appspot.com/images

So, on my folder I’ll have exactly the same structure as I had on my website plus a few files I’ll describe now:
app.yaml: this is our application configuration including URL’s and versions. More info here.

application: my-application
version: 1
runtime: python
api_version: 1
handlers:
- url: /images
static_dir: images
- url: /styles
static_dir: styles

Notice I’m specifying my static directories and their relative paths. You have to change it accordingly.

deploy.bat: This is a file I create for convenience. It executes command lines for me, so i don’t have to type them all the time I want to deploy. The contents of this file will normally be:

"C:Python25python" "C:Program FilesGooglegoogle_appengineappcfg.py" update "C:Program FilesGooglegoogle_appengine[app_name]"

Notice that on the first part of, I’m simply telling my script what I use when it comes to running python scripts. I then update my application by its name, and giving the application folder.

So manually it would be something like:

python "C:Program FilesGooglegoogle_appengineappcfg.py" update "C:Program FilesGooglegoogle_appengine[app_name]"

Step four – Deploying your Application:

Now it’s the big time. Simply double click the file called deploy.bat and you should see a screen like this:
Deploying to CDN

If it doesn’t give you any warning or error message, you should be ready to access your file.

If you decide to delete this file, simply delete it from the folder, and deploy again, and the file will be deleted. You don’t need to worry about minor versions, as the App Engine will deal with it for you.

To be honest, I never worry too much about the version numbers, as I’m constantly uploading stuff to my server. But if for some reason you do, you can simply change the “version” flag on you app.yaml file.

I hope this article is helpful. please don’t hesitate asking me questions or sending suggesting on how to improve this article.

8 Comments

  1. @Ziggy:

    Q: “can I install this all locally and run it, or it has to be on the computer where my site is hosted?”

    A:Yes, you will only install it locally, and the deploys will be done to the server. Pretty much like deploying with an ANT script.

    Q:”Minor versions of what?”

    A: What I mean with minor versions is that if for any reason you like to version your application by releases, google will do it for you calling it version 1.0.0.1 for example. On your app.yaml, you are initially setting the version to 1, and only when you want it to be version 2, you will change. but internally, google is versioning it for you. Won’t make much difference in the CDN case

    Q: “One big negative I read is that google only sets 1 week expires headers. So your weekly or so visitor probably has to re-download everything and is slower. ?”

    A: There’s a few things you can do to control this. I’m actually in process of testing it with a Python script, and will post more about it as soon as I’m sure it works the way I want. But it sure is not slow do download everything again, as google servers are really good and fast.

    Q:”Also, it is not clear google actually serve files from the closest location like a CDN does. One guy asked for pings from visitors and only a few came up around the world. ?”

    A: That’s something I’ll need to confirm. as far as I know, it does it, but I’ll ask and come back with a concrete response.

  2. I’m confused: can I install this all locally and run it, or it has to be on the computer where my site is hosted?
    >>You don’t need to worry about minor versions
    Minor versions of what?
    One big negative I read is that google only sets 1 week expires headers. So your weekly or so visitor probably has to re-download everything and is slower. ?
    Also, it is not clear google actually serve files from the closest location like a CDN does. One guy asked for pings from visitors and only a few came up around the world. ?
    Thoughts?

  3. >>it sure is not slow do download everything again, as google servers are really good and fast.
    Not as fast as cached by the browser ;-)
    I look forward to your answers.

  4. Have you tried uploading any data using appcfg.py or bulkload.py or bulkload_cliet.py? I am facing loads of problems uploading even 300KB sized csv file. Can you give write a blog on uploading the data to Google app engine too and yeah I too am looking forward for your answers to ziggy’s questions.

  5. Thanks so much for your article. Very thorough.

    I went ahead and created my app with Google and within 2 hours I was rolling with my static content hosted on their site!

  6. i am really new about this this, i followed the instruction above, but when i deploy then i click dashboard, there was error in authorized, what i supps to do to get it working, can you explain in simple way? or with images will be more helpfull
    great article

  7. Marcos Placona

    May 10, 2010 at 21:31

    Hi sariyanta, I’ve never really seen an error like that on the dashboard. If it lets you deploys, that’s pretty much it, you don’t even need to check anything on the dashboard. My post has images, and I’ve corrected the code formatting, so you can read it better. Please give me some more information about the error you’re encountering, and I shall try and help you further.

  8. Thank you so much for this great tutorial. Though it is an old post, i still think it is very relevant. I will go through the steps and see how it goes. Thanks :)

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>