Utilizzo di node.js come semplice server Web


1103

Voglio eseguire un server HTTP molto semplice. Ogni richiesta GET a example.comdeve essere index.htmlsoddisfatta ma come una normale pagina HTML (cioè, la stessa esperienza di quando leggi le normali pagine web).

Usando il codice qui sotto, posso leggere il contenuto di index.html. Come posso servire index.htmlcome una normale pagina Web?

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

Un suggerimento di seguito è complicato e mi richiede di scrivere una getriga per ogni file di risorse (CSS, JavaScript, immagini) che voglio usare.

Come posso pubblicare una singola pagina HTML con alcune immagini, CSS e JavaScript?


21
Dai un'occhiata al modulo npm "connect". Fornisce tale funzionalità di base ed è la base di molte configurazioni e altri pacchetti.
Mörre,

5
Dovresti inserire la soluzione come risposta e contrassegnarla come corretta.
graham.reeds

8
Sono stato in grado di trovare una soluzione perfetta di Eric B. Sowell chiamata Servire file statici dal nodo js . Leggi tutto. Altamente raccomandato.
idophir,

1
Dai un'occhiata a un modulo che ho scritto chiamato Cachemere. Inoltre, memorizza automaticamente nella cache tutte le risorse. github.com/topcloud/cachemere
Jon

1
local-web-server è un buon esempio da guardare
Lloyd,

Risposte:


993

Il server Node.js più semplice è solo:

$ npm install http-server -g

Ora puoi eseguire un server tramite i seguenti comandi:

$ cd MyApp

$ http-server

Se si utilizza NPM 5.2.0 o versione successiva, è possibile utilizzarlo http-serversenza installarlo con npx. Questo non è raccomandato per l'uso in produzione ma è un ottimo modo per far funzionare rapidamente un server su localhost.

$ npx http-server

Oppure, puoi provare questo, che apre il tuo browser web e abilita le richieste CORS:

$ http-server -o --cors

Per ulteriori opzioni, consulta la documentazione per http-serversu GitHub o esegui:

$ http-server --help

Molte altre funzioni interessanti e una distribuzione semplicissima in NodeJitsu.

Forcelle caratteristiche

Certo, puoi facilmente ricaricare le funzionalità con la tua forcella. Potresti scoprire che è già stato fatto in una delle oltre 800 fork di questo progetto:

Light Server: un'alternativa con aggiornamento automatico

Una bella alternativa http-serverè light-server. Supporta la visualizzazione di file e l'aggiornamento automatico e molte altre funzionalità.

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

Aggiungi al menu di scelta rapida della directory in Esplora risorse

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

Semplice server JSON REST

Se devi creare un semplice server REST per un progetto prototipo, json-server potrebbe essere quello che stai cercando.

Editor con aggiornamento automatico

La maggior parte degli editor di pagine Web e degli strumenti IDE ora include un server Web che controlla i file di origine e aggiorna automaticamente la pagina Web quando cambiano.

Uso Live Server con Visual Studio Code.

Le parentesi dell'editor di testo open source includono anche un server web statico NodeJS. Basta aprire qualsiasi file HTML tra parentesi, premere " Anteprima dal vivo " e avvia un server statico e apre il browser nella pagina. Il browser ** si aggiorna automaticamente ogni volta che modifichi e salvi il file HTML. Ciò è particolarmente utile quando si testano siti Web adattivi. Apri la tua pagina HTML su più browser / dimensioni di finestra / dispositivi. Salvare la pagina HTML e vedere immediatamente se la vostra roba adattivo funziona come tutte aggiornamento automatico.

Sviluppatori di PhoneGap

Se stai codificando un'app mobile ibrida , potresti essere interessato a sapere che il team di PhoneGap ha adottato questo concetto di aggiornamento automatico con la sua nuova app PhoneGap . Questa è un'app mobile generica che può caricare i file HTML5 da un server durante lo sviluppo. Questo è un trucco molto fluido poiché ora puoi saltare i passaggi di compilazione / distribuzione lenti nel tuo ciclo di sviluppo per le app mobili ibride se stai modificando i file JS / CSS / HTML, che è quello che stai facendo la maggior parte delle volte. Forniscono inoltre il server Web NodeJS statico (esecuzione phonegap serve) che rileva le modifiche ai file.

