Verwenden von node.js als einfacher Webserver

1103

Ich möchte einen sehr einfachen HTTP-Server ausführen. Jede GET-Anfrage example.comsollte index.htmlan sie gesendet werden, jedoch als reguläre HTML-Seite (dh dieselbe Erfahrung wie beim Lesen normaler Webseiten).

Mit dem folgenden Code kann ich den Inhalt von lesen index.html. Wie diene ich index.htmlals reguläre 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 getfür jede Ressourcendatei (CSS, JavaScript, Bilder), die ich verwenden möchte , eine Zeile schreibe .

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

Idophir
quelle
21
Schauen Sie sich das npm-Modul "connect" an. Es bietet solche grundlegenden Funktionen und ist die Basis vieler Setups und anderer Pakete.
Mörre
5
Sie sollten Ihre Lösung als Antwort angeben und als richtig markieren.
Graham.reeds
8
Ich konnte eine perfekte Lösung von Eric B. Sowell finden, die statische Dateien vom Knoten js bedient . Lesen Sie das Ganze. Sehr empfehlenswert.
Idophir
1
Schauen Sie sich ein Modul an, das ich geschrieben habe und das Cachemere heißt. Außerdem werden alle Ihre Ressourcen automatisch zwischengespeichert. github.com/topcloud/cachemere
Jon
1
Der lokale Webserver ist ein gutes Beispiel dafür
Lloyd

Antworten:

993

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 höher verwenden, können Sie es verwenden, http-serverohne es mit zu installieren npx. Dies wird für die Verwendung in der Produktion nicht empfohlen, ist jedoch eine hervorragende Möglichkeit, einen Server schnell auf localhost zum Laufen zu bringen.

$ npx http-server

Sie können dies auch versuchen, wodurch Ihr Webbrowser geöffnet und CORS-Anforderungen aktiviert werden:

$ http-server -o --cors

Weitere Optionen finden Sie in der Dokumentation http-serverzu GitHub oder führen Sie Folgendes aus:

$ http-server --help

Viele andere nette Funktionen und eine kinderleichte Bereitstellung für NodeJitsu.

Funktionsgabeln

Natürlich können Sie die Funktionen ganz einfach mit Ihrer eigenen Gabel aufladen. Möglicherweise wurde dies bereits in einer der über 800 Gabeln dieses Projekts durchgeführt:

Light Server: Eine Alternative zur automatischen Aktualisierung

Eine schöne Alternative zu http-serverist light-server. Es unterstützt das Überwachen und automatische Aktualisieren von Dateien sowie viele andere Funktionen.

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

Fügen Sie Ihrem Verzeichnis-Kontextmenü im Windows Explorer hinzu

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

Einfacher JSON-REST-Server

Wenn Sie einen einfachen REST-Server für ein Prototypprojekt erstellen müssen, ist json-server möglicherweise das, wonach Sie suchen.

Editoren automatisch aktualisieren

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

Ich verwende Live Server mit Visual Studio Code.

Der Open Source- Texteditor Brackets enthält auch einen statischen NodeJS-Webserver. Öffnen Sie einfach eine HTML-Datei in Klammern, drücken Sie " Live Preview " und es wird ein statischer Server gestartet und Ihr Browser auf der Seite geöffnet. Der Browser wird ** automatisch aktualisiert, wenn Sie die HTML-Datei bearbeiten und speichern. Dies ist besonders nützlich, wenn Sie adaptive Websites testen. Öffnen Sie Ihre HTML-Seite in mehreren Browsern / Fenstergrößen / Geräten. Speichern Sie Ihre HTML-Seite und prüfen Sie sofort, ob Ihre adaptiven Inhalte funktionieren, da sie alle automatisch aktualisiert werden.

PhoneGap-Entwickler

Wenn Sie eine hybride mobile App codieren , könnte es Sie interessieren, dass das PhoneGap- Team dieses Konzept der automatischen Aktualisierung mit seiner neuen PhoneGap-App übernommen hat . Dies ist eine generische mobile App, die die HTML5-Dateien während der Entwicklung von einem Server laden kann. Dies ist ein sehr cleverer 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 die meiste Zeit tun. Sie stellen auch den statischen NodeJS-Webserver (Ausführen phonegap serve) bereit, der Dateiänderungen erkennt.

