Frage Verwenden von node.js als einfacher Webserver


Ich möchte einen sehr einfachen HTTP-Server ausführen. Jede GET-Anfrage an example.com sollte bekommen index.html serviert, aber als eine normale HTML-Seite (d. h. dieselbe Erfahrung wie beim Lesen normaler Webseiten).

Mit dem unten stehenden Code kann ich den Inhalt von lesen index.html. Wie kann ich dienen? index.html als eine normale Webseite?

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

Ein Vorschlag unten ist kompliziert und erfordert, dass ich einen schreibe get Zeile für jede Ressource (CSS, JavaScript, Bilder) Datei, die ich verwenden möchte.

Wie kann ich eine einzelne HTML-Seite mit einigen Bildern, CSS und JavaScript bereitstellen?


935
2018-05-21 20:44


Ursprung


Antworten:


Sie können verwenden Verbinden und ServeStatic mit Node.js dafür:

  1. Installieren Sie connect und serve-static mit NPM

    $ npm install connect serve-static
    
  2. Erstellen Sie die Datei server.js mit folgendem Inhalt:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    connect().use(serveStatic(__dirname)).listen(8080, function(){
        console.log('Server running on 8080...');
    });
    
  3. Führen Sie mit Node.js aus

    $ node server.js
    

Sie können jetzt zu http://localhost:8080/yourfile.html


859
2017-12-08 08:09



Der einfachste Node.js Server ist nur:

$ npm install http-server -g

Jetzt können Sie einen Server über die folgenden Befehle ausführen:

$ cd MyApp

$ http-server

Wenn Sie NPM 5.2.0 oder neuer verwenden, können Sie verwenden http-server ohne es zu installieren npx. Dies wird nicht für die Verwendung in der Produktion empfohlen, ist aber eine großartige Möglichkeit, um schnell einen Server auf localhost laufen zu lassen.

$ npx http-server

Oder Sie können dies versuchen, was Ihren Webbrowser öffnet und CORS-Anfragen aktiviert:

$ http-server -o --cors

Weitere Optionen finden Sie in der Dokumentation für http-server auf GitHub, oder laufe:

$ http-server --help

Viele andere nette Funktionen und hirntot-einfache Bereitstellung auf NodeJitsu.

Feature Gabeln

Natürlich können Sie die Funktionen mit Ihrer eigenen Gabel leicht ergänzen. Sie könnten feststellen, dass es bereits in einer der vorhandenen 800+ Gabeln dieses Projekts getan wurde:

Light Server: Eine automatische Refresh-Alternative

Eine schöne Alternative zu http-server ist light-server. Es unterstützt Dateiüberwachung und automatische Aktualisierung und viele andere Funktionen.

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

Fügen Sie zu Ihrem Verzeichniskontextmenü in Windows Explorer hinzu

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

Einfacher JSON-REST-Server

Wenn Sie dann einen einfachen REST-Server für ein Prototyp-Projekt erstellen müssen JSON-Server könnte sein, was du suchst.

Automatisch auffrischende Editoren

Die meisten Webseiten-Editoren und IDE-Tools enthalten jetzt einen Webserver, der Ihre Quelldateien überwacht und Ihre Webseite automatisch aktualisiert, wenn sie sich ändern.

Das Open Source Texteditor Klammern enthält auch einen statischen NodeJS-Webserver. Öffnen Sie einfach eine HTML-Datei in Klammern, drücken Sie "Live Vorschau"und es startet einen statischen Server und öffnet Ihren Browser auf der Seite. Der Browser ** wird automatisch aktualisiert, wenn Sie die HTML-Datei bearbeiten und speichern. Dies ist besonders nützlich beim Testen adaptiver Websites. Öffnen Sie Ihre HTML-Seite auf mehreren Browsern / Fenstergrößen / devices.Speichern Sie Ihre HTML-Seite und sofort sehen, ob Ihre adaptiven Sachen als sie arbeiten alle automatische Aktualisierung.

PhoneGap Entwickler

Wenn Sie eine codieren hybride mobile AppVielleicht interessiert es dich zu wissen, dass die TelefonGapDas Team nahm dieses Auto-Refresh-Konzept mit an Bord PhoneGap App. Dies ist eine generische mobile App, die HTML5-Dateien während der Entwicklung von einem Server laden kann. Dies ist ein sehr raffinierter Trick, da Sie jetzt die langsamen Kompilierungs- / Bereitstellungsschritte in Ihrem Entwicklungszyklus für hybride mobile Apps überspringen können, wenn Sie JS / CSS / HTML-Dateien ändern - was Sie gerade tun. Sie stellen auch den statischen NodeJS Webserver (run phonegap serve), die Dateiänderungen erkennt.

