Tutorial: Setting up a free CDN for your website with Google App Engine

The purpose of this tutorial is to exploit the possibilities of Google App Engine to built a free CDN for a site of average size.

This tutorial is for webmasters who want to optimize the overall response time of their websites and save bandwidth.

This is not a miracle cure, but an optimization among others not to be overlooked.

What is a CDN?

CDN stands for Content Delivery Network: you can see it as a network of data centers spread across the planet, and that each data center offers one or more replications of the content of others.

When a user requests a resource (an image, video, data file ...) is the closest datacenter that responds well, performance is significantly improved, and the load distributed across the network.

Specifically, in our case, the CDN will be used to deliver static content from our website (images, js, and css), we limit ourselves to these types of files because they typically represent 70% of the bandwidth of a site, most of the quota free for a Google AppEngine is limited to one gigabyte per day and 500MB of storage, it is of course to pass a paid account for very low rates (less than the 8cts GB of extra bandwidth by day).

Here we go ... 

Step 1: Installing Google AppEngine

First You must create a Google App Engine by following this link: appengine.google.com

Once created, it will install version 2.5.x Python (version 3.x SDK exists but Google works better with 2.5.x): python.org/download/releases/2.7/

Then install the latest version of the Google AppEngine SDK:code.google.com/intl/fr/appengine/downloads.html

Step 2: Create a Google AppEngine to your CDN

To do this, log into your account appengine.google.com

Click on "Create Application"

For this tutorial I'll use yousitename-cdn is the application name. Means you will replace to the name your own site...

Once the application is created, click the dashboard and you arrive on the dashboard of your application:

Google application is ready...

Note: don't forget that you have to change the url yoursitename-cdn.appspot.com to the name address of your site.

Once completed this tutorial, static content of your site will be accessible via the customised yoursitename.appspot.com /

Step 3: Configuration and deployment of our CDN

To implement Your CDN, we will use cirruxCache , an Open Source project developed specifically for the platform and Google Apps for the sole purpose of using it as a CDN.

You can download from this link CirruxCache .

Unzip it and give the file unzipped the name of your application (yoursitename-cdn for us)

Note: It is not necessary to rename the file, but it allows you to notice which one to deal with, if you install multiple instances of cirruxCache (several sites for example)

edit: app.yaml

In this file, simply replace appname with the name you gave to your application (the name is the identifier of the application and not the title) in our case we name it :

1	application: yoursitename-cdn

close this file

During deployment, Google will build on this line to know which application installed on your account will be your code (here cirruxCache).

edit the file app.py

this file to configure business rules for each type of content, without going into details, we'll set up the simplest configuration possible to meet our needs.
The default behavior of CirruxCache can deliver an entire site via the NSC, but our goal is to distribute static content only. As mentioned previously, our content will be accessible via replicated yoursitename-cdn.appspot.com.

We will ensure that the complaints of the type-yoursitenamecdn.appspot.com / wp-content / path / to / content / statique.jpg return the replicated version of the content.

While yoursitename-cdn.appspot.com and any other path does not commancant wp-content will redirect (type 301) to our main domain (here yoursitename.com).

In the file app.py we will modify the following lines

1	urls['default'] = (

2	'(/debug/.*)', 'Debug'

3	'/_admin/(.*)', 'Admin',

4	'/_store/(.*)', 'Store',

5	'(/data/.*)', 'Static',

6	'/www(/.*)', 'Www',

7	'/_cron/(.*)', 'Cron',

8	'/(.*)', 'Root'

9

)

  replaces this line'/(.*)', 'Root' by'/(.*)', 'yoursitename_redirect'

And add a line '(/ wp-content /.*)',' yoursitename_static '

Note: wp-content is a specific path or recorded wordpress plugins themes and their static content to another site could be AC / images / js / css etc ... therefore adapt to you. you can have as much road you want, simply add a line '(/ path /.*)',' Action 'for each. 

So we get this configuration:

