mercredi 20 octobre 2010

Hébergement de fichiers texte, javascript, css, html ou autre sur Google

Quelle est l'utilité d'héberger de tels fichiers sur Google et non pas sur un autre serveur?

Je crois que cette question n'a pas besoin de réponse, l'utilité est qu'on profite de la très généreuse bande passante de Google afin d'afficher nos pages html ou nos images, de charger nos scripts javascript ou nos feuilles de style css.
Après une longue recherche de la solution miraculeuse, et après avoir tout testé: Google sites, Google docs, encapsulation de script javascript et feuille de style css dans une image, ...etc j'ai fini par trouver la solution ultime.

En effet les deux solutions Google sites et Google docs ne sont pas permanentes, vu que les liens vers les fichiers changent de temps en temps, résultat on se retrouve forcé de mettre à jour le code source de notre site chaque jour! Ce qui n'est pas très pro. Aussi, les liens utilisés font une redirection, ce qui se traduit par un temps de chargement plus grand pour nos pages.

La solution du code encapsulé (caché) dans une image est quant à elle pas très propre, en effet j'ai remarqué un grand ralentissement du navigateur au moment de l'évaluation d'un code lourd avec la fonction eval().

La solution finale est donc d'utiliser Google code pour stocker ses fichiers et avoir un lien direct (sans redirection, permanent et surtout mime-typé). Voici comment on fait:

  1. Créer son projet Google code:


    Allez à la page http://code.google.com/hosting et cliquez sur Create a new project, donnez un nom, un sommaire et une description au projet, puis choisissez Subversion dans Version control system et n'importe quoi dans Source code license puis appuyez sur le bouton Create project, une fois le projet créé, vous vous retrouverez dans la page de gestion du projet, allez dans l'onglet Source et notez le lien du répertoire du projet, il ressemblera à ceci: https://ubugnu.googlecode.com/svn/trunk/ et se trouvera juste après svn checkout.
    Pour pouvoir mettre des fichiers dans ce répertoire vous aurez besoin d'un mot de passe (sinon n'importe qui pourra bricoler dans votre projet), pour avoir ce mot de passe cliquez sur googlecode.com password juste en dessous du lien, notez aussi ce mot de passe.

  2. Se connecter au projet via svn et héberger ses fichiers sur Google en synchronisant le répertoire du projet avec un répertoire local


    On aura besoin du paquet subversion, installez le avec:
    ubugnu@ubugnu-laptop:~$ sudo apt-get install subversion
    Une fois le paquet installé, voila ce qu'on va faire: créer un répertoire local qui sera la copie conforme du répertoire du projet et qu'on pourra synchroniser à tout moment, c'est à dire modifier les fichiers en local, et après synchroniser pour que les fichiers sur Google soient aussi modifiés. Voila comment on crée une copie du répertoire du projet:
    ubugnu@ubugnu-laptop:~$ svn checkout "https://ubugnu.googlecode.com/svn/trunk/" ubugnu
    Cette commande va me créer un répertoire nommé ubugnu qui sera l'exacte copie de celui sur le serveur, et comme ce dernier est vide, mon répertoire local le sera aussi.
    On va ajouter un fichier (par exemple javascript) dans notre répertoire local pour après le "propager" vers le serveur de Google, par exemple:
    ubugnu@ubugnu-laptop:~$ cd ubugnu
    ubugnu@ubugnu-laptop:~$ touche test.js
    ubugnu@ubugnu-laptop:~$ cp /var/www/test.js ./test.js
    ubugnu@ubugnu-laptop:~$ svn add ./test.js
    Nous aurons besoin d'associer à svn un éditeur de texte, par exemple nano serait le mieux adapté:
    ubugnu@ubugnu-laptop:~$ export SVN_EDITOR=nano
    Vous pouvez mettre votre éditeur préféré à la place de nano (par exemple gedit)
    Maintenant que notre répertoire local ubugnu a été modifié, on doit propager cette modification vers le serveur avec:
    ubugnu@ubugnu-laptop:~$ svn commit ./test.js --username ubugnu
    ou j'ai mis mon pseudo Google (mettez à sa place le votre, c'est celui contenu dans votre adresse email gmail)
    Une page s'affichera alors dans l'éditeur de texte que vous aviez préalablement choisis, sauvegardez là et quittez, puis tapez la lettre "c" (pour continue) dans le terminal et validez.
    Le terminal vous demandera alors le mot de passe de l'administrateur (root), tapez le, alors il vous demandera le mot de passe d'accès au répertoire du projet sur Google, tapez celui que vous avez noté tout à l'heure et validez. Bravo, le fichier vient d'être mis sur le serveur de Google.
    Pour le vérifier, cliquez sur l'onglet Source puis sur Browse et enfin sur trunck, vous verrez le fichier test.js, cliquez dessus, puis dans la page qui s'affiche clqiuez sur view raw file en bas à droite. Le lien que vous obtiendrez est celui que vous pourrez utiliser dans vos codes sources, il est rapide et permanent.

    Revenez en arrière et remarquez que le mime-type du fichier est text/plain (en dessous du lien view raw file) c'est à dire du texte brute, ce qui n'est pas un problème pour un fichier javascript mais peut l'être pour d'autres extensions (css en l'occurrence)

  3. Changer le mime-type des fichiers selon leur format:


    Donc comme je l'ai dis, le mime-type peut être problématique quand il s'agit de fichiers pour lesquels le navigateur vérifie le mime-type, essayez par exemple de mettre un fichier css sur le serveur et de l'inclure dans une page, vous verrez qu'il n'aura aucun effet car son mime-type est par défaut text/plain, il faudra le changer.

    Pour notre exemple, on ne va pas utiliser un fichier css mais un fichier html, créons un fichier html en local et mettons y un peu de code html:
    ubugnu@ubugnu-laptop:~$ touch test.html
    ubugnu@ubugnu-laptop:~$ nano test.html
    et on met

    <html>
    <body>
    <h2>it works</h2>
    </body>
    </html>
    Maintenant on propage cette modification avec commit
    ubugnu@ubugnu-laptop:~$ svn commit ./test.html --username ubugnu
    On va comme tout à l'heure dans l'onglet Source::Browse::trunck et on clique sur test.html, on clique après sur view raw file et on remarque que la page apparait en code source, c'est à dire que le navigateur n'a pas parsé le code html, simplement parce qu'il considère le fichier comme du texte brute car son mime-type est texte/plain.
    Voici donc comment réparer cela:
    ubugnu@ubugnu-laptop:~$ svn propset svn:mime-type text/html ./test.html
    puis on repropage
    ubugnu@ubugnu-laptop:~$ svn commit ./test.html --username ubugnu
    Actualisez la page test.html, vous verrez que le code est maintenant parsé (voici un exemple) :-)
    Si on avait par exemple voulu héberger du css, on aurait dû faire
    ubugnu@ubugnu-laptop:~$ svn propset svn:mime-type text/css ./test.css