Utilisation de node.js comme un simple serveur Web


1103

Je veux exécuter un serveur HTTP très simple. Chaque demande GET example.comdoit recevoirindex.html servie, mais en tant que page HTML standard (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.htmlde 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 m'oblige à écrire une getligne pour chaque fichier de ressources (CSS, JavaScript, images) que je souhaite utiliser.

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


21
Jetez un œil au module npm "connect". Il fournit de telles fonctionnalités de base et est la base de nombreuses configurations et autres packages.
Mörre

5
Vous devez mettre votre solution comme réponse et la marquer comme correcte.
graham.reeds

8
J'ai pu trouver une solution parfaite par Eric B. Sowell appelée Serving static files from node js . Lisez le tout. Hautement recommandé.
idophir

1
Jetez un oeil à un module que j'ai écrit appelé Cachemere. Il met également en cache automatiquement toutes vos ressources. github.com/topcloud/cachemere
Jon

1
local-web-server est un bon exemple à regarder
Lloyd

Réponses:


993

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 une version plus récente, vous pouvez l'utiliser http-serversans l'installer avec npx. Ce 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 active les requêtes CORS:

$ http-server -o --cors

Pour plus d'options, consultez la documentation de http-serverGitHub ou exécutez:

$ http-server --help

Beaucoup d'autres fonctionnalités intéressantes et un déploiement simple et cérébral sur NodeJitsu.

Fourches

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

Serveur léger: une alternative rafraîchissante automatique

Une bonne alternative à http-serveris light-server. Il prend en charge l'observation de fichiers et l'actualisation automatique et 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\" \"-o\" \"-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 recherchez.

Éditeurs de rafraîchissement 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 changent.

J'utilise Live Server avec Visual Studio Code.

L' éditeur de texte open source Brackets comprend également un serveur Web statique NodeJS. Ouvrez simplement n'importe quel fichier HTML entre parenthèses, appuyez sur " Aperçu en direct " et il démarre un serveur statique et ouvre votre navigateur sur la page. Le navigateur ** s'actualisera automatiquement chaque fois que vous modifiez et enregistrez le fichier HTML. Cela est particulièrement utile lors des tests de sites Web adaptatifs. Ouvrez votre page HTML sur plusieurs navigateurs / tailles de fenêtres / appareils. Enregistrez votre page HTML et voyez instantanément si vos éléments adaptatifs fonctionnent car ils sont tous actualisés automatiquement.

Développeurs PhoneGap

Si vous codez une application mobile hybride , vous serez peut-être intéressé de savoir que l' équipe PhoneGap a intégré ce concept de rafraîchissement automatique avec sa nouvelle application PhoneGap . Il s'agit d'une application mobile générique qui peut charger les fichiers HTML5 à partir d'un serveur pendant le développement. C'est une astuce très astucieuse car vous pouvez désormais ignorer les étapes de compilation / déploiement lentes 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 NodeJS statique (run phonegap serve) qui détecte les modifications de fichiers.

Développeurs PhoneGap + Sencha Touch

J'ai maintenant largement adapté le serveur statique PhoneGap et l'application développeur 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 procurent à votre serveur statique de votre ordinateur de bureau une URL en dehors de votre pare-feu! Des tonnes d'utilisations. Accélération massive pour les développeurs mobiles hybrides.

Développeurs de cadres Cordova + Ionic

Le serveur local et les fonctionnalités d'actualisation automatique sont intégrés à l' ionicoutil. Exécutez simplement à ionic servepartir du dossier de votre application. Encore mieux ... ionic serve --labpour afficher des vues côte à côte à rafraîchissement automatique d'iOS et d'Android.


9
npm install live-server -g si vous voulez la même chose, mais avec le rechargement automatique lorsqu'il détecte un changement de fichier

3
Un petit "gotcha" -. Le serveur http utilise par défaut le service sur le site à 0.0.0.0. Par conséquent, vous DEVEZ spécifier une adresse IP pour qu'elle fonctionne correctement en tant que serveur de test local:http-server -a localhost
JESii

1
Oui ... 0.0.0.0 le liera à TOUTES les IP de tous vos appareils IP en réseau (WiFi, Câble, Bluetooth), ce qui est une mauvaise idée sur n'importe quel réseau public car vous pourriez potentiellement être piraté. Ce n'est pas si mal si vous vouliez simplement faire une démonstration de votre application à l'intérieur d'un réseau sécurisé pare-feu pour en montrer d'autres ou la connecter à votre appareil mobile sur le même réseau.
Tony O'Hagan

Petit outil vraiment utile. J'ai beaucoup d'applications Node en cours d'exécution sur mon serveur, donc j'ajoute une option "-p" pour choisir un port autre que 8080. Par exemple: nohup http-server -p 60080 & (le démarre en arrière-plan et vous permet de vous déconnecter du session shell.) Vous devez vous assurer que le port est ouvert au monde, par exemple: iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT (sur de nombreux systèmes Linux)
Blisterpeanuts

Comment l'exécuter en tant que service, donc je peux l'utiliser même en fermant l'invite de commande. Existe-t-il un outil qui fournit ce type sinon cela.
Sandeep sandy

983

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, () => console.log('Server running on 8080...'));
  3. Exécuter avec Node.js

    $ node server.js

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