PhoneGap + Sencha Touch Entwickler

Ich habe jetzt den statischen PhoneGap-Server und die PhoneGap-Entwickler-App für Sencha Touch- und jQuery Mobile-Entwickler umfassend angepasst. Probieren Sie es bei Sencha Touch Live aus . Unterstützt --qr QR Codes und --localtunnel, die Ihren statischen Server von Ihrem Desktop-Computer an eine URL außerhalb Ihrer Firewall weiterleiten! Tonnenweise Verwendungen. Massive Beschleunigung für hybride mobile Entwickler.

Cordova + Ionic Framework-Entwickler

Lokale Server- und automatische Aktualisierungsfunktionen sind in das ionicTool integriert. Führen ionic serveSie einfach aus Ihrem App-Ordner. Noch besser ... ionic serve --labum die automatische Aktualisierung nebeneinander von iOS und Android anzuzeigen.

Tony O'Hagan
quelle
9
npm install live-server -g Wenn Sie dasselbe möchten, aber mit automatischem Neuladen, wenn eine Dateiänderung
3
Ein kleines "Gotcha" -. Der http-Server bedient standardmäßig die Site mit 0.0.0.0. Daher http-server -a localhost
MÜSSEN
1
Ja ... 0.0.0.0 bindet es an ALLE IPs aller IP-Netzwerkgeräte (WiFi, Kabel, Bluetooth). Dies ist in jedem öffentlichen Netzwerk eine schlechte Idee, da Sie möglicherweise gehackt werden. Es ist nicht so schlimm, wenn Sie Ihre App nur in einem sicheren Netzwerk mit Brandmauern testen möchten, um andere anzuzeigen oder sie mit Ihrem Mobilgerät im selben Netzwerk zu verbinden.
Tony O'Hagan
Wirklich nützliches kleines Werkzeug. Ich habe viele Node-Apps auf meinem Server, daher füge ich eine "-p" -Option hinzu, um einen anderen Port als 8080 auszuwählen. Beispiel: nohup http-server -p 60080 & (startet im Hintergrund und lässt Sie die Verbindung zum trennen Shell-Sitzung.) Sie sollten sicherstellen, dass der Port für die Welt offen ist, zB: iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT (auf vielen Linux-Systemen)
Blisterpeanuts
So führen Sie es als Dienst aus, damit ich es auch durch Schließen der Eingabeaufforderung verwenden kann. Gibt es ein Werkzeug, das diese Art bietet, wenn nicht dieses?
Sandeep sandig
983

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

  1. Installieren Sie connect and 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, () => console.log('Server running on 8080...'));
  3. Führen Sie mit Node.js aus

    $ node server.js

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

Gian Marco Gherardi
quelle
24
Die Idee war, aus pädagogischen Gründen keine vorhandene Bibliothek zu verwenden, aber ich denke, die Verwendung von Express ist ein besserer Rat als die untergeordnete Version Connect.
Idophir
135
Der Teil von Express, der statische Dateien bereitstellt, ist nur Connect, daher sehe ich keinen Grund, Express für die Bereitstellung statischer Dateien zu verwenden. Aber ja, auch Express wird den Job machen.
Gian Marco Gherardi
7
Exzellente Beratung. Die obigen Schritte haben für meine Zwecke sehr gut funktioniert. Dank Gian, hier ist der Link zu Express, wo es zeigt, dass es auf Connect, expressjs.com aufgebaut ist. Hier ist, wie man Express benutzt: expressjs.com/guide.html
Jack Stone
10
Funktioniert nicht für mich, Ergebnis Kann /test.html nicht abrufen. Sollte ich __dirname durch einen Verzeichnisnamen ersetzen?
Timo
3
Jetzt wurde connect auf Version 3 geändert. Daher muss Serve-Static wie in miqid beschrieben verwendet werden. Ich habe eine weitere Antwort mit dem vollständigen Code für connect v3 gepostet.
Tomet
160

Schauen Sie sich dieses Wesentliche an . Ich reproduziere es hier als Referenz, aber das Wesentliche wurde regelmäßig aktualisiert.