01	urls['default'] = (

02	'(/debug/.*)', 'Debug',

03	'/_admin/(.*)', 'Admin',

04	'/_store/(.*)', 'Store',

05	'(/data/.*)', 'Static',

06	'/www(/.*)', 'Www',

07	'/_cron/(.*)', 'Cron',

08	'(/wp-content/.*)', 'yoursitename_static',

09	'/(.*)', 'yoursitename_Redirect'

10

)

Note: this is the python indentation is so important!

The two lines we have written saying

For all content which path that starts with / wp-content: using action yoursitename_static

For all other content (/ *) using action yoursitename_redirect

If you have followed, it will describe the action.

Just below these lines are added:

1	class yoursitename_Redirect(redirect.Service):

2	origin = 'http://yoursitename.com/'

Note the parameter redirect.Service: it is a "behavior" predefined cirruxCache which allows a 301 redirect to origin.

Then add:

1	classyousitename_static(cache.Service):

2	origin = 'http://yoursite.com'

3	allowFlushFrom = ['127.0.0.1']

4	forceTTL = 2592000 # 1 mois

5	ignoreQueryString = True>

6	forwardPost = False

The service cache.Service about him a bit more things compared to redirect.Service.

when receiving a request like this sitename-cdn.appspot.com/wp-content/chemin/du/fichier.jpg it first checks if it has a version  which dates fichier.jpg less than one month (forceTTL value in seconds) if so, it was delivered , if not it charges from its original root, that is to say yoursitename.com / wp-content / path / du / fichier.jpg then delivers it.

Our setup is complete, we may already be deployed, but before that, do things in order.

Now we will test our CDN locally.

Step 4: Test locally and then deploy

Open Google App Engine Launcher (installed with the SDK)

Load the application by clicking File> Add Existing Application> browse> then choose the folder containing your file app.yaml (remember I had appointed yoursitename-cdn)

Choose another port if 8080 is already used

The application is added, the browse button is grayed out.

the application then click on Run, after a few seconds, a green arrow tells you that your application is launched, and the browse button becomes available, click it.

If you are redirected to the original URL of your site is that the configuration of redirection works, it is the rule that took yoursitename_redirect hand.

We will now test a static resource by typing its full URL, replacing the name of our domain with localhost: 8080 Sample: logo for my blog I'll type http://localhost:8080/wp-content/uploads/ 2010/05/yoursitename.png

If you see the requested resource is displayed, the setup is good, you can deploy!

Simply click on the button "Deploy", your login / password Google AppEngine will be required, then a console will appear to indicate the status of deployment

Sometimes it may take several minutes, be patient;)

Once the deployment is complete, do the same testing your application locally on google (eg yoursitename-cdn.appspot.com/wp-content/uploads/2010/05/yoursitename.png)

If your tests are successful, your NSC is ready!

it must now change the paths of your static files so they use the url of the NLC.

If you have the chance to use wordpress like me (: p) you can use the plugin OSSDL CDN off-linker that will work for you, simply install it and give him the name of your cdn, i.e : http://name-cdn.appspot.com.

For other cases, it is possible to use the features of php ob_start ob_end_flush to replace the fly paths of all the static files.

Be careful though before changing paths to your images, make referrals to avoid the problem of referencing.

This can be done using htaccess rule

  RewriteCond% {HTTP_USER_AGENT}! ^ CirruxCache
 ^(.*) RewriteRule \. (Js | css | gif | png | jpg | png)

 $ 1 http://yoursitename-cdn.appspot.com/. $ 2 [R = 301, L]

Note: Do not change the UserAgent, it is used to distinguish requests CirruxCache that of a normal visitor. this avoids redirection loop.

This ended the first part of this tutorial.

In the next section, I explain how to use your own domain with google app engine, to create a CDN in one of your subdomains (eg cdn.mysite.com).

This is useful if you intend to migrate to a CDN professional, or completely disable the NSC without headache.

At the End for more explanation please post a comment or join this Google App Engine discussion Group . Don't hesitate to ask experienced developers who watch this group, they answering questions and providing valuable feedback.

Share

Tweet

.