PhoneGap + Sencha Touch Developers

Ora ho ampiamente adattato il server statico PhoneGap e l'app per sviluppatori PhoneGap per gli sviluppatori Sencha Touch e jQuery Mobile. Dai un'occhiata a Sencha Touch Live . Supporta i codici QR --qr e --localtunnel che inoltra il tuo server statico dal tuo computer desktop a un URL esterno al firewall! Tonnellate di usi. Massima velocità per gli sviluppatori mobili ibridi.

Sviluppatori Cordova + Ionic Framework

Le funzioni del server locale e dell'aggiornamento automatico sono integrate nello ionicstrumento. Esegui ionic servedalla cartella dell'app. Ancora meglio ... ionic serve --labper visualizzare le visualizzazioni affiancate di auto-aggiornamento di iOS e Android.


9
npm install live-server -g se vuoi la stessa cosa, ma con il ricaricamento automatico quando rileva una modifica del file

3
Un piccolo "gotcha" -. Il server http utilizza per impostazione predefinita la pubblicazione del sito su 0.0.0.0. Pertanto, DEVI specificare un indirizzo IP per farlo funzionare correttamente come server di test locale:http-server -a localhost
JESii

1
Sì ... 0.0.0.0 lo vincolerà a TUTTI gli IP di tutti i tuoi dispositivi di rete IP (WiFi, via cavo, Bluetooth) che è una cattiva idea su qualsiasi rete pubblica in quanto potresti essere potenzialmente violato. Non è poi così male se volevi semplicemente provare la tua app all'interno di una rete protetta da firewall per mostrare agli altri o collegarla al tuo dispositivo mobile sulla stessa rete.
Tony O'Hagan,

Piccolo strumento davvero utile. Ho molte app Node in esecuzione sul mio server, quindi aggiungo un'opzione "-p" per scegliere una porta diversa da 8080. Ad esempio: nohup http-server -p 60080 & (la avvia in background e ti consente di disconnetterti dal sessione di shell.) Dovresti assicurarti che la porta sia aperta al mondo, ad esempio: iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT (su molti sistemi Linux)
Blisterpeanuts

Come eseguirlo come servizio, quindi posso usarlo anche chiudendo il prompt dei comandi. C'è qualche strumento fornisce questo tipo se non questo.
Sandeep sabbioso

983

È possibile utilizzare Connect e ServeStatic con Node.js per questo:

  1. Installa connect e serve-static con NPM

    $ npm install connect serve-static
  2. Crea il file server.js con questo contenuto:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    
    connect()
        .use(serveStatic(__dirname))
        .listen(8080, () => console.log('Server running on 8080...'));
  3. Esegui con Node.js

    $ node server.js

Ora puoi andare a http://localhost:8080/yourfile.html


24
L'idea era di non utilizzare una libreria esistente, per motivi educativi, ma penso che usare Express sia un consiglio migliore della sua versione di livello inferiore, Connect.
idophir,

135
La parte di Express che serve file statici è solo Connect, quindi non vedo il motivo per usare Express per servire file statici. Ma sì, anche Express farà il lavoro.
Gian Marco Gherardi,

7
Ottimo consiglio I passaggi precedenti hanno funzionato molto bene per i miei scopi. Grazie a Gian, ecco il link per Express dove rivela che è basato su Connect, expressjs.com Ecco come usare Express: expressjs.com/guide.html
Jack Stone,

10
Non funziona per me, risultato Impossibile ottenere /test.html. Devo sostituire __dirname con un nome di directory?
Timo,

3
Ora, connect è stato modificato alla versione 3. Pertanto, è necessario utilizzare serve-static come descritto da miqid. Ho pubblicato un'altra risposta con il codice completo per connect v3.
tomet,

160

Dai un'occhiata a questo riassunto . Lo sto riproducendo qui per riferimento, ma l'essenza è stata regolarmente aggiornata.

Web server file statico Node.JS. Mettilo nel tuo percorso per accendere i server in qualsiasi directory, accetta un argomento porta opzionale.

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

Aggiornare

