Tutorial : Mettre en place un CDN gratuit pour votre site web avec Google App Engine – 1ère partie


     11


Alaa-eddine

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.

 

 

 

 



 

A lire également

 
  • Juste excellent ce tutoriel. Bravo !

    Les CDN sont un vrai plus pour le temps de chargement et l’expérience utilisateur.

    J’attends avec impatience la seconde partie pour pouvoir créer mon CDN directement sur un sous-domaine de mon hébergement.

  • j’a pas compris , comment mes ressources doivent etre mis sur le CDN de google? ca sera d’une facon transparente? ca sera comment pour les nouveau images?

  • Alaa-eddine

    @Daniel : la 2ème partie est en cours de préparation (pas trop le temps en ce moment 😉 )

    @ayed : tes ressources seront automatiquement copiée depuis ton serveur vers le CDN, c’est ca le rôle de cirruxCache, sinon on pouvait faire sans.

  • ok, si jamais j’ai tout est bien configuré et fonctionnelle, un jour j’ai 500MO tout occupé dans mon compte chez google.com, les nouveaux fichiers statiques vont etre servie par mon site web ou bien google supprimera les fichiers qui n’ont été pas utilisé il y a x jours et les rempalces par les nv ?

    Merci bien

  • Alaa-eddine

    tu peux toujours configurer cirruxcache pour donner des durée de vie plus courte à ton cache comme ca il sera purger plus souvent.
    si par contre tu as vraiment beaucoup de contenu statique et tu as réellement besoins de dépasser les 500Mo, tu devrais passer à l’offre payante.
    pour le stockage par exemple tu paye $0.005/jour et par Go de donnée. pour un CDN c’est donné. (faut faire attention à la bande passante également)

  • Belorgey

    Bonjour, j’ai suivi tout le didacticiel. Il est vraiment très bien. J’ai juste perdu un peu de temps car j’ai téléchargé la dernière version de cirrusxcache, alors qu’il vaut mieux rester avec la 0.3.1 (c’était la dernière lors de l’écriture du didacticiel).

    Dans mon site, j’ai remplacé les adresses de tous mes fichiers statiques par «http://nom_de_mon_cdn.appspot.com/adresse_du_fichier_statique»

    En soumettant mon site à Yslow j’espérai obtenir un A pour la rubrique «use a CDN». Or Yslow ne semble pas réaliser qu’ils font partie d’un CDN.

    Est-ce que vous avez la même chose chez vous?

    Voici l’adresse du site en question
    «
    link to celine.gurlek.perso.neuf.fr
    »
    Attention il ne marche pas sous ie.

  • Belorgey

    J’ai trouvé!
    Il fallait juste lire la FAQ de Yslow.
    link to developer.yahoo.com

  • wow, ça à l’air super complet! Première fois que je tombe sur un tuto aussi détaillé sur le sujet et en plus en français! Ceci dit je garde ça pour plus tard, car mon site, aujourd’hui n’est pas grand, mais dans le futur ça va me servir. Merci!

  • jeremyb42

    Une remarque : où est-ce que l’on met les déclarations des classes ? par que “en dessous” c’est pas super précis comme info, du coup on peux pas aller plus loin das le tuto.
    Pourrais-tu mettre ton fichier complet à titre d’exemple (ça permet de voir aussi des trucs que tu aurai oublié de détailler par exemple).

  • Arbaoui Mehdi

    Merci pour le tutoriel, mais pour l’édition des classes c’est au niveau du fichier config.py au lieu de app.py.

  • Sébastien

    Merci pour ce tuto très utile.
    Je l’ai mis en place et tout fonctionne.
    Seule HIC, puis-je mettre à jour les fichiers mis en cache sur LE CDN sans attendre l’expiration du cache ?
    Manuellement ?
    Merci d’avance