Ich möchte einen sehr einfachen HTTP-Server ausführen. Jede GET-Anfrage example.com
sollte index.html
an 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.html
als 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 get
fü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?
Antworten:
Der einfachste Node.js-Server ist nur:
Jetzt können Sie einen Server über die folgenden Befehle ausführen:
Wenn Sie NPM 5.2.0 oder höher verwenden, können Sie es verwenden,
http-server
ohne es mit zu installierennpx
. 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.Sie können dies auch versuchen, wodurch Ihr Webbrowser geöffnet und CORS-Anforderungen aktiviert werden:
Weitere Optionen finden Sie in der Dokumentation
http-server
zu GitHub oder führen Sie Folgendes aus: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-server
istlight-server
. Es unterstützt das Überwachen und automatische Aktualisieren von Dateien sowie viele andere Funktionen.Fügen Sie Ihrem Verzeichnis-Kontextmenü im Windows Explorer hinzu
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
ionic
Tool integriert. Führenionic serve
Sie einfach aus Ihrem App-Ordner. Noch besser ...ionic serve --lab
um die automatische Aktualisierung nebeneinander von iOS und Android anzuzeigen.quelle
npm install live-server -g
Wenn Sie dasselbe möchten, aber mit automatischem Neuladen, wenn eine Dateiänderunghttp-server -a localhost
Sie können Connect und ServeStatic mit Node.js dafür verwenden:
Installieren Sie connect and serve-static mit NPM
Erstellen Sie die Datei server.js mit folgendem Inhalt:
Führen Sie mit Node.js aus
Sie können jetzt zu gehen
http://localhost:8080/yourfile.html
quelle
Schauen Sie sich dieses Wesentliche an . Ich reproduziere es hier als Referenz, aber das Wesentliche wurde regelmäßig aktualisiert.
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.
quelle
fs.exists()
jetzt ebenfalls veraltet ist. Fangen Sie den Fehler auf,fs.stat()
anstatt eine Rennbedingung zu erstellen.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:
Ein vollständigeres Beispiel, das sicherstellt, dass Anforderungen nicht auf Dateien unter einem Basisverzeichnis zugreifen können, und die ordnungsgemäße Fehlerbehandlung durchführt:
quelle
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.Ich denke, der Teil, den Sie gerade vermissen, ist, dass Sie senden:
Wenn Sie möchten, dass ein Webbrowser den HTML-Code rendert, sollten Sie dies ändern in:
quelle
<style>
Tag ablegen .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
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.js
odernodemon 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
quelle
Der schnelle Weg:
Ihren Weg:
quelle
Anstatt sich mit einer switch-Anweisung zu befassen, finde ich es besser, den Inhaltstyp aus einem Wörterbuch nachzuschlagen:
quelle
Dies ist im Grunde eine aktualisierte Version der akzeptierten Antwort für Connect Version 3:
Ich habe auch eine Standardoption hinzugefügt, damit index.html als Standard dient.
quelle
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).
quelle
var filename = path.join(process.cwd() + '/dist/', uri);
am Server aus dem dist- Ordner vorgenommen. Ich habe den Code eingegebenserver.js
und es funktioniert nur, wenn ich tippenpm start
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:
2 - Servieren Sie Ihren statischen Ordner:
Es zeigt Ihnen, an welchem Port Ihr statischer Ordner bereitgestellt wird. Navigieren Sie einfach zum Host wie folgt:
quelle
Ich habe auf npm eine interessante Bibliothek gefunden, die für Sie von Nutzen sein könnte. Es heißt mime (
npm install mime
oder 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: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:
Beachten Sie die
unescape
Funktion in der Pfadkonstruktion. Dies dient dazu, Dateinamen mit Leerzeichen und codierten Zeichen zuzulassen.quelle
Bearbeiten:
Node.js Beispiel-App Node Chat bietet die gewünschte Funktionalität.
In seiner README.textfile
3. Schritt ist, was Sie suchen.
Hier ist die server.js
Hier ist die util.js
quelle
.readFileSync
in einem Rückruf. Mit node.js verwenden wir nicht blockierende E / A. Bitte empfehlen Sie keineSync
Befehle.So wie ich es mache, installiere ich zuerst den statischen Knotenserver global über
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"
.quelle
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:
quelle
Grundsätzlich die akzeptierte Antwort kopieren, aber vermeiden, eine js-Datei zu erstellen.
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:
serve-static
Zuerst installieren .quelle
von w3schools
Es ist ziemlich einfach, einen Knotenserver zu erstellen, um alle angeforderten Dateien bereitzustellen, und Sie müssen keine Pakete dafür installieren
http: // localhost: 8080 / file.html
wird file.html von der Festplatte bedienen
quelle
Sie können diese einfach in Ihre Shell eingeben
Repo: https://github.com/zeit/serve .
quelle
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.
Es werden alle JS-, CSS- und Bilddateien sowie alle HTML-Inhalte gerendert.
Stimmen Sie der Aussage zu " Kein Inhaltstyp ist besser als ein falscher "
quelle
Ich bin mir nicht sicher, ob dies genau das ist, was Sie wollten. Sie können jedoch versuchen, Folgendes zu ändern:
dazu:
Dadurch zeigt der Browser-Client die Datei als HTML anstelle von einfachem Text an.
quelle
quelle
Content-Type
sollte seintext/html
, wie es so definiert ist :Content-Type := type "/" subtype *[";" parameter]
.Eine etwas ausführlichere Express 4.x-Version, die jedoch eine Verzeichnisliste, Komprimierung, Zwischenspeicherung und Anforderungsprotokollierung in einer minimalen Anzahl von Zeilen bietet
quelle
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.
Öffnen Sie den Browser und gehen Sie zu http: // localhost: 3000 . Erledigt.
Der Server verwendet das
app
Verzeichnis als Stamm, von dem aus Dateien bereitgestellt werden . Um zusätzliche Assets hinzuzufügen, platzieren Sie sie einfach in diesem Verzeichnis.quelle
npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Es gibt bereits einige großartige Lösungen für eine einfache
nodejs server
. Es gibt eine weitere Lösung, wenn Sielive-reloading
Änderungen an Ihren Dateien vornehmen müssen.Navigieren Sie in Ihrem Verzeichnis und tun Sie es
Es öffnet den Browser für Sie mit Live-Reload.
quelle
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:
Lesen Sie hier mehr: https://expressjs.com/en/api.html#res.sendFile
Ein kleines Beispiel mit Express-Webserver für Knoten:
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:
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.
Beachten Sie den relativen Pfad in href!
voila!
quelle
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:
quelle
Dies ist eine der schnellsten Lösungen, mit denen ich Webseiten schnell sehen kann
Von da an geben Sie einfach das Verzeichnis Ihrer HTML-Dateien ein und führen es aus
Ändern Sie dann das Gerät in die Nexus 7-Landschaft.
quelle
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.
Gehen Sie nun zum Browser und öffnen Sie Folgendes:
Hier
image.jpg
sollte sich im selben Verzeichnis wie diese Datei befinden. Hoffe das hilft jemandem :)quelle
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:
quelle
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:
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).
quelle