Tutorial : Mettre en place un CDN gratuit pour votre site web avec Google App Engine – 1ère partie
Le but de ce tutorial est d’exploiter les possibilités de Google App Engine afin de construite un CDN gratuit pour un site de taille moyenne.
Ce tutorial est destiné aux webmasters souhaitant optimiser les temps de réponses globales de leurs sites web et d’économiser leur bande passante.
Ce n’est pas une recette miracle, mais une optimisation parmi d’autres à ne pas négliger.
Qu’est ce qu’un CDN ?
CDN est l’abréviation de Content Delivery Network : on peut voir ca comme un réseau de datacenters répartis sur toute la planète, et dont chaque datacenter offre une ou plusieurs réplications du contenu des autres.
Quand un utilisateur demande une ressource (une image, une vidéo, un fichier de données …) c’est le datacenter le plus proche qui répond, ainsi, les performances sont nettement améliorés, et la charge répartie sur l’ensemble du réseau.
Concrètement, dans notre cas, le CDN sera utilisé pour délivrer le contenu statique de notre site web (images, js, et css), nous nous limitons à ces types de fichiers car ils représentent en général 70% de la bande passante d’un site, de plus, le quota gratuit pour une application Google AppEngine est limité à un Go/jour et 500Mo de stockage, on peut bien entendu passer un à compte payant pour des tarifs très avantageux (moins de 8cts le Go de bande passante supplémentaire par jour).
C’est parti…
Etape 1 : Installation de Google AppEngine
Tout d’abord il faut créer un compte Google App Engine en suivant ce lien : https://appengine.google.com/
Une fois créé, Il faudra installer la version 2.5.x de Python (une version 3.x existe mais la SDK Google fonctionne mieux avec la 2.5.x) : http://www.python.org/download/releases/2.7/
Ensuite installer la dernière version de la SDK Google AppEngine : http://code.google.com/intl/fr/appengine/downloads.html
Etape 2 : Création d’une application Google AppEngine pour notre CDN
Pour cela, connectez vous à votre compte appengine.google.com
Cliquez sur « Create Application »
Pour ce tutorial je vais utiliser emaroc-cdn comme nom d’application.
Une fois l’application créée, cliquez sur le lien dashboard et vous arrivez sur le tableau de bord de votre application :
L’application Google est prête.
Désormé, l’url emaroc-cdn.appspot.com est réservée à notre application.
Une fois ce tutorial terminé, tous le contenu statique de notre site sera accessible via emaroc-cdn.appspot.com/
Etape 3 : configuration et déploiement de notre CDN
Pour mettre en place notre CDN, nous allons utiliser cirruxCache, un projet Open Source développé spécialement pour la plâteforme google Apps et dans le seul but de l’utiliser en tant que CDN.
Commencez par télécharger CirruxCache.
Décompressez le, et donnez au dossier décompressé le nom de votre application (emaroc-cdn pour nous)
PS : il n’est pas necessaire de renommer le dossier, mais ca vous permettera de vous y retrouver si vous installez plusieurs instances de cirruxCache (pour plusieurs sites par exemple)
éditez le fichier : app.yaml
Dans ce fichier, remplacez simplement appname par le nom que vous avez donné à votre application (le nom correspond à l’identifiant de l’application et pas le titre) dans notre cas c’est on mettera :
application: emaroc-cdn
fermez ce fichier
Lors du déploiement, google va se baser sur cette ligne pour savoir sur quelle application de votre compte sera installé votre code (ici cirruxCache).
editez le fichier app.py
ce fichier permet de configurer des règles de gestion pour chaque type de contenu, sans entrer dans les détails, nous allons mettre en place la configuration la plus simple possible pour répondre à notre besoins.
Le comportement par défaut de CirruxCache permet de délivrer un site en entier via le CDN, mais notre but est de distribuer uniquement le contenu statique. Comme dit précédement, notre contenu répliqué sera accessible via emaroc-cdn.appspot.com.
Nous allons faire en sorte que les requêtes du type emaroc-cdn.appspot.com/wp-content/chemin/vers/contenu/statique.jpg renvoient la version répliquée du contenu.
Tandis que emaroc-cdn.appspot.com et tout autre chemin ne commancant pas par wp-content fera une redirection (type 301) vers notre domaine principal (ici emaroc.info ).
Dans le fichier app.py nous allons modifier les lignes suivante
urls['default'] = ( '(/debug/.*)', 'Debug', '/_admin/(.*)', 'Admin', '/_store/(.*)', 'Store', '(/data/.*)', 'Static', '/www(/.*)', 'Www', '/_cron/(.*)', 'Cron', '/(.*)', 'Root' )
On remplace la ligne ‘/(.*)’, ‘Root’ par ‘/(.*)’, ‘Emaroc_redirect’
Et on ajoute une ligne ‘(/wp-content/.*)’, ‘Emaroc_static’
Note : wp-content est un chemin spécifique à wordpress ou sont stockés les plugins les thèmes ainsi que leur contenu statique, pour un autre site ca pourrait être /images, /js, /css …etc adaptez donc à votre cas. vous pouvez avoir autant de chemin que vous voulez, ajouter simplement une ligne ‘(/chemin/.*)’, ‘Action’ pour chacune.
Nous obtenons donc cette configuration :
urls['default'] = ( '(/debug/.*)', 'Debug', '/_admin/(.*)', 'Admin', '/_store/(.*)', 'Store', '(/data/.*)', 'Static', '/www(/.*)', 'Www', '/_cron/(.*)', 'Cron', '(/wp-content/.*)', 'Emaroc_static', '/(.*)', 'Emaroc_Redirect' )
Note : c’est du python l’indentation est donc importante !
Les deux lignes que nous avons écrites disent :
Pour tous contenu dont le chemin qui commance par /wp-content : utiliser l’action Emaroc_static
Pour tous autre contenu (/*) utiliser l’action Emaroc_redirect
Si vous avez bien suivi, il faudra décrire ces Action.
Juste en dessous de ces lignes on ajoute :
class Emaroc_Redirect(redirect.Service): origin = 'http://emaroc.info/'
notez bien le paramètre redirect.Service : c’est un “comportement” prédéfini de cirruxCache qui permet de faire une redirection 301 vers origin.
Puis on ajoute :
class Emaroc_static(cache.Service): origin = 'http://emaroc.info' allowFlushFrom = ['127.0.0.1'] forceTTL = 2592000 # 1 mois ignoreQueryString = True forwardPost = False
Le service cache.Service quant à lui fait un peut plus de choses comparé à redirect.Service.
Lorsqu’il reçoit une requête du genre emaroc-cdn.appspot.com/wp-content/chemin/du/fichier.jpg il vérifie d’abord s’il dispose d’une version de fichier.jpg qui date de moins d’un mois (valeur de forceTTL en seconde) si c’est le cas, il la délivre, sinon il la charge à partir de son adresse d’origine, c’est-à-dire emaroc.info/wp-content/chemin/du/fichier.jpg puis la délivre.
Notre configuration est terminée, nous pouvons d’ores et déjà la déployer mais avant cela, faisons les choses dans le bon ordre.
Nous allons tester notre CDN en local.
Etap 4 : test en local puis déploiement
Ouvrez Google App Engine Launcher (installé avec la SDK)
Chargez l’application en cliquant sur File > Add Existing application > browse > puis choisissez le dossier contenant votre fichier app.yaml (souvenez vous je l’avais nommé emaroc-cdn)
Choisissez un autre port si le 8080 est déjà utilisé
L’application est ajoutée, le bouton browse est grisé.
cliquez sur l’application puis sur Run, après quelques secondes, une flèche verte vous indique que votre application est lancée, et le boutton browse devient accessible, cliquez dessus.
Si vous êtes redirigé vers l’url d’origine de votre site, c’est que la configuration de redirection fonctionne ; c’est la règle Emaroc_redirect qui a pris la main.
Nous allons maintenant tester une ressource statique en tapant son url complète et en remplaçant le nom de notre domaine par localhost :8080, exemple : pour le logo de mon blog je vais taper http://localhost:8080/wp-content/uploads/2010/05/emaroc.png
Si vous voyez la ressource demandée s’afficher, c’est que la configuration est bonne, vous pouvez déployer !
Il suffit pour cela de cliquer sur le bouton « Deploy », votre login/password Google AppEngine vous seront demandés, puis une console va s’afficher pour indiquer l’état d’avancement du déploiement
Parfois ca peut prendre plusieurs minutes, soyez patients 😉
Une fois le déploiement terminé, faites les mêmes tests effectués en local sur votre application google (ex. emaroc-cdn.appspot.com/wp-content/uploads/2010/05/emaroc.png)
Si vos testes sont concluant, votre CDN est prêt!
il faut maintenant changer les chemins de vos fichiers statiques pour qu’ils utilisent l’url du CDN.
Si vous avez la chance d’utiliser wordpress comme moi ( :p ) vous pouvez utiliser le plugin OSSDL CDN off-linker qui fera le travail pour vous ; il suffit de l’installer et de lui indiquer le nom de votre cdn, pour nous ca sera http://maroc-cdn.appspot.com.
Pour les autres cas, il est possible d’utiliser les fonctions ob_start ob_end_flush de php pour remplacer à la volée les chemins de tous les fichiers statiques.
Attention tout de même avant de remplacer les chemins de vos images, à faire les redirections nécessaires pour éviter les problème de référencement.
Ceci peut être effectué à l’aide de cette règle htaccess
RewriteCond %{HTTP_USER_AGENT} !^CirruxCache
RewriteRule ^(.*)\.(js|css|gif|png|jpg|jpeg) http://emaroc-cdn.appspot.com/$1.$2 [R=301,L]
Note : Ne pas changer le UserAgent, il est utilisé pour distinguer les requêtes CirruxCache de celle d’un visiteur normal. ceci évite des redirections en boucle.
Ceci clos la première partie de ce tutorial.
Dans la prochaine partie, je vous expliquerez comment utiliser votre propre domaine avec google app engine, pour créer un CDN dans un de vos sous domaines (exemple : cdn.emaroc.info).
celà peut s’avérer utile si vous comptez un jours migrer vers un CDN professionnel, ou complètement désactiver la fonctionnalité CDN sans prise de tête.