Statischer Datei-Webserver von Node.JS. Fügen Sie es in Ihren Pfad ein, um Server in einem beliebigen Verzeichnis zu starten, und verwenden 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

Das Wesentliche behandelt CSS- und JS-Dateien. Ich habe es selbst benutzt. Die Verwendung von Lesen / Schreiben im "binären" Modus ist kein Problem. Dies bedeutet nur, dass die Datei von der Dateibibliothek nicht als Text interpretiert wird und nicht mit dem in der Antwort zurückgegebenen Inhaltstyp zusammenhängt.

Das Problem mit Ihrem Code ist, dass Sie immer den 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 auf diese schließen. Kein Inhaltstyp ist besser als ein falscher.

Normalerweise ist der Inhaltstyp eine Konfiguration Ihres Webservers. Es tut mir leid, wenn dies Ihr Problem nicht löst , aber es hat für mich als einfacher Entwicklungsserver funktioniert und dachte, es könnte einigen anderen Menschen helfen. Wenn Sie in der Antwort korrekte Inhaltstypen benötigen, müssen Sie diese entweder explizit als joeytwiddle definieren oder eine Bibliothek wie Connect mit sinnvollen Standardeinstellungen verwenden. Das Schöne daran ist, dass es einfach und in sich geschlossen ist (keine Abhängigkeiten).

Aber ich fühle dein Problem. Hier ist also 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");
Jonathan Tran
quelle
3
Dies löst das "Problem" nicht wirklich. Sie geben index.html als Binärdatei zurück und behandeln CSS und JS nicht.
Idophir
4
Es behandelt CSS und JS. Index.html wird nicht als Binärdatei zurückgegeben. Es kopiert einfach Daten von der Festplatte in einem beliebigen Format. Weitere Erläuterungen finden Sie unter Updates.
Jonathan Tran
Ein Problem mit dem Code, es unterscheidet zwischen Groß- und Kleinschreibung, unter Unix für bestimmte Dateien gibt es 404
Pradeep
2
Beachten Sie, dass "path.exists und path.existsSync jetzt veraltet sind. Bitte verwenden Sie fs.exists und fs.existsSync." stackoverflow.com/a/5008295/259
David Sykes
3
Beachten Sie, dass dies fs.exists()jetzt ebenfalls veraltet ist. Fangen Sie den Fehler auf, fs.stat()anstatt eine Rennbedingung zu erstellen.
Matt
100

Du brauchst keinen Express. Sie müssen keine Verbindung herstellen. Node.js macht http NATIVELY. Sie müssen lediglich eine Datei zurückgeben, die von der Anforderung abhängt:

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 vollständigeres Beispiel, das sicherstellt, dass Anforderungen nicht auf Dateien unter einem Basisverzeichnis zugreifen können, und die 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)
BT
quelle
3
Wenn ich mich nicht irre, kümmert sich diese Lösung nicht um den Codierungstyp, sodass Anforderungen für HTML-Seiten und Bilder dieselbe Codierung erhalten. Ist es nicht?
Idophir
2
@idophir Meistens spielt die Codierung keine Rolle, Browser schließen daraus basierend auf den verwendeten HTML-Tags oder anderen Informationen oder sie raten wirklich gut. Wie oben erwähnt, ist kein MIME-Typ besser als ein falscher. Sie können sicherlich so etwas wie Node-Mime verwenden, um die MIME-Dateitypen herauszufinden, aber ein vollständig webkompatibler http-Server ist für diese Frage nicht geeignet.
BT
1
@Rooster Du solltest nichts Besonderes brauchen - einfach node thisfile.js. Es wird ausgeführt, wartet auf neue Verbindungen und gibt neue Ergebnisse zurück, bis entweder A. durch ein Signal geschlossen wird oder B. ein verrückter Fehler die Programmbeendigung verursacht.
BT
1
@Rooster Ein weiterer angesehener Dämon ist unter github.com/Unitech/pm2
Travelling Man
1
Ich mag diese Antwort am besten, aber es gibt zwei Probleme: 1) Sie gibt 200 zurück, wenn sie 404 zurückgeben sollte; Um dies zu beheben, rufe ich writeHead (200) in einem 'offenen' Rückruf auf. 2) Wenn ein Fehler auftritt, bleibt die Steckdose offen. Um dies zu beheben, rufe ich response.destroy () im Rückruf 'error' auf.
Paul Brannan
70