24
L'idée était de ne pas utiliser une bibliothèque existante, pour des raisons pédagogiques, mais je pense que l'utilisation d'Express est un meilleur conseil que sa version de niveau inférieur, Connect.
idophir

135
La partie d'Express qui sert un fichier statique est simplement Connect, donc je ne vois pas la raison d'utiliser Express pour servir des fichiers statiques. Mais oui, Express fera également l'affaire.
Gian Marco Gherardi

7
Excellent conseil. Les étapes ci-dessus ont très bien fonctionné pour mes besoins. Merci à Gian, voici le lien vers Express où il révèle qu'il est construit sur Connect, expressjs.com Voici comment utiliser Express: expressjs.com/guide.html
Jack Stone

10
Ne fonctionne pas pour moi, le résultat ne peut pas obtenir /test.html. Dois-je remplacer __dirname par un nom de répertoire?
Timo

3
Maintenant, connect est passé à la version 3. Par conséquent, il faut utiliser serve-static comme miqid décrit. J'ai posté une autre réponse avec le code complet pour connect v3.
tomet

160

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

Mise à 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 l'utilisez uniquement pour HTML, CSS et JS, un navigateur peut en déduire très bien. Aucun type de contenu n'est meilleur qu'un mauvais.

Normalement, le type de contenu est une configuration de votre serveur Web. Je suis donc désolé si cela ne résout pas votre problème, 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 ou utiliser une bibliothèque comme Connect qui a des valeurs par défaut raisonnables. La bonne chose à ce sujet est qu'il est simple et autonome (pas de dépendances).

Mais je ressens 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");

3
Cela ne résout pas vraiment le "problème". Vous retournez index.html sous forme de fichier binaire et vous ne gérez pas css et js.
idophir

4
Il gère css et js. Il ne renvoie pas index.html en tant que fichier binaire. Il copie simplement les données du disque dans le format dans lequel il se trouve. Veuillez consulter les mises à jour pour plus d'explications.
Jonathan Tran

un problème avec le code, il est sensible à la casse, sur unix pour certains fichiers, il donne 404
Pradeep

2
Notez que "path.exists et path.existsSync sont désormais obsolètes. Veuillez utiliser fs.exists et fs.existsSync." stackoverflow.com/a/5008295/259
David Sykes

3
Notez que fs.exists()c'est également obsolète maintenant. Attrapez l'erreur au fs.stat()lieu de créer une condition de concurrence critique.
Matt

100

Vous n'avez pas besoin d'exprimer. Vous n'avez pas besoin de vous connecter. Node.js fait http NATIVELY. Il vous suffit de renvoyer un fichier dépendant de la demande:

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

3
Si je ne me trompe pas, cette solution ne prend pas en charge le type d'encodage, donc les demandes de pages HTML et d'images obtiendront le même encodage. N'est-ce pas?
idophir

2
@idophir Le plus souvent, l'encodage n'a pas d'importance, les navigateurs le déduisent en fonction des balises html utilisées ou d'autres informations, ou ils le devinent très bien. Comme quelqu'un mentionné ci-dessus, aucun type MIME n'est meilleur qu'un mauvais. Vous pouvez certainement utiliser quelque chose comme node-mime pour comprendre les types de fichiers MIME, mais un serveur http entièrement compatible Web est hors de portée pour cette question.
BT

1
@Rooster Vous ne devriez pas avoir besoin de quelque chose de spécial - simplement node thisfile.js. Il s'exécutera, écoutant les nouvelles connexions et renvoyant de nouveaux résultats, jusqu'à ce que A. soit fermé par un signal, ou B. qu'une erreur folle provoque en quelque sorte l'arrêt du programme.
BT

