Utiliser Node.js comme un simple serveur web

Question

Je veux faire fonctionner un serveur HTTP très simple. Chaque requête GET vers example.com devrait obtenir index.html mais comme une page HTML normale (c'est-à-dire la même expérience que lorsque vous lisez des pages web normales).

En utilisant le code ci-dessous, je peux lire le contenu du fichier index.html . Comment puis-je servir index.html comme une page web ordinaire ?

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(index);
}).listen(9615);

---

Une des suggestions ci-dessous est compliquée et me demande d'écrire une get pour chaque fichier de ressources (CSS, JavaScript, images) que je veux utiliser.

Comment puis-je servir une seule page HTML avec quelques images, CSS et JavaScript ?

Answer 1

Le serveur Node.js le plus simple est juste :

$ npm install http-server -g

Maintenant vous pouvez exécuter un serveur via les commandes suivantes :

$ cd MyApp

$ http-server

---

Si vous utilisez NPM 5.2.0 ou plus récent, vous pouvez utiliser http-server sans l'installer avec npx . Il n'est pas recommandé de l'utiliser en production, mais c'est un excellent moyen de faire fonctionner rapidement un serveur sur l'hôte local.

$ npx http-server

---

Ou bien, vous pouvez essayer ceci, qui ouvre votre navigateur web et active les requêtes CORS :

$ http-server -o --cors

Pour plus d'options, consultez le la documentation pour http-server sur GitHub ou courir :

$ http-server --help

Beaucoup d'autres fonctionnalités intéressantes et un déploiement d'une simplicité déconcertante pour NodeJitsu.

Fourchettes en vedette

Bien sûr, vous pouvez facilement compléter les fonctionnalités avec votre propre fourchette. Vous trouverez peut-être que cela a déjà été fait dans l'une des 800+ forks existantes de ce projet :

• https://github.com/nodeapps/http-server/network

Light Server : Une alternative au rafraîchissement automatique

Une alternative intéressante à http-server es light-server . Il prend en charge la surveillance des fichiers, le rafraîchissement automatique et de nombreuses autres fonctions.

$ npm install -g light-server 
$ light-server

Ajouter au menu contextuel de votre répertoire dans l'Explorateur Windows

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

Serveur REST JSON simple

Si vous avez besoin de créer un simple serveur REST pour un projet prototype alors serveur json pourrait être ce que vous recherchez.

Actualisation automatique des éditeurs

La plupart des éditeurs de pages Web et des outils IDE incluent désormais un serveur Web qui surveille vos fichiers sources et rafraîchit automatiquement votre page Web lorsqu'ils sont modifiés.

J'utilise Serveur en direct avec Visual Studio Code.

El source ouverte éditeur de texte Supports comprend également un serveur web statique NodeJS. Il suffit d'ouvrir n'importe quel fichier HTML dans Brackets, d'appuyer sur " Aperçu en direct " et il démarre un serveur statique et ouvre votre navigateur à la page. Le navigateur va rafraîchissement automatique chaque fois que vous modifiez et enregistrez le fichier HTML. Ceci est particulièrement utile pour tester des sites web adaptatifs. Ouvrez votre page HTML sur plusieurs navigateurs, tailles de fenêtres et appareils. Enregistrez votre page HTML et voyez instantanément si votre matériel adaptatif fonctionne comme prévu. todo rafraîchissement automatique.

Développeurs Web / SPA / PWA / Mobile / Desktop / Browser Ext Web

Certains frameworks SPA incluent une version intégrée de l'outil de gestion de l'image. Webpack DevServer qui peut détecter les modifications du fichier source et déclencher une reconstruction et un correctif incrémentiels (appelés rechargement à chaud) de votre application web SPA ou PWA. Voici quelques frameworks SPA populaires qui peuvent le faire.

Développeurs VueJS

Pour les développeurs VueJS, un des favoris est Cadre du Quasar qui comprend le Webpack DevServer prêt à l'emploi avec des commutateurs pour prendre en charge le rendu côté serveur (SSR) et le règles de procuration pour résoudre vos problèmes de CORS. Il comprend un grand nombre de composants optimisés conçus pour s'adapter à la fois au mobile et au bureau. Ceux-ci vous permettent de construire une application pour TOUTES les plateformes (SPA, SPA+SSR, PWA, PWA+SSR, applications AppStore mobiles Cordova et Capacitor, applications Electron Desktop Node+VueJS et même extensions de navigateur).