L'essenza gestisce i file CSS e JS. L'ho usato da solo. L'uso di lettura / scrittura in modalità "binaria" non è un problema. Ciò significa solo che il file non è interpretato come testo dalla libreria di file e non è correlato al tipo di contenuto restituito nella risposta.

Il problema con il tuo codice è che stai sempre restituendo un tipo di contenuto "text / plain". Il codice sopra riportato non restituisce alcun tipo di contenuto, ma se lo stai usando solo per HTML, CSS e JS, un browser può inferire quelli giusti. Nessun tipo di contenuto è migliore di uno sbagliato.

Normalmente il tipo di contenuto è una configurazione del tuo server web. Quindi mi dispiace se questo non risolve il tuo problema, ma ha funzionato per me come un semplice server di sviluppo e ho pensato che potesse aiutare alcune altre persone. Se nella risposta sono necessari tipi di contenuto corretti, è necessario definirli esplicitamente come ha joeytwiddle o utilizzare una libreria come Connect con valori predefiniti ragionevoli. La cosa bella di questo è che è semplice e autonomo (senza dipendenze).

Ma sento il tuo problema. Quindi ecco la soluzione combinata.

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
Questo non risolve davvero il "problema". Restituisci index.html come file binario e non gestisci css e js.
idophir il

4
Gestisce css e js. Non restituisce index.html come file binario. Copia semplicemente i dati dal disco in qualsiasi formato sia. Consultare gli aggiornamenti per ulteriori spiegazioni.
Jonathan Tran,

un problema con il codice, fa distinzione tra maiuscole e minuscole, su unix per alcuni file, dà 404
Pradeep

2
Si noti che "path.exists e path.existsSync sono ora obsoleti. Utilizzare fs.exists e fs.existsSync." stackoverflow.com/a/5008295/259
David Sykes

3
Si noti che fs.exists()ora è anche deprecato. Cattura l'errore fs.stat()piuttosto che creare una race condition.
Matt,

100

Non hai bisogno di espresso. Non è necessario connettersi. Node.js esegue http NATIVELY. Tutto quello che devi fare è restituire un file in base alla richiesta:

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 esempio più completo che garantisce che le richieste non possano accedere ai file al di sotto di una directory di base e gestisce correttamente gli errori:

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
Se non sbaglio questa soluzione non si occupa del tipo di codifica, quindi le richieste di pagine e immagini HTML avranno la stessa codifica. No?
idophir,

2
@idophir Molto spesso la codifica non ha importanza, i browser la deducono in base ai tag html utilizzati o ad altre informazioni o indovinano davvero bene. Come qualcuno sopra menzionato, nessun tipo MIME è migliore di uno sbagliato. Puoi certamente usare qualcosa come node-mime per capire i tipi di file mime, ma un server http pienamente web è fuori dallo scopo di questa domanda.
BT,

1
@Rooster Non dovresti aver bisogno di qualcosa di speciale - semplicemente node thisfile.js. Funzionerà, ascoltando nuove connessioni e restituendo nuovi risultati, finché A. non viene chiuso da un segnale o B. qualche errore folle in qualche modo provoca la chiusura del programma.
BT

1
@Rooster Un altro demone di una certa reputazione si trova su github.com/Unitech/pm2
Traveling Man

1
Mi piace questa risposta al meglio, ma ci sono due problemi: 1) Restituisce 200 quando dovrebbe restituire 404; per risolvere chiamo writeHead (200) all'interno di un callback 'aperto'. 2) In caso di errore, il socket viene lasciato aperto; per risolvere chiamo response.destroy () nel callback "errore".
Paul Brannan,

70

Penso che la parte che ti manca in questo momento sia che stai inviando:

Content-Type: text/plain

Se si desidera che un browser Web esegua il rendering dell'HTML, è necessario modificarlo in:

Content-Type: text/html

Grazie per la risposta rapida. La pagina ora viene caricata ma senza CSS. Come posso ottenere una pagina html standard con CSS e JS caricati?
idophir,

20
Devi iniziare a estendere quel server. In questo momento sa solo come servire index.html - devi insegnargli come servire foo.css e foo.js ora, con i loro tipi MIME appropriati.
clee