1
@Rooster Un autre démoniseur d'une certaine réputation se trouve sur github.com/Unitech/pm2
Traveling Man

1
J'aime le mieux cette réponse, mais il y a deux problèmes: 1) Il renvoie 200 alors qu'il devrait renvoyer 404; pour corriger j'appelle writeHead (200) à l'intérieur d'un rappel 'ouvert'. 2) En cas d'erreur, la prise reste ouverte; pour corriger j'appelle response.destroy () dans le rappel 'error'.
Paul Brannan

70

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 remplacer par:

Content-Type: text/html

Merci pour la réponse rapide. La page se charge maintenant mais sans CSS. Comment puis-je obtenir une page html standard avec le CSS et le JS chargés?
idophir

20
Vous devez commencer à étendre ce serveur. À l'heure actuelle, il ne sait que servir index.html - vous devez lui apprendre à servir foo.css et foo.js maintenant, avec leurs propres types MIME appropriés.
clee

1
Si vous ne souhaitez pas diffuser de fichiers statiques, vous pouvez déposer votre CSS dans une <style>balise.
Keith

1
Après neuf ans, cela devrait vraiment être accepté comme la bonne réponse.
rooch84

46

Étape 1 (à l'intérieur de l'invite de commande [j'espère que vous allez 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 uniquement pour un serveur de connexion simple.

ÉTAPE 3: node server.jsounodemon server.js

Il existe désormais une méthode plus simple si vous souhaitez 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


@STEEL, existe-t-il un moyen de démarrer automatiquement le serveur de nœuds. Je veux dire sans aller sur le chemin du répertoire, puis tapez nodeerver, alors seulement il démarrera. je veux démarrer le serveur de noeud comme IIS. pouvez-vous me dire
Vinoth

@Vinoth oui, il y a plusieurs façons. Quel est votre but ou objectif exact, je peux vous aider
STEEL

@steel je veux démarrer le serveur automatiquement sans donner de serveur de noeud dans l'invite de commande. c'est mon exigence est-il possible pouvez-vous me
donner

Vous devrez utiliser un outil tel que ThoughtWorks GO, qui peut exécuter les commandes du terminal en un clic à partir du navigateur.
STEEL

32

La voie rapide:

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

Votre chemin:

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

19

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

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

...

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

Oui, semble beaucoup plus élégant que la solution "switch" utilisée par Eric B. Sowell (voir la réponse sélectionnée). Merci.
idophir

Cette réponse est totalement hors contexte ... Elle fait référence à ce lien dans ce commentaire - stackoverflow.com/questions/6084360/… (ouais, peu importe, Internet est cassé)
Mars Robertson

15

Il s'agit essentiellement d'une version mise à jour de la réponse acceptée pour connect 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 afin que index.html soit servi par défaut.


13

Vous n'avez pas besoin d'utiliser de modules NPM pour exécuter un serveur simple, il y a une toute petite bibliothèque appelée " NPM Free Server " pour Node:

50 lignes de code, sort si vous demandez un fichier ou un dossier et lui donne une couleur rouge ou verte s'il a échoué pour fonctionner. Taille inférieure à 1 Ko (minifiée).


Excellent choix. Sert html, css, js et images. Idéal pour le débogage. Remplacez simplement ce code tel quel pour votre server.js.
pollaris

2
J'aimerais pouvoir ajouter plus de votes positifs! C'est bien! J'ai fait une petite modification var filename = path.join(process.cwd() + '/dist/', uri); sur le serveur à partir du dossier dist . J'ai mis le code server.jsdedans et ça marche juste quand je tapenpm start
John Henckel

Comment l'exécuter en tant que service, donc je peux l'utiliser même en fermant l'invite de commande. Existe-t-il un outil qui fournit ce type sinon cela.
Sandeep sandy

13

si vous avez un nœud installé sur votre PC, vous avez probablement le NPM, si vous n'avez pas besoin de NodeJS, vous pouvez utiliser le package serve pour cela:

1 - Installez le package 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, accédez simplement à l'hôte comme:

http://localhost:3000

Comment l'exécuter en tant que service, donc je peux l'utiliser même en fermant l'invite de commande. Existe-t-il un outil qui fournit ce type sinon cela.
Sandeep sandy

Ce devrait être la réponse acceptée. Parce que c'est le plus simple, et cela fonctionne hors de la boîte. Ainsi, si vous exécutez uniquement le service sans le chemin, il exécutera le serveur à partir du dossier actuel (celui où vous avez précédemment édité le CD).
Игор Рајачић

9

J'ai trouvé une bibliothèque intéressante sur npm qui pourrait vous être utile. Cela s'appelle mime ( npm install mimeou https://github.com/broofa/node-mime ) et il peut déterminer le type mime d'un fichier. Voici un exemple de 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 n'importe quel fichier texte ou image ordinaire (.html, .css, .js, .pdf, .jpg, .png, .m4a et .mp3 sont les extensions que j'ai testées, mais en théorie, cela devrait fonctionner pour tout)

Notes aux développeurs

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

Remarquez la unescapefonction dans la construction du chemin. C'est pour permettre les noms de fichiers avec des espaces et des caractères encodés.


8

Éditer:

Exemple d'application Node.js Node Chat possède les fonctionnalités que vous souhaitez.
Dans son fichier README.textfile
3. L'étape est ce que vous recherchez.

é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 pour que tout fichier statique soit servi
  • afficher 404 si aucun fichier n'est trouvé

étape 4

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

Voici le server.js

Voici l' util.js


5
Je m'en fiche. Je n'ai que index.html. Je veux juste charger le html + css + js. Merci!
idophir

16
-1 pour .readFileSyncdans un rappel. Avec node.js, nous utilisons des E / S non bloquantes. Veuillez ne pas recommander de Synccommandes.
Raynos

Salut @krmby, merci d'avoir essayé d'aider. Je suis vraiment nouveau dans ce domaine. J'ai téléchargé à la fois server.js et util.js. Lorsque j'exécute "node server.js" et que j'essaie d'accéder à la page à l'aide d'un navigateur, j'obtiens cette erreur: TypeError: l'objet # <ServerResponse> n'a pas de méthode 'close' dans /var/www/hppy-site/util.js : 67: 8 sur /var/www/hppy-site/util.js:56:4 sur [object Object]. <anonymous> (fs.js: 107: 5) sur [object Object] .emit (events.js : 61: 17) chez afterRead (fs.js: 970: 12) chez wrapper (fs.js: 245: 17) Des idées? BTW - la même chose se produit lorsque je télécharge votre projet et l'exécute.
idophir

1
Désolé. J'utilisais une nouvelle version. Remplacé res.close () par res.end ()
idophir

8

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

npm install node-static -g

puis accédez au répertoire qui contient vos fichiers html et démarrez le serveur statique avec static .

Accédez au navigateur et saisissez localhost:8080/"yourHtmlFile".


1
Rien ne vaut un one-liner. THX!
AndroidDev

Comment l'exécuter en tant que service, donc je peux l'utiliser même en fermant l'invite de commande. Existe-t-il un outil qui fournit ce type sinon cela.
Sandeep sandy

7
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/html'});
    // change the to 'text/plain' to 'text/html' it will work as your index page
    res.end(index);
}).listen(9615);

Je pense que vous cherchiez cela. Dans votre index.html, remplissez-le simplement avec du code html normal - tout ce que vous voulez y rendre, comme:

<html>
    <h1>Hello world</h1>
</html>

7

Copie de 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.

Mise à jour

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

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

Installez d' serve-staticabord.


6

de w3schools

il est assez facile de créer un serveur de noeud pour servir n'importe quel fichier demandé, et vous n'avez pas besoin d'installer de paquet pour cela

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

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

http: // localhost: 8080 / file.html

servira file.html à partir du disque



5

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 l'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.

Convenez de l'énoncé " Aucun type de contenu n'est meilleur qu'un mauvais "


5

Je ne sais pas si c'est exactement ce que vous vouliez, cependant, vous pouvez essayer de changer:

{'Content-Type': 'text/plain'}

pour ça:

{'Content-Type': 'text/html'}

Le client du navigateur affichera le fichier en html au lieu de texte brut.


1
N'est-ce pas la même que cette réponse existante ?
Pang

4
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'

6
Le Content-Typedevrait être text/html, tel qu'il est défini de cette façon: Content-Type := type "/" subtype *[";" parameter].
t.niese

1
cela semble transformer tous mes fichiers de ce dossier en type html, même si c'est js ...
ahnbizcad

Fonctionne très bien ....
smack cherry

4

Une version 4.x express un peu plus détaillée mais qui fournit la liste des répertoires, la compression, la mise en cache et la journalisation des demandes 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 !")

4

Une quantité folle de réponses compliquées ici. Si vous n'avez pas l'intention de traiter les fichiers / base de données nodeJS mais que vous souhaitez simplement servir des images html / css / js / statiques comme le suggère votre question, installez simplement le serveur pushstate module ou similaire;

Voici un "one liner" qui va créer et lancer un mini site. Collez simplement ce bloc entier dans votre terminal dans le répertoire approprié.

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

Ouvrez le navigateur et accédez à http: // localhost: 3000 . Terminé.

Le serveur utilisera le apprépertoire comme racine pour servir les fichiers à partir de. Pour ajouter des ressources supplémentaires, placez-les simplement dans ce répertoire.


2
Si vous avez déjà de la statique, vous pouvez simplement utiliser ce qui suit:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Pivotant

4

Il existe déjà d'excellentes solutions pour un simple nodejs server. Il existe une autre solution si vous en avez besoin live-reloadingcar vous avez apporté des modifications à vos fichiers.

npm install lite-server -g

naviguer dans votre répertoire et faire

lite-server

il vous ouvrira le navigateur avec le rechargement en direct.


4

La fonction express sendFile fait exactement ce dont vous avez besoin, et comme vous voulez la fonctionnalité de serveur Web à partir du nœud, express est un choix naturel, puis servir des fichiers statiques devient aussi simple que:

res.sendFile('/path_to_your/index.html')

en savoir plus ici: https://expressjs.com/en/api.html#res.sendFile

Un petit exemple avec un serveur Web express pour le nœud:

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

exécutez-le et accédez à http: // localhost: 8080

Pour développer cela afin de vous permettre de servir des fichiers statiques comme css et images, voici un autre exemple:

var express = require('express');
var app = express();
var path = require('path');

app.use(express.static(__dirname + '/css'));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

créez donc un sous-dossier appelé css, mettez-y votre contenu statique et il sera disponible dans votre index.html pour une référence facile comme:

<link type="text/css" rel="stylesheet" href="/css/style.css" />

Remarquez le chemin relatif dans href!

le tour est joué!


3

La plupart des réponses ci-dessus décrivent très bien comment les contenus sont servis. Ce que je cherchais comme supplémentaire était la liste du répertoire afin que d'autres contenus du répertoire puissent être parcourus. Voici ma solution pour d'autres lecteurs:

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));