Un autre exemple populaire est NuxtJS qui prend également en charge la génération de code HTML/CSS statique ainsi que les modes de construction SSR ou non-SSR avec des plugins pour d'autres suites de composants d'interface utilisateur.

Développeurs React Framework

ReactJS les développeurs peuvent également préparation du rechargement à chaud .

Développeurs Cordova/Capacitor + Ionic Framework

Iconique est un uniquement sur mobile framework de composants hybrides qui prend désormais en charge le développement VueJS, React et Angular. Un serveur local avec des fonctions d'actualisation automatique est intégré dans l'application ionic outil. Il suffit de lancer ionic serve à partir de votre dossier d'applications. Encore mieux... ionic serve --lab pour afficher des vues côte à côte et à rafraîchissement automatique d'iOS et d'Android.

Answer 2

Note : Cette réponse date de 2011. Cependant, elle est toujours valable.

Vous pouvez utiliser Connectez-vous à y ServeStatic avec Node.js pour cela :

1. Installer connect et serve-static avec NPM

    $ npm install connect serve-static

2. Créez le fichier server.js avec ce contenu :

    var connect = require('connect');
    var serveStatic = require('serve-static');
   
    connect()
        .use(serveStatic(__dirname))
        .listen(8080, () => console.log('Server running on 8080...'));

3. Exécuter avec Node.js

    $ node server.js

Vous pouvez maintenant vous rendre sur http://localhost:8080/yourfile.html

Answer 3

Regarde ça Gist . Je le reproduis ici pour référence, mais l'essentiel a été régulièrement mis à jour.

Serveur web de fichiers statiques Node.JS. Mettez-le dans votre chemin d'accès pour lancer des serveurs dans n'importe quel répertoire, il prend un argument de port optionnel.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs"),
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

Mise à jour

Le gist gère les fichiers css et js. Je l'ai utilisé moi-même. L'utilisation de la lecture/écriture en mode "binaire" n'est pas un problème. Cela signifie simplement que le fichier n'est pas interprété comme du texte par la bibliothèque de fichiers et n'est pas lié au type de contenu renvoyé dans la réponse.

Le problème avec votre code est que vous renvoyez toujours un type de contenu "text/plain". Le code ci-dessus ne renvoie aucun type de contenu, mais si vous l'utilisez uniquement pour le HTML, le CSS et le JS, un navigateur peut les déduire sans problème. Un type de contenu inexistant est préférable à un type incorrect.

Normalement, le content-type est une configuration de votre serveur web. Je suis donc désolé si cela ne résout pas le problème. votre mais cela a fonctionné pour moi en tant que simple serveur de développement et j'ai pensé que cela pourrait aider d'autres personnes. Si vous avez besoin de types de contenu corrects dans la réponse, vous devez soit les définir explicitement comme joeytwiddle l'a fait, soit utiliser une bibliothèque comme Connect qui a des valeurs par défaut raisonnables. L'avantage de cette méthode est qu'elle est simple et autonome (pas de dépendances).

Mais je comprends votre problème. Voici donc la solution combinée.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  var contentTypesByExtension = {
    '.html': "text/html",
    '.css':  "text/css",
    '.js':   "text/javascript"
  };

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      var contentType = contentTypesByExtension[path.extname(filename)];
      if (contentType) headers["Content-Type"] = contentType;
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

Answer 4

Je pense que ce qui te manque en ce moment, c'est que tu envoies :

Content-Type: text/plain

Si vous voulez qu'un navigateur web rende le HTML, vous devez changer ceci en :

Content-Type: text/html

Answer 5

Étape 1 (dans l'invite de commande [j'espère que vous avez fait un cd dans votre dossier]) : npm install express

Étape 2 : Créer un fichier server.js

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");

var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder

app.get("/", function(request, response){ //root dir
    response.send("Hello!!");
});

app.listen(port, host);

Veuillez noter que vous devez également ajouter WATCHFILE (ou utiliser nodemon). Le code ci-dessus est seulement pour un simple serveur de connexion.

ÉTAPE 3 : node server.js o nodemon server.js

Il y a maintenant une méthode plus facile si vous voulez juste héberger un simple serveur HTTP. npm install -g http-server

et ouvrez notre répertoire et tapez http-server

https://www.npmjs.org/package/http-server