tutorial - Utiliser node.js comme un simple serveur web




npm (17)

Je veux lancer un serveur HTTP très simple. Chaque requête GET à example.com devrait recevoir index.html mais comme une page HTML normale (c'est-à-dire, 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 normale?

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 une ligne d' get 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?


Modifier:

Exemple d'application Node.js Node Chat possède la fonctionnalité que vous souhaitez.
Dans son README.textfile
3. Étape est ce que vous cherchez.

étape 1

  • créer un serveur qui répond avec Hello World sur le port 8002

étape 2

  • créer un index.html et le servir

étape 3

  • introduire util.js
  • changer la logique de sorte que tout fichier statique est servi
  • afficher 404 dans le cas où aucun fichier n'est trouvé

étape 4

  • ajouter jquery-1.4.2.js
  • ajouter client.js
  • changez index.html pour inviter l'utilisateur à entrer son surnom

Voici le server.js

Voici l' util.js


C'est l'une des solutions les plus rapides que j'utilise pour voir rapidement des pages web

sudo npm install ripple-emulator -g

A partir de là, entrez simplement le répertoire de vos fichiers html et lancez

ripple emulate

puis changez l'appareil en paysage Nexus 7.


Découvrez cet 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 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");

Fondamentalement, copier la réponse acceptée, mais en évitant de créer un fichier js.

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

Je l'ai trouvé très pratique.

Mettre à jour

Dès la dernière version d'Express, serve-static est devenu un middleware distinct. Utilisez ceci pour servir:

require('http').createServer(require('serve-static')('.')).listen(3000)

Installez serve-static premier.


J'ai trouvé une bibliothèque intéressante sur npm qui pourrait vous être utile. Il s'appelle mime ( npm install mime ou https://github.com/broofa/node-mime ) et peut déterminer le type mime d'un fichier. Voici un exemple d'un serveur web que j'ai écrit en l'utilisant:

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
 if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
        path += "index.html"
        } else {
            code = 403
            resp.writeHead(code, {"Content-Type": "text/plain"});
            resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);

})
} else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")

Cela servira tout fichier texte ou image régulier (.html, .css, .js, .pdf, .jpg, .png, .m4a et .mp3 sont les extensions que j'ai testées, mais la théorie devrait fonctionner pour tout)

Notes du développeur

Voici un exemple de sortie que j'ai obtenu avec:

Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

Notez la fonction unescape dans la construction du chemin. Cela permet d'utiliser des noms de fichiers avec des espaces et des caractères codés.


J'utilise le code ci-dessous pour démarrer un serveur web simple qui rend le fichier html par défaut si aucun fichier n'est mentionné dans Url.

var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic   Geek Files.htm';


http.createServer(function(req, res){

    var fileName = url.parse(req.url).pathname;
    // If no file name in Url, use default file name
    fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;

    fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
        if (content != null && content != '' ){
            res.writeHead(200,{'Content-Length':content.length});
            res.write(content);
        }
        res.end();
    });

}).listen(8800);

Il rendra tous les fichiers js, css et image, ainsi que tout le contenu html.

D'accord sur la déclaration " Aucun type de contenu n'est meilleur qu'un mauvais "


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

La façon dont je le fais est d'abord installer le serveur statique de noeud globalement via

npm install node-static -g

Naviguez ensuite jusqu'au répertoire qui contient vos fichiers html et démarrez le serveur static avec static .

Allez dans le navigateur et tapez localhost:8080/"yourHtmlFile" .


La version la plus simple que j'ai rencontrée est la suivante. À des fins éducatives, c'est le mieux, car il n'utilise pas de bibliothèques abstraites.

var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

Maintenant, allez dans le navigateur et ouvrez:

http://127.0.0.1/image.jpg

Ici, image.jpg devrait être dans le même répertoire que ce fichier. J'espère que cela aide quelqu'un :)


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 la documentation de http-server sur GitHub , ou lancez:

$ 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 400+ fourches existantes de ce projet:

Light Server: une alternative de rafraîchissement automatique

Une alternative intéressante à 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 avez besoin de 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.

L'éditeur de texte open source Brackets inclut également un serveur Web statique NodeJS. Il suffit d'ouvrir un fichier HTML dans Brackets, appuyez sur " Live Preview " et il démarre un serveur statique et ouvre votre navigateur sur la page. Le navigateur ** actualisera automatiquement chaque fois que vous éditerez et sauvegarderez le fichier HTML. Ceci est particulièrement utile lors du test de sites Web adaptatifs. Ouvrez votre page HTML sur plusieurs navigateurs / tailles de fenêtres / appareils. Sauvegardez votre page HTML et voyez instantanément si vos éléments adaptatifs fonctionnent car ils sont tous automatiquement actualisés.

Développeurs PhoneGap

Si vous êtes en train de coder une application mobile hybride , vous serez peut-être intéressé de savoir que l'équipe PhoneGap a PhoneGap ce concept de rafraîchissement automatique à sa nouvelle 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 (run 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. Découvrez-le sur 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

Le serveur local et les fonctions d'actualisation automatique sont cuites dans l'outil ionic . Exécutez simplement ionic serve partir de votre dossier d'application. Encore mieux ... ionic serve --lab pour afficher les vues côte à côte automatiques et rafraîchissantes d'iOS et d'Android.


Si vous avez un noeud installé sur votre PC, vous avez probablement le NPM, si vous n'avez pas besoin de choses NodeJS, vous pouvez utiliser le paquet de serve 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, naviguez simplement vers l'hôte comme:

http://localhost:3000

Step1 (invite de commande à l'intérieur [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


Une version 4.x express un peu plus verbeuse mais qui fournit la liste des répertoires, la compression, la mise en cache et la consignation des requêtes dans un nombre minimal de lignes

var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express

var app = express();

var oneDay = 86400000;

app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))

app.listen(process.env.PORT || 8000);

console.log("Ready To serve files !")

Vous n'avez besoin d'utiliser aucun module NPM pour exécuter un serveur simple, il existe une très petite bibliothèque appelée " NPM Free Server " 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é).


Vous pouvez utiliser Connect 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


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

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

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

//Just Change The CONTENT TYPE to 'html'




webserver