2

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

sudo npm install ripple-emulator -g

À partir de là, entrez simplement le répertoire de vos fichiers html et exécutez

ripple emulate

puis changez l'appareil en paysage Nexus 7.


5
À quoi sert un Nexus 7?
waeltken

2

La version la plus simple que j'ai rencontrée est la suivante. À des fins éducatives, il est préférable, car il n'utilise aucune bibliothèque abstraite.

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 ce qui suit:

http://127.0.0.1/image.jpg

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


Vous ne devez pas distinguer le type mime du nom de fichier.
mwieczorek

Remarque: fs.exists () est obsolète, fs.existsSync () est le remplacement direct.
JWAspin

@mwieczorek comment devrait-il être deviné? Avez-vous manqué qu'il divise l'extension du fichier?
James Newton

Pourrait vouloir utiliser: laissez mimeType = mimeTypes [filename.split ("."). Pop ()] || "application / octet-stream"
James Newton

1

Je peux également recommander SugoiJS, il est très facile à configurer et donne la possibilité de commencer à écrire rapidement et a de grandes fonctionnalités.

Jetez un œil ici pour commencer: http://demo.sugoijs.com/ , documentation: https://wiki.sugoijs.com/

Il a des décorateurs de traitement des demandes, des politiques de demande et des politiques d'autorisation décorateurs.

Par exemple:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";

@Controller('/dashboard')
export class CoreController{
    constructor(){}

    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}

1

Est très facile avec les tonnes de bibliothèques présentes aujourd'hui. Les réponses ici sont fonctionnelles. Si vous voulez une autre version pour démarrer plus rapidement et simplement

Bien sûr, installez d'abord node.js. Plus tard:

> # module with zero dependencies
> npm install -g @kawix/core@latest 
> # change /path/to/static with your folder or empty for current
> kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js" /path/to/static

Voici le contenu de " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (vous n'avez pas besoin de le télécharger, j'ai posté pour comprendre comment fonctionne derrière)

// you can use like this:
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" /path/to/static
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" 

// this will download the npm module and make a local cache
import express from 'npm://express@^4.16.4'
import Path from 'path'

var folder= process.argv[2] || "."
folder= Path.resolve(process.cwd(), folder)
console.log("Using folder as public: " + folder)

var app = express() 
app.use(express.static(folder)) 
app.listen(8181)
console.log("Listening on 8181")
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.