Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Node.js

Servir des fichiers statiques

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
À l'aide de votre serveur, il est possible de servir des fichiers tels que les fichiers HTML. Ainsi, vous les rendrez disponibles sur Internet.
10:41

Transcription

Bon, on s’est fait un petit serveur basique. Maintenant il serait temps d’avoir un serveur plus intelligent que ça, qui serait en capacité d’aller récupérer l’url et de travailler avec, et surtout de venir servir des fichiers. Alors on va se faire un nouveau dossier qui va s’appeler Public. Et ça, je vous le conseille, c'est-à-dire que dans Public, on va aller mettre un Index.html, et on va aussi, pourquoi pas, se créer un style.css, un fichier de style. Ce qui veut dire qu’on va avoir la capacité de servir soit un Index.html, soit un fichier de style. Alors comment on va s’y prendre ? On va d’abord enlever tout ça parce que ça ne sert à rien. On va continuer à servir notre serveur sur le port 300. Et on va donc laisser tout ça comme ça. Par contre, on va ici se coder quelque chose d’un petit peu plus particulier, qui va être en capacité d’abord de nous dire quelle est l’url qui a appelé. Donc on va se faire un console.log en haut, qui va nous donner un petit peu d’information. Alors cette information, nous, ce qu’on veut vraiment savoir, d’abord c’est quelle est l’url qui a été appelée par l’utilisateur. Donc sur quoi ? Donc on va faire une req.method. On va faire ensuite « : » Et on va lui demander de nous donner aussi l’url. Donc request, et puis on va faire ici un for, et on va lui demander ici l’url. Donc ça va être req.url. Ça, vous l’avez déjà vu. Alors ça c’est génial parce que du coup ici, même si le serveur ne réagit pas vraiment, on va avoir de l’information. Bien sûr, si vous voulez que ça réagisse, il faut forcément ici avoir un end, c’est obligatoire. Pour voir que ça fonctionne, faites juste comme ça un petit end. Vous lancez votre serveur, et puis vous allez aller le lancer ici votre serveur. Et pourquoi pas vous allez aller chercher des urls particulières. Par exemple plop, et puis ensuite par exemple le index.html, et puis tant qu’on y est allez hop, on va aller chercher aussi style.css. Quand vous aurez fait ça, vous allez revenir ici à votre serveur, et vous allez voir qu’effectivement il y a plein d’informations qui passent. Alors attention, parce que là j’ai fait res.method, c’est req. Si vous ne récupérez pas method sur l’objet req, ça ne va pas fonctionner. On peut réessayer. Voilà donc le « / ». Ensuite on va essayer l’index.html, qu’on avait juste ici. Et puis on va finir aussi ici par le style : style.css. Là c’est vraiment pour voir ce que ça donne et vous voyez qu’effectivement ici on a du get sur le « / », favicon, etc. À chaque fois, ça va récupérer des infos. Donc ça, ça va vous donner de l’information, c’est déjà la première étape. On va tuer le serveur, et puis on va vider la console. Et on va essayer maintenant d’intercepter les différentes informations et de faire un rendu. Alors comme vous allez faire du rendu, je vous conseille ici de venir travailler sur un petit html très très simple qu’on va travailler ensemble. Et ici vous allez lui mettre un petit body, voilà, body et puis tabulation. Et on va lui mettre simplement un h1, et « je suis un serveur sur index.html », comme ça. Et puis le style.css, vous pouvez aussi le récupérer. Vous pourriez simplement styliser le h1 en disant que la couleur du h1, color, c’est red. Alors, si vous ne savez plus comment on insère le style dans une page, vous pouvez tout à fait aller regarder sur n’importe quelle page html. Vous affichez le code source de la page, et vous retrouverez directement ici le link qui permet de rajouter, eh bien, un css à une page. Donc comment après ça va fonctionner ? On va simplement dans l’index.html au niveau ici du guide, mettre le style. Bien sûr, nous, ça ne va pas être aussi long que ça. Le style ça va être, on va enlever tout ça, le href ce qu’on va avoir ici, ça va être quoi ? Public/ et le style.css. Mais il ne faut pas que les gens sachent que c’est public. Donc concrètement, normalement c’est juste style.css. C’est à nous maintenant avec le serveur de venir travailler cette partie-là pour qu’elle s’affiche proprement. Et donc on va servir les fichiers en fonction de ce qui est demandé au serveur. Comment on va se débrouiller pour faire ça ? Vous savez bien que req.url nous donne l’url. Donc on peut tout à fait faire un if req.url === /, et à ce moment-là, on fait quelque chose. On peut ensuite se préparer un else if comme ça. Et puis on va mettre une condition évidemment. Req.url ===, et puis on pourrait dire c’est le style.css. Mais on pourrait aussi pourquoi pas req.url vouloir le matcher. Eh bien ça, ça fonctionne, vous pouvez faire un .match, comme ça. Et là vous allez mettre à l’intérieur ce qu’on appelle une « regex ». Ici on va simplement faire un .css, et puis ce qu’on veut. Voilà comme ça. Donc là on va lui dire que si ça matche avec .css, alors on veut servir du css. Enfin il faut quand même se prévoir, eh bien, une vérification différente, c'est-à-dire un vrai else qui nous permettra de servir simplement une réponse : « res. », et là on va faire un writeHead qu’on a déjà fait avant. Et on va lui dire que s’il ne trouve pas c’est une 404. 404, c’est le contenu qui n’est pas trouvé. Donc une 404 très simple avec pourquoi pas ici un encoding très simple aussi. Donc un Content-Type comme ça, « : », et puis là on peut lui mettre du text/plain, ce n’est pas un problème. Et surtout on pensera bien aussi à faire une res.end. Et puis à lui dire « 404 not found ». Ça vous devez déjà l’avoir vu, bah voilà comment on le code, c’est extrêmement simple. Comment maintenant je vais récupérer l’index.html qui se trouve dans le dossier public ? Alors ça, c’est embêtant quand même. Eh bien on va utiliser notre fameux outil fs, qui nous permet de faire un readFile. Et on va lui dire d’aller les récupérer quelque part. Alors on va les récupérer où ? Bah on sait pertinemment où aller les récupérer. On sait que sur le « / », ce qu’on veut nous, c’est l’index.html. Donc ça va faire ./public/index.html. Donc il va aller le lire ce fichier-là. Et ensuite on va lui demander, ce fichier, de le lire en UTF-8, UTF-8. Et enfin on va lui dire d’envoyer l’information. Alors, vous vous souvenez, erreur d’abord et html ensuite. Vous l’appelez comme vous voulez le paramètre, bien évidemment. Et on va pouvoir servir maintenant la réponse de façon très simple également. Alors on sait que c’est trouvé, donc ça va forcément ici être du 200. Ce n’est pas du 404, attention. 200 c’est réponse trouvée, donc c’est du 200. Ici l’encoding, donc le Content-Type c’est du html. On va faire text/html. Et enfin eh bien, la réponse qu’on a là, regardez, ça va être ça : res.end(html). Maintenant dans le cas du css. C’est un tout petit peu plus compliqué. Parce qu’on ne sait pas quel css on va récupérer. Ça va être délicat, donc il va falloir quand même qu’on crée d’abord une cssPath qui nous permet de donner l’information. Et pour ça on va utiliser path. Vous vous souvenez de path, donc on va aller le récupérer. Require comme ça et puis path. Et path ça va nous permettre de faire quoi ? Bah ça va nous permettre de travailler directement sur le path. Pensez à quelque chose quand même, c’est que là on va aller lire un fichier qui va être un css. Donc on va devoir créer un pipe particulier, et puis renvoyer la réponse. Déjà on va composer ici le path. Le path.join, on sait que ça va être quoi ? Bah ça va partir forcément du répertoire de base, donc dirname. Ensuite ça va être quoi ? Ça va être le répertoire public. Et puis enfin, bien évidemment, ça va être req.url, parce qu’on veut récupérer avec req.url le fichier css qui est appelé. Donc ça c’est bon. Maintenant il faut créer ce qu’on appelle un stream, forcément. Donc on va se faire un var fileStream, on va l’appeler comme ça. Et qu’est-ce que ça va prendre ? Bah ça va être un « fs. », et là on va faire un createReadStream. Donc là on va aller lire un fichier, alors attention à ne pas oublier de lettres. On va lui donner le path que l’on vient de créer. Donc on sait que ça doit être récupéré là. Et toujours pareil, c’est de l’UTF-8. Là le pipe qu’on a créé, qui en fait est un stream, on va devoir l’écrire. Et pour l’écrire, eh bien, il va falloir utiliser forcément quelque chose dans laquelle on peut écrire. Je vous l’ai dit tout à l’heure, response, request, tout ça c’est des pipes. Donc on peut pousser de l’information dans ces pipes-là. Déjà on va se reprendre cette petite partie-là. Bien sûr ce que l’on va servir, ça ne va pas être du texte html, mais du texte css. Et maintenant on va demander au fileStream qu’on a créé plus haut, de venir ajouter, donc de piper en fait, ce qu’il a récupéré, ce qu’il a lu, à l’intérieur de quelque chose. Et ce quelque chose, c’est la response. Là vous venez de créer un serveur qui est capable de servir des fichiers. On récapitule, on va simplement se câbler sur les urls, soit ça matche, soit c’est une url directe. Et à ce moment-là on rend quelque chose, un fichier bien évidemment. Et du coup on va avoir ici un petit serveur qui va fonctionner, qui va être en capacité de venir afficher l’index.html, et surtout de venir afficher le css, parce que vous voyez qu’ici effectivement, il y a un appel vers css. Lui, il va faire une résolution du répertoire dans lequel on va aller chercher css. Et il va tout simplement l’envoyer, le piper, à l’intérieur de res, donc le servir. Voyez que là, ce n’est pas très compliqué non plus. On a décomposé ça au fur et à mesure, donc ça ne devrait pas non plus vous poser beaucoup de problèmes. Il suffit simplement après de reproduire la même chose si vous avez des images à servir, par exemple. Donc ça vous pourrez le faire pour des images aussi, sans aucun problème. Sachez simplement qu’il faudra modifier ici le type de contenu, enfin du moins pour votre réponse. Si c’est de l’image, c’est image/jpeg, par exemple, ou autre. Vous pouvez matcher sur n’importe quelle extension comme ça pour venir servir au travers de votre fichier et de votre serveur node.js, n’importe quel contenu. Je vous redis juste ça parce que ça me paraît essentiel : pensez bien à mettre tous vos fichiers non-accessibles de base, donc vraiment en fait à les mettre dans un dossier particulier, pour pouvoir les sortir de l’exécution de votre serveur. C’est important, ça s’appelle « le château de sable », en sécurité. Et il faut absolument maintenir ce genre de fonctionnement et d’organisation parce que ça vous permet d’avoir des fichiers dans un dossier qui n’est pas accessible publiquement. C’est forcément votre serveur qui va les servir, et c’est uniquement votre serveur qui sait exactement où se trouvent les fichiers.

L'essentiel de Node.js

Exploitez les possibilités de Node.js et créez des applications côté serveur entièrement en JavaScript. Travaillez avec des requêtes web, gérez le protocole WebSocket, etc.

4h00 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Node.js Node.js 7.0
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !