Comment configurer un serveur de test local ?

Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.

PrĂ©requis : Vous devez au prĂ©alable savoir comment Internet fonctionne et ce qu'est un serveur Web.
Objectif: Vous apprendrez Ă  configurer un serveur de test local.

Fichiers locaux contre fichiers distants

Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en dĂ©posant celui-ci dans la fenĂȘtre de votre navigateur, ou en faisant Fichier > Ouvrir... et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de maniĂšres d'y arriver.

Vous savez que vous avez lancĂ© l'exemple depuis un fichier local, lorsque l'URL commence par file:// suivi du chemin d'accĂšs dans votre systĂšme de fichiers. Par contre, si vous consultez un de nos exemples hĂ©bergĂ©s sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par http:// ou https:// ; dans ce cas le fichier a Ă©tĂ© servi via HTTP.

Le problĂšme du test local

Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :

  • Ils sont basĂ©s sur des requĂȘtes asynchrones. Certains navigateurs comme Chrome n'exĂ©cutent pas de requĂȘtes asynchrones (voyez RĂ©colter des donnĂ©es depuis le serveur ) si vous lancez simplement l'exemple comme un fichier local. Cela est dĂ» Ă  des restrictions de sĂ©curitĂ© (voir SĂ©curitĂ© des sites Web pour en savoir plus).
  • Ils mettent en Ɠuvre un langage spĂ©cifique, tournant sur le serveur. Des langages cĂŽtĂ©-serveur (comme PHP ou Python) nĂ©cessitent un environnement spĂ©cifique fourni par le serveur pour interprĂ©ter le code et donner des rĂ©sultats.

Créer un serveur HTTP local simple

Pour contourner le problĂšme des requĂȘtes asynchrones, nous devons tester de tels exemples en les exĂ©cutant depuis un serveur local. Le module SimpleHTTPServer de Python permet une mise en Ɠuvre simple de cette solution.

VoilĂ  la marche Ă  suivre :

  1. Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute dĂ©jĂ  disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :

    • Allez Ă  python.org
    • Sous TĂ©lĂ©charger, cliquez le lien pour Python "3.xxx".
    • Tout en bas de la page,  tĂ©lĂ©charger le fichier pointĂ© par le lien Windows x86 executable installer.
    • ExĂ©cuter ce programme quand le tĂ©lĂ©chargement est fini.
    • Sur la premiĂšre page de l'installeur, assurez-vous d'avoir cochĂ© la case  "Ajouter Python 3.xxx to PATH".
    • Cliquer Install, puis Fermer quand l'installation est complĂšte.
  2. Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vĂ©rifier que l'installation prĂ©cĂ©dente s'est dĂ©roulĂ©e correctement, entrez la commande suivante :

    python -V
  3. Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande cd, placer votre répertoire de travail dans le dossier contenant l'exemple.

    #inclure le nom du dossier pour y s'y rendre,
    #par exemple
    cd Bureau
    # utiliser deux points pour remonter dans
    #le dossier parent si nécessaire
    cd ..
  4. Entrer la commande pour démarrer le serveur dans ce dossier.

    # Si la version de Python retournée est ultérieur à 3.X
    python3 -m http.server
    # Si la version de Python retournée est ultérieur à 2.X
    python -m SimpleHTTPServer
  5. Par dĂ©faut, il affiche la liste des fichiers  du dossier sur un serveur de dĂ©veloppement, sur le port 8000. Vous pouvez aller Ă  ce serveur en saisissant  l'URL localhost:8000 dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne â€” cliquer le fichier HTML que vous voulez exĂ©cuter.

Note : Si le port 8000 est occupĂ©, vous pouvez choisir un autre port en spĂ©cifiant une autre valeur aprĂšs la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accĂ©der Ă  votre contenu Ă  l'adresse localhost:7800.

Faire fonctionner localement des langages serveur

Le module SimpleHTTPServer de Python est utile, mais il ne sait pas comment exĂ©cuter du code Ă©crit dans des langages comme PHP ou Python. Pour gĂ©rer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dĂ©pend du language serveur que vous essayez d'exĂ©cuter. Voici quelques exemples :

  • Pour exĂ©cuter du code Python cotĂ©-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez dĂ©couvrir comment utiliser le framework Django en lisant Django Web Framework (Python). Flask est une alternative Ă  Django, un peu plus lĂ©gĂšre. Pour l'exĂ©cuter, vous aurez besoin d'installer Python/PIP, puis Flask en utilisant pip3 install flask.  À ce point, vous devriez ĂȘtre capable d'exĂ©cuter les exemples Python Flask en utilisant par exemple python3 python-example.py, puis consulter localhost:5000 dans votre navigateur.
  • Pour exĂ©cuter du code Node.js (JavaScript) cĂŽtĂ©-serveur, vous aurez besoin d'utiliser un  noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir Express Web Framework (Node.js/JavaScript).
  • Pour exĂ©cuter du code PHP cĂŽtĂ© serveur, vous aurez besoin d'une configuration serveur qui peut  interprĂ©ter PHP. De bonnes options pour tester PHP localement sont MAMP (Mac and Windows) , AMPPS (Mac, Windows, Linux) and LAMP (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui crĂ©ent des configurations locales vous permettant d'exĂ©cuter un serveur Apache, PHP et des bases de donnĂ©es MySQL.