Ich denke, der Teil, den Sie gerade vermissen, ist, dass Sie senden:

Content-Type: text/plain

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

Content-Type: text/html
Clee
quelle
Danke für die schnelle Antwort. Die Seite wird jetzt geladen, jedoch ohne CSS. Wie kann ich eine Standard-HTML-Seite mit geladenem CSS und JS erhalten?
Idophir
20
Sie müssen mit der Erweiterung dieses Servers beginnen. Im Moment weiß es nur, wie index.html bereitgestellt wird - Sie müssen ihm jetzt beibringen, wie foo.css und foo.js mit ihren eigenen geeigneten MIME-Typen bereitgestellt werden.
Clee
1
Wenn Sie keine statischen Dateien bereitstellen möchten, können Sie Ihr CSS in einem <style>Tag ablegen .
Keith
1
Nach neun Jahren sollte dies wirklich als die richtige Antwort akzeptiert werden.
Rooch84
46

Schritt 1 (innerhalb der Eingabeaufforderung [Ich hoffe, Sie haben eine CD an Ihren 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 hinzufügen (oder nodemon verwenden) sollten. Der obige Code gilt nur für einen einfachen Verbindungsserver.

SCHRITT 3: node server.jsodernodemon server.js

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

und öffnen Sie unser Verzeichnis und geben Sie ein http-server

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

STAHL
quelle
@STEEL, gibt es eine Möglichkeit, den Knotenserver automatisch zu starten. Ich meine, ohne zum Verzeichnispfad zu gehen und dann Nodeserver einzugeben, dann wird nur es gestartet. Ich möchte den Knotenserver wie IIS starten.
Kannst
@ Vinoth ja es gibt viele Möglichkeiten. Was genau Ihr Zweck oder Ziel ist, kann ich Ihnen helfen
STAHL
@steel Ich möchte den Server automatisch starten, ohne den Knotenserver in der Eingabeaufforderung anzugeben. Dies ist meine Anforderung, ist es möglich, können Sie mir ein Beispiel nennen
Vinoth
Sie müssen ein Tool wie ThoughtWorks GO verwenden, mit dem Terminalbefehle mit einem Klick im Browser ausgeführt werden können.
Stahl
32

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);
Frank Nocke
quelle
19

Anstatt sich mit einer switch-Anweisung zu befassen, finde ich es besser, den Inhaltstyp aus einem Wörterbuch nachzuschlagen:

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

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
joeytwiddle
quelle
Ja, sieht viel eleganter aus als die von Eric B. Sowell verwendete "Switch" -Lösung (siehe ausgewählte Antwort). Vielen Dank.
Idophir
Diese Antwort ist völlig aus dem Zusammenhang geraten ... Sie verweist auf diesen Link in diesem Kommentar - stackoverflow.com/questions/6084360/… (ja, was auch immer, das Internet ist kaputt)
Mars Robertson
15

Dies ist im Grunde eine aktualisierte Version der akzeptierten Antwort für 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);

Ich habe auch eine Standardoption hinzugefügt, damit index.html als Standard dient.

treffen
quelle
13

Sie müssen keine NPM-Module verwenden, um einen einfachen Server auszuführen. Es gibt eine sehr kleine Bibliothek namens " NPM Free Server " für Node:

50 Codezeilen, werden ausgegeben, wenn Sie eine Datei oder einen Ordner anfordern, und geben ihr eine rote oder grüne Farbe, wenn sie nicht funktioniert hat. Weniger als 1 KB groß (minimiert).

Jaredcheeda
quelle
Exzellente Wahl. Serviert HTML, CSS, JS und Bilder. Ideal zum Debuggen. Ersetzen Sie diesen Code einfach so, wie er für Ihre server.js ist.
Pollaris
2
Ich wünschte, ich könnte mehr Upvotes hinzufügen! Das ist toll! Ich habe eine kleine Änderung var filename = path.join(process.cwd() + '/dist/', uri); am Server aus dem dist- Ordner vorgenommen. Ich habe den Code eingegeben server.jsund es funktioniert nur, wenn ich tippenpm start
John Henckel
So führen Sie es als Dienst aus, damit ich es auch durch Schließen der Eingabeaufforderung verwenden kann. Gibt es ein Werkzeug, das diese Art bietet, wenn nicht dieses?
Sandeep sandig
13