1
Se non vuoi pubblicare file statici, puoi inserire i tuoi CSS in un <style>tag.
Keith,

1
Dopo nove anni, questo dovrebbe davvero essere accettato come la risposta corretta.
rooch84,

46

Step1 (all'interno del prompt dei comandi [Spero che cd ALLA TUA CARTELLA]): npm install express

Passaggio 2: creare un file 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);

Nota che dovresti aggiungere anche WATCHFILE (o usare nodemon). Il codice sopra è solo per un semplice server di connessione.

PASSAGGIO 3: node server.js onodemon server.js

Ora esiste un metodo più semplice se si desidera semplicemente ospitare un server HTTP semplice. npm install -g http-server

e apri la nostra directory e digita http-server

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


@STEEL, c'è un modo per avviare automaticamente il server dei nodi. Voglio dire, senza andare al percorso della directory e quindi digitare nodeserver, quindi solo si avvierà. voglio avviare il nodo server come IIS. puoi dirmelo
Vinoth,

@Vinoth sì, ci sono molti modi. Qual è il tuo preciso scopo o obiettivo, posso aiutarti
STEEL,

@steel Voglio avviare automaticamente il server senza fornire il nodo server nel prompt dei comandi. questo è il mio requisito, è possibile, puoi darmi qualche esempio
Vinoth,

Dovrai utilizzare alcuni strumenti come ThoughtWorks GO, che può eseguire i comandi del Terminale con un clic dal browser.
STEEL,

32

Il modo veloce:

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

Il vostro modo:

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

Invece di occuparsi di un'istruzione switch, penso che sia meglio cercare il tipo di contenuto da un dizionario:

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

...

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

Sì, sembra molto più elegante della soluzione "switch" utilizzata da Eric B. Sowell (vedi risposta selezionata). Grazie.
idophir,

Questa risposta è totalmente fuori contesto ... Si riferisce a questo link all'interno di questo commento - stackoverflow.com/questions/6084360/… (sì, qualunque sia, internet è rotto)
Mars Robertson

15

Questa è sostanzialmente una versione aggiornata della risposta accettata per connect versione 3:

var connect = require('connect');
var serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

Ho anche aggiunto un'opzione predefinita in modo che index.html sia servito come predefinito.


13

Non è necessario utilizzare alcun modulo NPM per eseguire un server semplice, esiste una libreria molto piccola chiamata " NPM Free Server " per Node:

50 righe di codice, genera se stai richiedendo un file o una cartella e gli dà un colore rosso o verde se non ha funzionato. Di dimensioni inferiori a 1 KB (ridotto a icona).


Scelta eccellente. Serve html, css, js e immagini. Ottimo per il debug. Basta sostituire questo codice come è per il tuo server.js.
pollaris,

2
Vorrei poter aggiungere più voti! Questo è fantastico! Ho apportato piccole modifiche var filename = path.join(process.cwd() + '/dist/', uri); al server dalla cartella dist . Ho inserito il codice server.jse funziona solo quando npm start
digito

Come eseguirlo come servizio, quindi posso usarlo anche chiudendo il prompt dei comandi. C'è qualche strumento fornisce questo tipo se non questo.
Sandeep sabbioso

13

se hai un nodo installato sul tuo PC probabilmente hai l'NPM, se non hai bisogno di cose NodeJS, puoi usare il servizio pacchetto per questo:

1 - Installa il pacchetto sul tuo PC:

npm install -g serve

2 - Serve la tua cartella statica:

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

Ti mostrerà quale porta viene servita la tua cartella statica, basta andare all'host come:

http://localhost:3000

Come eseguirlo come servizio, quindi posso usarlo anche chiudendo il prompt dei comandi. C'è qualche strumento fornisce questo tipo se non questo.
Sandeep sabbioso

Questa dovrebbe essere la risposta accettata. Perché è il più semplice e funziona subito. Pertanto, se si esegue serve solo senza il percorso, verrà eseguito il server dalla cartella corrente (quella in cui è stato precedentemente editato il CD).
Игор Рајачић

9

Ho trovato un'interessante libreria su npm che potrebbe esserti utile. Si chiama mime ( npm install mimeo https://github.com/broofa/node-mime ) e può determinare il tipo mime di un file. Ecco un esempio di un server web che ho scritto usando:

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