PhoneGap + Sencha Touch Entwickler

Ich habe jetzt den PhoneGap Static Server und die PhoneGap Developer App für Sencha Touch & jQuery Mobile Entwickler umfassend angepasst. Schau es dir an Sencha Touch Live. Unterstützt --qr QR-Codes und --localtunnel, die Ihren statischen Server von Ihrem Desktop-Computer an eine URL außerhalb Ihrer Firewall weiterleitet! Tonnen von Anwendungen. Massive Beschleunigung für hybride mobile Entwickler.

Cordova + Ionen-Framework-Entwickler

Lokale Server- und Auto-Refresh-Funktionen werden in den ionic Werkzeug. Lauf einfach ionic serve aus deinem App-Ordner. Noch besser ... ionic serve --lab um die automatische Aktualisierung der Side Views von iOS und Android anzuzeigen.


828
2018-04-17 01:21



Schau dir das an Kern. Ich gebe es hier als Referenz wieder, aber das Wesentliche wurde regelmäßig aktualisiert.

Node.JS statische Datei Webserver. Setzen Sie es in Ihren Pfad, um Server in einem beliebigen Verzeichnis hochzufahren, und nehmen Sie ein optionales Port-Argument.

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

Aktualisieren

Der Inhalt behandelt CSS- und JS-Dateien. Ich habe es selbst benutzt. Das Lesen / Schreiben im "Binär" -Modus ist kein Problem. Das bedeutet nur, dass die Datei von der Dateibibliothek nicht als Text interpretiert wird und nicht mit dem in der Antwort zurückgegebenen Inhaltstyp in Zusammenhang steht.

Das Problem mit Ihrem Code ist, dass Sie immer einen Inhaltstyp "text / plain" zurückgeben. Der obige Code gibt keinen Inhaltstyp zurück, aber wenn Sie ihn nur für HTML, CSS und JS verwenden, kann ein Browser diese gut beantworten. Kein Inhaltstyp ist besser als ein falscher.

Normalerweise ist der Inhaltstyp eine Konfiguration Ihres Webservers. Es tut mir leid, wenn sich das nicht löst Ihre Problem, aber es funktionierte für mich als einfacher Entwicklungsserver und dachte, es könnte anderen Leuten helfen. Wenn Sie in der Antwort korrekte Inhaltstypen benötigen, müssen Sie sie entweder explizit als Joeytwiddle definieren oder eine Bibliothek wie Connect verwenden, die sinnvolle Standardwerte hat. Das Schöne daran ist, dass es einfach und unabhängig ist (keine Abhängigkeiten).

Aber ich fühle dein Problem. Also hier ist die kombinierte Lösung.

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



Du brauchst kein Express. Sie brauchen keine Verbindung. Node.js tut http NATIV. Sie müssen lediglich eine von der Anfrage abhängige Datei zurückgeben:

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)    

Ein ausführlicheres Beispiel, das sicherstellt, dass Anforderungen nicht auf Dateien unterhalb eines Basisverzeichnisses zugreifen können, und eine ordnungsgemäße Fehlerbehandlung durchführt:

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



Ich denke, der Teil, den du gerade vermisst, ist, dass du Folgendes schickst:

Content-Type: text/plain

Wenn Sie möchten, dass ein Webbrowser den HTML-Code rendert, sollten Sie Folgendes ändern:

Content-Type: text/html

64
2018-05-21 21:11



Step1 (innerhalb der Eingabeaufforderung [Ich hoffe, dass Sie zu Ihrem Ordner]]: npm install express

Schritt 2: Erstellen Sie eine Datei 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);

Bitte beachten Sie, dass Sie auch WATCHFILE (oder nodemon) hinzufügen sollten. Der obige Code gilt nur für einen einfachen Verbindungsserver.

SCHRITT 3: node server.js oder nodemon server.js

Es gibt jetzt eine einfachere Methode, wenn Sie einfach einen einfachen HTTP-Server hosten möchten. npm install -g http-server

und öffne unser Verzeichnis und tippe http-server

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


43
2018-02-24 14:44



Der schnelle Weg:

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

Ihren Weg:

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



Anstatt sich mit einer switch-Anweisung zu befassen, denke ich, dass es besser ist, den Inhaltstyp aus einem Wörterbuch zu ermitteln:

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

...

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

19
2017-11-24 21:08