Wenn Sie einen Knoten auf Ihrem PC installiert haben, haben Sie wahrscheinlich den NPM. Wenn Sie kein NodeJS-Zeug benötigen, können Sie das Serve- Paket dafür verwenden:

1 - Installieren Sie das Paket auf Ihrem PC:

npm install -g serve

2 - Servieren Sie Ihren statischen Ordner:

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

Es zeigt Ihnen, an welchem ​​Port Ihr statischer Ordner bereitgestellt wird. Navigieren Sie einfach zum Host wie folgt:

http://localhost:3000
Diego Mendes
quelle
So führen Sie es als Dienst aus, damit ich es auch durch Schließen der Eingabeaufforderung verwenden kann. Gibt es ein Werkzeug, das diese Art bietet, wenn nicht dieses?
Sandeep sandig
Dies sollte die akzeptierte Antwort sein. Weil es am einfachsten ist und sofort funktioniert. Wenn Sie also nur Serve ohne Pfad ausführen, wird der Server aus dem aktuellen Ordner ausgeführt (dem Ordner, in dem Sie zuvor eine CD erstellt haben).
8гор Рајачић
9

Ich habe auf npm eine interessante Bibliothek gefunden, die für Sie von Nutzen sein könnte. Es heißt mime ( npm install mimeoder https://github.com/broofa/node-mime ) und kann den Mime-Typ einer Datei bestimmen. Hier ist ein Beispiel für einen Webserver, den ich damit geschrieben habe:

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

Dies dient jeder regulären Text- oder Bilddatei (.html, .css, .js, .pdf, .jpg, .png, .m4a und .mp3 sind die Erweiterungen, die ich getestet habe, aber theoretisch sollte es für alles funktionieren).

Entwicklerhinweise

Hier ist ein Beispiel für die Ausgabe, die ich damit erhalten habe:

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

Beachten Sie die unescapeFunktion in der Pfadkonstruktion. Dies dient dazu, Dateinamen mit Leerzeichen und codierten Zeichen zuzulassen.

BürgermeisterMonty
quelle
8

Bearbeiten:

Node.js Beispiel-App Node Chat bietet die gewünschte Funktionalität.
In seiner README.textfile
3. Schritt ist, was Sie suchen.

Schritt 1

  • Erstellen Sie einen Server, der mit Hallo Welt auf Port 8002 antwortet

Schritt 2

  • Erstellen Sie eine index.html und stellen Sie sie bereit

Schritt 3

  • util.js einführen
  • Ändern Sie die Logik so, dass alle statischen Dateien bereitgestellt werden
  • zeige 404 für den Fall, dass keine Datei gefunden wird

Schritt 4

  • füge jquery-1.4.2.js hinzu
  • Fügen Sie client.js hinzu
  • Ändern Sie index.html, um den Benutzer zur Eingabe des Kurznamens aufzufordern

Hier ist die server.js

Hier ist die util.js

Kerem Baydoğan
quelle
5
Es ist mir egal. Ich habe nur index.html. Ich möchte nur das HTML + CSS + JS laden lassen. Vielen Dank!
Idophir
16
-1 für .readFileSyncin einem Rückruf. Mit node.js verwenden wir nicht blockierende E / A. Bitte empfehlen Sie keine SyncBefehle.
Raynos
Hallo @krmby, danke, dass du versucht hast zu helfen. Ich bin wirklich neu darin. Ich habe sowohl server.js als auch util.js heruntergeladen. Wenn ich "node server.js" ausführe und versuche, mit einem Browser auf die Seite zuzugreifen, wird folgende Fehlermeldung angezeigt: TypeError: Objekt # <ServerResponse> hat unter /var/www/hppy-site/util.js keine Methode 'close' : 67: 8 unter /var/www/hppy-site/util.js:56:4 unter [Objekt Objekt]. <Anonym> (fs.js: 107: 5) unter [Objekt Objekt] .emit (events.js : 61: 17) at afterRead (fs.js: 970: 12) at wrapper (fs.js: 245: 17) Irgendwelche Ideen? Übrigens - das gleiche passiert, wenn ich Ihr Projekt herunterlade und es ausführe.
Idophir
1
Es tut uns leid. Ich habe eine neue Version verwendet. Ersetzt res.close () durch res.end ()
idophir
8

So wie ich es mache, installiere ich zuerst den statischen Knotenserver global über

npm install node-static -g

Navigieren Sie dann zu dem Verzeichnis, das Ihre HTML-Dateien enthält, und starten Sie den statischen Server mit static.

Gehen Sie zum Browser und geben Sie ein localhost:8080/"yourHtmlFile".

Samba
quelle
1
Nichts geht über einen Einzeiler. Danke!
AndroidDev
So führen Sie es als Dienst aus, damit ich es auch durch Schließen der Eingabeaufforderung verwenden kann. Gibt es ein Werkzeug, das diese Art bietet, wenn nicht dieses?
Sandeep sandig
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);