Questo servirà a qualsiasi normale file di testo o immagine (.html, .css, .js, .pdf, .jpg, .png, .m4a e .mp3 sono le estensioni che ho testato, ma in teoria dovrebbe funzionare per tutto)

Note per gli sviluppatori

Ecco un esempio di output che ho ottenuto con esso:

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

Notare la unescapefunzione nella costruzione del percorso. Questo per consentire nomi di file con spazi e caratteri codificati.


8

Modificare:

L'app di esempio Node.js Node Chat ha le funzionalità desiderate.
Nel file README.textfile
3. Il passaggio è ciò che stai cercando.

passo 1

  • crea un server che risponda con ciao mondo sulla porta 8002

passo 2

  • crea un index.html e servilo

step3

  • introdurre util.js
  • modificare la logica in modo che venga offerto qualsiasi file statico
  • mostra 404 se non viene trovato alcun file

step4

  • aggiungi jquery-1.4.2.js
  • aggiungi client.js
  • cambia index.html per richiedere all'utente il nickname

Ecco il server.js

Ecco util.js


5
Non mi interessa. Ho solo index.html. Voglio solo caricare html + css + js. Grazie!
idophir,

16
-1 per .readFileSyncin una richiamata. Con node.js utilizziamo IO non bloccante. Si prega di non raccomandare Synccomandi.
Raynos,

Ciao @krmby, grazie per aver cercato di aiutarti. Sono davvero nuovo in questo. Ho scaricato sia server.js che util.js. Quando eseguo "node server.js" e provo ad accedere alla pagina usando un browser, ottengo questo errore: TypeError: Object # <ServerResponse> non ha alcun metodo 'close' su /var/www/hppy-site/util.js : 67: 8 su /var/www/hppy-site/util.js:56:4 su [oggetto oggetto]. <anonimo> (fs.js: 107: 5) su [oggetto oggetto] .emit (events.js : 61: 17) a afterRead (fs.js: 970: 12) a wrapper (fs.js: 245: 17) Qualche idea? A proposito: lo stesso accade quando scarico il progetto ed eseguo.
idophir,

1
Scusate. Stavo usando una nuova versione. Sostituito res.close () con res.end ()
idophir

8

Il modo in cui lo faccio è prima di tutto installare il server statico del nodo a livello globale tramite

npm install node-static -g

quindi vai alla directory che contiene i tuoi file html e avvia il server statico con static.

Vai al browser e digita localhost:8080/"yourHtmlFile".


1
Niente è meglio di una linea. Grazie!
AndroidDev,

Come eseguirlo come servizio, quindi posso usarlo anche chiudendo il prompt dei comandi. C'è qualche strumento fornisce questo tipo se non questo.
Sandeep sabbioso

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

Penso che tu stia cercando questo. Nel tuo index.html, riempilo semplicemente con il normale codice html - qualunque cosa tu voglia renderizzare su di esso, come:

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

7

Fondamentalmente copiando la risposta accettata, ma evitando di creare un file js.

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

L'ho trovato molto comodo.

Aggiornare

A partire dall'ultima versione di Express, serve-static è diventato un middleware separato. Usa questo per servire:

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

Installa serve-staticprima.


6

da w3schools

è abbastanza facile creare un server nodo per servire qualsiasi file richiesto, e non è necessario installare alcun pacchetto per esso

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

servirà file.html dal disco



5

Uso il codice seguente per avviare un semplice server Web che rende il file html predefinito se nessun file menzionato in 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);

Rendering di tutti i file js, css e image, insieme a tutto il contenuto html.

Concordare sull'affermazione " Nessun tipo di contenuto è migliore di uno sbagliato "


5

Non sono sicuro che sia esattamente quello che volevi, tuttavia, puoi provare a cambiare:

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

a questo:

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

In questo modo il client del browser visualizzerà il file come HTML anziché come testo normale.


1
Non è la stessa di questa risposta esistente ?
Fatta il

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
Il Content-Typedovrebbe essere text/html, come viene definita in questo modo: Content-Type := type "/" subtype *[";" parameter].
t.niese,

