Question Utiliser node.js comme un simple serveur web


Je veux lancer un serveur HTTP très simple. Chaque demande GET à example.com devrait avoir index.html mais il s'agit d'une page HTML régulière (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 de index.html. Comment puis-je servir index.html comme une page Web régulière?

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 suggestion ci-dessous est compliquée et nécessite que j'écrive un get ligne pour chaque fichier de ressources (CSS, JavaScript, images) que je veux utiliser.

Comment puis-je diffuser une seule page HTML avec des images, CSS et JavaScript?


935
2018-05-21 20:44


origine


Réponses:


Vous pouvez utiliser Relier et ServeStatic avec Node.js pour cela:

  1. Installez connect et serve-static avec NPM

    $ npm install connect serve-static
    
  2. Créez un fichier server.js avec ce contenu:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    connect().use(serveStatic(__dirname)).listen(8080, function(){
        console.log('Server running on 8080...');
    });
    
  3. Exécuter avec Node.js

    $ node server.js
    

Vous pouvez maintenant aller à http://localhost:8080/yourfile.html


859
2017-12-08 08:09



Le serveur Node.js le plus simple est juste:

$ npm install http-server -g

Vous pouvez maintenant 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. Ceci n'est pas recommandé pour une utilisation en production, mais c'est un excellent moyen de faire fonctionner rapidement un serveur sur localhost.

$ npx http-server

Ou, vous pouvez essayer ceci, qui ouvre votre navigateur Web et permet aux demandes CORS:

$ http-server -o --cors

Pour plus d'options, consultez le documentation pour http-server sur GitHubou exécutez:

$ http-server --help

Beaucoup d'autres fonctionnalités intéressantes et un déploiement cerveau-mort-simple à NodeJitsu.

Fourches de caractéristique

Bien sûr, vous pouvez facilement recharger les fonctionnalités avec votre propre fourche. Vous pourriez trouver que cela a déjà été fait dans l'une des 800+ fourches existantes de ce projet:

Light Server: une alternative de rafraîchissement automatique

Une belle alternative à http-server est light-server. Il prend en charge la surveillance de fichiers et l'actualisation automatique ainsi que de nombreuses autres fonctionnalités.

$ 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\" \"-s\" \"%V\""

Serveur JSON REST simple

Si vous devez créer un serveur REST simple pour un projet prototype, alors json-server pourrait être ce que vous cherchez.

Éditeurs d'actualisation automatique

La plupart des éditeurs de pages Web et des outils IDE incluent désormais un serveur Web qui surveillera vos fichiers source et actualisera automatiquement votre page Web lorsqu'ils seront modifiés.

le Open source éditeur de texte Supports inclut également un serveur Web statique NodeJS. Il suffit d'ouvrir un fichier HTML dans les crochets, appuyez sur "Aperçu en direct"et il démarre un serveur statique et ouvre votre navigateur à la page.Le navigateur ** actualisera automatiquement chaque fois que vous éditez et enregistrez le fichier HTML.Ceci est particulièrement utile lors du test de sites Web adaptatifs.Pour ouvrir votre page HTML sur plusieurs navigateurs / tailles de fenêtres / Sauvegardez votre page HTML et voyez instantanément si vos éléments adaptatifs fonctionnent tout actualisation automatique.

Développeurs PhoneGap

Si vous codez un application mobile hybride, vous pourriez être intéressé de savoir que le PhoneGapéquipe a pris ce concept de rafraîchissement automatique à bord avec leur nouveau Application PhoneGap. Ceci est une application mobile générique qui peut charger les fichiers HTML5 à partir d'un serveur au cours du développement. Cette astuce est très simple car vous pouvez désormais ignorer les étapes de compilation / déploiement lente de votre cycle de développement pour les applications mobiles hybrides si vous modifiez des fichiers JS / CSS / HTML, ce que vous faites la plupart du temps. Ils fournissent également le serveur Web statique NodeJS (exécution phonegap serve) qui détecte les modifications de fichiers.

PhoneGap + Sencha Touch Développeurs

J'ai maintenant largement adapté le serveur statique PhoneGap et l'application de développement PhoneGap pour les développeurs Sencha Touch et jQuery Mobile. Regardez-le à Sencha Touch Live. Prend en charge les codes QR --qr et --localtunnel qui transfère votre serveur statique de votre ordinateur de bureau à une URL en dehors de votre pare-feu! Des tonnes d'utilisations. Massive accélérer pour les développeurs mobiles hybrides.

Cordova + Ionic Framework Développeurs

Les fonctionnalités du serveur local et de l'actualisation automatique sont intégrées au ionic outil. Juste courir ionic serve à partir du dossier de votre application. Encore mieux ... ionic serve --lab pour voir les vues côte à côte automatiques et rafraîchissantes d'iOS et d'Android.


828
2018-04-17 01:21



Regarde ça essentiel. 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 pour lancer des serveurs dans n'importe quel répertoire, prend un argument de port facultatif.

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");

Mettre à jour

L'essentiel 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 ne l'utilisez que pour HTML, CSS et JS, un navigateur peut en déduire que tout va bien. Aucun type de contenu n'est meilleur qu'un mauvais.

Normalement, le type de contenu est une configuration de votre serveur Web. Donc je suis désolé si cela ne résout pas votre problème, mais cela a fonctionné pour moi comme un 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 les définir explicitement comme joeytwiddle ou utiliser une bibliothèque comme Connect qui a des valeurs par défaut raisonnables. La bonne chose à ce sujet est que c'est simple et autonome (pas de dépendances).

Mais je ressens votre problème. Donc, voici 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");

147
2017-11-29 21:46



Vous n'avez pas besoin d'exprimer. Vous n'avez pas besoin de vous connecter. Node.js fait http NATIVELY. Tout ce que vous devez faire est de renvoyer un fichier dépendant de la requête:

var http = require('http')
var url = require('url')
var fs = require('fs')

http.createServer(function (request, response) {
    var requestUrl = url.parse(request.url)    
    response.writeHead(200)
    fs.createReadStream(requestUrl.pathname).pipe(response)  // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync) 
}).listen(9615)    

Un exemple plus complet qui garantit que les requêtes ne peuvent pas accéder aux fichiers sous un répertoire de base et gère correctement les erreurs:

var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname   // or whatever base directory you want

var port = 9615

http.createServer(function (request, response) {
    try {
        var requestUrl = url.parse(request.url)

        // need to use path.normalize so people can't access directories underneath baseDirectory
        var fsPath = baseDirectory+path.normalize(requestUrl.pathname)

        var fileStream = fs.createReadStream(fsPath)
        fileStream.pipe(response)
        fileStream.on('open', function() {
             response.writeHead(200)
        })
        fileStream.on('error',function(e) {
             response.writeHead(404)     // assume the file doesn't exist
             response.end()
        })
   } catch(e) {
        response.writeHead(500)
        response.end()     // end the response so browsers don't hang
        console.log(e.stack)
   }
}).listen(port)

console.log("listening on port "+port)

75
2017-10-14 06:59



Je pense que la partie qui vous manque en ce moment est que vous envoyez:

Content-Type: text/plain

Si vous souhaitez qu'un navigateur Web affiche le code HTML, vous devez le modifier en:

Content-Type: text/html

64
2018-05-21 21:11



Step1 (à l'intérieur de l'invite de commande [J'espère que vous cd à votre dossier]): npm install express

Étape 2: Créez 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);

S'il vous plaît noter, vous devez ajouter WATCHFILE (ou utiliser nodemon) aussi. Au-dessus du code est seulement pour un serveur de connexion simple.

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

Il existe maintenant une méthode plus simple si vous voulez simplement héberger un serveur HTTP simple. npm install -g http-server

et ouvrez notre répertoire et tapez http-server

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


43
2018-02-24 14:44



Le moyen rapide:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

Ta façon:

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {
    console.dir(req.url);

    // will get you  '/' or 'index.html' or 'css/styles.css' ...
    // • you need to isolate extension
    // • have a small mimetype lookup array/object
    // • only there and then reading the file
    // •  delivering it after setting the right content type

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end('ok');
}).listen(3001);

27
2018-02-07 08:28



Plutôt que de traiter une instruction switch, je pense qu'il est plus facile de rechercher le type de contenu d'un dictionnaire:

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

19
2017-11-24 21:08



Ceci est essentiellement une version mise à jour de la réponse acceptée pour connecter la version 3:

var connect = require('connect');
var serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

J'ai également ajouté une option par défaut pour que index.html soit utilisé par défaut.


14
2018-06-20 17:40



Vous n'avez pas besoin d'utiliser des modules NPM pour exécuter un serveur simple, il y a une très petite bibliothèque appelée "Serveur NPM gratuit"pour Node:

50 lignes de code, sorties si vous demandez un fichier ou un dossier et lui donne une couleur rouge ou verte si elle a échoué pour travaillé. Moins de 1KB en taille (minifié).


11
2017-11-09 16:10



Si vous avez un noeud installé sur votre PC, vous avez probablement le NPM, si vous n'avez pas besoin de NodeJS, vous pouvez utiliser le servir paquet pour ceci:

1 - Installez le paquet sur votre PC:

npm install -g serve

2 - Servir votre dossier statique:

serve <path> 
d:> serve d:\StaticSite

Il vous montrera quel port votre dossier statique est servi, il suffit de naviguer vers l'hôte comme:

http://localhost:3000

9
2018-02-23 17:57