Ich denke du hast danach gesucht. Füllen Sie Ihre index.html einfach mit normalem HTML-Code - was auch immer Sie darauf rendern möchten, wie:

<html>
    <h1>Hello world</h1>
</html>
Ashish Ranjan
quelle
7

Grundsätzlich die akzeptierte Antwort kopieren, aber vermeiden, eine js-Datei zu erstellen.

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

Fand es sehr praktisch.

Aktualisieren

Ab der neuesten Version von Express ist Serve-Static zu einer separaten Middleware geworden. Verwenden Sie dies, um zu dienen:

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

serve-staticZuerst installieren .

Xiao Peng - ZenUML.com
quelle
6

von w3schools

Es ist ziemlich einfach, einen Knotenserver zu erstellen, um alle angeforderten Dateien bereitzustellen, und Sie müssen keine Pakete dafür installieren

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

wird file.html von der Festplatte bedienen

Ahmed M. Matar
quelle
5

Ich verwende den folgenden Code, um einen einfachen Webserver zu starten, der die Standard-HTML-Datei rendert, wenn in der URL keine Datei erwähnt wird.

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

Es werden alle JS-, CSS- und Bilddateien sowie alle HTML-Inhalte gerendert.

Stimmen Sie der Aussage zu " Kein Inhaltstyp ist besser als ein falscher "

Sachin303
quelle
5

Ich bin mir nicht sicher, ob dies genau das ist, was Sie wollten. Sie können jedoch versuchen, Folgendes zu ändern:

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

dazu:

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

Dadurch zeigt der Browser-Client die Datei als HTML anstelle von einfachem Text an.

Xenry
quelle
1
Ist das nicht dasselbe wie diese bestehende Antwort ?
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'
user3389163
quelle
6
Das Content-Typesollte sein text/html, wie es so definiert ist : Content-Type := type "/" subtype *[";" parameter].
t.niese
1
Dies scheint alle meine Dateien in diesem Ordner in HTML-Typ zu verwandeln, auch wenn es js ist ...
ahnbizcad
Funktioniert prima ....
Smack Kirsche
4

Eine etwas ausführlichere Express 4.x-Version, die jedoch eine Verzeichnisliste, Komprimierung, Zwischenspeicherung und Anforderungsprotokollierung in einer minimalen Anzahl von Zeilen bietet

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 !")
Bruno Grieder
quelle
4

Verrückte Menge komplizierter Antworten hier. Wenn Sie nicht beabsichtigen, NodeJS-Dateien / -Datenbanken zu verarbeiten, sondern nur statisches HTML / CSS / JS / Images bereitstellen möchten, wie in Ihrer Frage vorgeschlagen, installieren Sie einfach das Pushstate-Server- Modul oder ähnliches.

Hier ist ein "One Liner", der eine Mini-Site erstellt und startet. Fügen Sie einfach den gesamten Block in Ihr Terminal in das entsprechende Verzeichnis ein.

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

Öffnen Sie den Browser und gehen Sie zu http: // localhost: 3000 . Erledigt.

Der Server verwendet das appVerzeichnis als Stamm, von dem aus Dateien bereitgestellt werden . Um zusätzliche Assets hinzuzufügen, platzieren Sie sie einfach in diesem Verzeichnis.

Cyberwombat
quelle
2
Wenn Sie bereits Statik haben, können Sie einfach die folgenden verwenden:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Schwenken
4