1
questo sembra trasformare tutti i miei file in quella cartella in tipo html, anche se è js ...
ahnbizcad

Funziona alla grande ....
smack cherry

4

Una versione 4.x express leggermente più dettagliata ma che fornisce l'elenco delle directory, la compressione, la memorizzazione nella cache e la registrazione delle richieste in un numero minimo di righe

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

Pazzesca quantità di risposte complicate qui. Se non si intende elaborare i file / database nodeJS ma si desidera semplicemente fornire html / css / js / images statici come suggerisce la domanda, installare semplicemente il server pushstate modulo o simile;

Ecco un "one liner" che creerà e lancerà un mini sito. Basta incollare l'intero blocco nel terminale nella directory appropriata.

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

Apri il browser e vai a http: // localhost: 3000 . Fatto.

Il server utilizzerà la appdirectory come root da cui inviare i file. Per aggiungere risorse aggiuntive, inseriscile in quella directory.


2
Se disponi già di statica, puoi semplicemente utilizzare quanto segue:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Swivel

4

Ci sono già alcune grandi soluzioni per un semplice nodejs server. C'è un'altra soluzione se è necessario live-reloadingquando si apportano modifiche ai file.

npm install lite-server -g

navigare nella directory e fare

lite-server

aprirà il browser per te con il live-ricaricamento.


4

La funzione Express sendFile fa esattamente ciò di cui hai bisogno e, dal momento che desideri la funzionalità del web server dal nodo, express arriva come una scelta naturale e quindi servire i file statici diventa facile come:

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

leggi di più qui: https://expressjs.com/en/api.html#res.sendFile

Un piccolo esempio con il web server express per il nodo:

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

esegui questo e vai a http: // localhost: 8080

Per espandere questo per consentire di fornire file statici come CSS e immagini, ecco un altro esempio:

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

quindi crea una sottocartella chiamata css, inserisci il tuo contenuto statico e sarà disponibile per il tuo index.html per un facile riferimento come:

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

Notare il percorso relativo in href!

Ecco!


3

La maggior parte delle risposte di cui sopra descrive molto bene come vengono offerti i contenuti. Quello che stavo cercando come ulteriore era l'elenco della directory in modo che altri contenuti della directory possano essere sfogliati. Ecco la mia soluzione per altri lettori:

'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

Questa è una delle soluzioni più veloci che utilizzo per visualizzare rapidamente le pagine Web

sudo npm install ripple-emulator -g

Da quel momento in poi basta inserire la directory dei file html ed eseguire

ripple emulate

quindi cambia il dispositivo in Nexus 7 orizzontale.


5
Che cosa ha a che fare un Nexus 7 con questo?
Waeltken,

2

La versione più semplice che ho incontrato è la seguente. Per scopi educativi, è meglio, perché non utilizza librerie astratte.

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

Ora vai al browser e apri quanto segue:

http://127.0.0.1/image.jpg

Qui image.jpgdovrebbe essere nella stessa directory di questo file. Spero che questo aiuti qualcuno :)


Non dovresti divinare il tipo mime dal nome del file.
mwieczorek,

Nota: fs.exists () è stato deprecato, fs.existsSync () è la sostituzione diretta.
JWAspin,

@mwieczorek come dovrebbe essere divinato? Ti sei perso che sta dividendo l'estensione del file?
James Newton,

Potrebbe voler usare: let mimeType = mimeTypes [nomefile.split ("."). Pop ()] || "application / octet-stream"
James Newton,

1

Posso anche consigliare SugoiJS, è molto facile da configurare e offre un'opzione per iniziare a scrivere velocemente e ha grandi funzionalità.

Dai un'occhiata qui per iniziare: http://demo.sugoijs.com/ , documentazione: https://wiki.sugoijs.com/

Ha richiesto la gestione di decoratori, richieste politiche e decoratori di politiche di autorizzazione.

Per esempio:

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

È molto facile con le tonnellate di biblioteche presenti oggi. Le risposte qui sono funzionali. Se vuoi un'altra versione per iniziare in modo più rapido e semplice

Naturalmente prima installa node.js. Dopo:

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

Qui il contenuto di " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (non è necessario scaricarlo, ho pubblicato per capire come funziona dietro)

// 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")
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.