Es gibt bereits einige großartige Lösungen für eine einfache nodejs server. Es gibt eine weitere Lösung, wenn Sie live-reloadingÄnderungen an Ihren Dateien vornehmen müssen.

npm install lite-server -g

Navigieren Sie in Ihrem Verzeichnis und tun Sie es

lite-server

Es öffnet den Browser für Sie mit Live-Reload.

lokeshjain2008
quelle
4

Die Express-Funktion sendFile macht genau das, was Sie brauchen. Da Sie die Webserver-Funktionalität vom Knoten erhalten möchten, ist Express eine natürliche Wahl, und das Bereitstellen statischer Dateien wird so einfach wie:

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

Lesen Sie hier mehr: https://expressjs.com/en/api.html#res.sendFile

Ein kleines Beispiel mit Express-Webserver für Knoten:

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

Führen Sie dies aus und navigieren Sie zu http: // localhost: 8080

Um dies zu erweitern, damit Sie statische Dateien wie CSS und Bilder bereitstellen können, finden Sie hier ein weiteres Beispiel:

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

Erstellen Sie also einen Unterordner mit dem Namen css, fügen Sie Ihren statischen Inhalt darin ein, und er steht Ihrer index.html zum einfachen Nachschlagen zur Verfügung, z.

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

Beachten Sie den relativen Pfad in href!

voila!

Mladen Oršolić
quelle
3

Die meisten der obigen Antworten beschreiben sehr gut, wie Inhalte bereitgestellt werden. Was ich als zusätzliche Suche suchte, war die Auflistung des Verzeichnisses, damit andere Inhalte des Verzeichnisses durchsucht werden können. Hier ist meine Lösung für weitere Leser:

'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));
Abu Shumon
quelle
2

Dies ist eine der schnellsten Lösungen, mit denen ich Webseiten schnell sehen kann

sudo npm install ripple-emulator -g

Von da an geben Sie einfach das Verzeichnis Ihrer HTML-Dateien ein und führen es aus

ripple emulate

Ändern Sie dann das Gerät in die Nexus 7-Landschaft.

Helzgate
quelle
5
Was hat ein Nexus 7 damit zu tun?
Waeltken
2

Die einfachere Version, auf die ich gestoßen bin, ist wie folgt. Für Bildungszwecke ist es am besten, da keine abstrakten Bibliotheken verwendet werden.

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

Gehen Sie nun zum Browser und öffnen Sie Folgendes:

http://127.0.0.1/image.jpg

Hier image.jpgsollte sich im selben Verzeichnis wie diese Datei befinden. Hoffe das hilft jemandem :)

Kaushal28
quelle
Sie sollten den MIME-Typ nicht aus dem Dateinamen unterscheiden.
Mwieczorek
Hinweis: fs.exists () ist veraltet, fs.existsSync () ist der direkte Ersatz.
JWAspin
@mwieczorek wie soll es erraten werden? Haben Sie vermisst, dass er die Dateierweiterung abspaltet?
James Newton
Vielleicht möchten Sie verwenden: let mimeType = mimeTypes [filename.split ("."). Pop ()] || "application / octet-stream"
James Newton
1

Ich kann SugoiJS auch empfehlen, es ist sehr einfach einzurichten und bietet die Möglichkeit, schnell mit dem Schreiben zu beginnen, und hat großartige Funktionen.

Schauen Sie hier, um loszulegen: http://demo.sugoijs.com/ , Dokumentation: https://wiki.sugoijs.com/

Es verfügt über Anforderungsbearbeiter, Anforderungsrichtlinien und Autorisierungsrichtlinien für Dekorateure.

Zum Beispiel:

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")
        }
    }
}
Gen4ik
quelle
1

Ist sehr einfach mit den Tonnen von Bibliotheken präsentiert heute. Die Antworten hier sind funktional. Wenn Sie eine andere Version wünschen, starten Sie schneller und einfacher

Natürlich zuerst node.js installieren. Später:

> # 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

Hier der Inhalt von " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (Sie müssen ihn nicht herunterladen, ich habe ihn gepostet, um zu verstehen, wie er dahinter funktioniert).

// 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")
James Suárez
quelle