2014-10-01 20 views
9

Ho i seguenti percorsi di file:Come faccio a servire file statici tramite Node.js localmente?

file:///Users/MyName/Developer/sitename/scripts (contains all .js files..) 
file:///Users/MyName/Developer/sitename/css (contains all .css files..) 
file:///Users/MyName/Developer/sitename/images (contains all .jpg/png/etc. files..) 
file:///Users/MyName/Developer/sitename/sitename.html 
file:///Users/MyName/Developer/sitename/server.js 

All'interno sitename.html si carica tutti i file necessari come segue per esempio:

<html> 
    <head> 
    <script src="scripts/somefile.js"></script> 
    </head> 
    ... 
</html> 

Così ogni volta che apro file:///Users/MyName/Developer/sitename/sitename.html tutto funziona bene.

Tuttavia, ogni volta che provo a caricare file:///Users/MyName/Developer/sitename/sitename.html tramite un server Node.js locale che ho (posizione del file server: file:///Users/MyName/Developer/sitename/server.js) messa a punto nel modo seguente:

var http = require("http"); 
var fs = require("fs"); 

fs.readFile('./sitename.html', function (err, html) 
{ 
    if (err) throw err; 

    http.createServer(function (request,response) 
    { 
     // serve site 
     if (request.url === "/") 
     { 
      response.writeHeader(200, {"Content-Type": "text/html"}); 
      response.write(html); 
     } 
     response.end(); 
    }).listen(8080); 
}); 

sitename.html viene rilevato e caricato, ma tutti gli altri i file che si suppone debbano caricarsi non riescono a caricare perché a tutti viene assegnato il prefisso http://localhost:8080/ (ad esempio, http://localhost:8080/scripts/somefile.js non è un percorso file valido).

Sembra che non appena si crea il server (all'interno http.createServer(.....);) i cambiamenti di contesto e la directory padre diventa ora http://localhost:8080/ invece di file:///Users/MyName/Developer/sitename/ che ha un senso immagino, ma non è molto utile quando si utilizzano i file che sono ancora memorizzati localmente.

Come posso risolvere il problema? Il fatto che sto memorizzando server.js (solo per ora) nella stessa directory rende le cose ancora più confuse?

Grazie!

risposta

8

È possibile caricare i file utilizzando l'URL file:// perché è una funzionalità del browser web.

Quando si carica l'indirizzo http://localhost:8080 non si sfrutta più la capacità del browser di fornire i file (si accede al server Node.js). La pagina HTML che viene pubblicata contiene percorsi relativi che funzionano in congiunzione con il nome host corrente per caricare le risorse.

C'è una moltitudine di opzioni per servire le risorse.

Si potrebbe servire i file con Node.js:

alternativa con una rapida ricerca su NPM potresti usare un server web per servire i file per te. Questa è probabilmente l'opzione più performante. Here is an example di servire contenuto statico con nginx.

+0

Hey, grazie mille per la risposta. Dò un'occhiata a quelle 2 opzioni che hai suggerito. Ma solo perché sono nuovo in questo, potresti approfondire un po 'di più: quindi ogni volta che qualcuno crea un'app web e usa Node.js per servire l'app, e l'app ha un sacco di file statici (ovviamente), vuol dire che hanno sempre bisogno di usare "plug-in" come quello che hai suggerito, quando testano la loro app localmente? Sembra un po 'strano, no, quel nodo non viene fornito con un'opzione predefinita per specificare il percorso della cartella principale per tutti i file statici che verranno pubblicati.? Grazie ancora per il tuo aiuto! Il nodo –

+1

ti offre gli strumenti per servire quei file, devi semplicemente implementarlo. Ecco perché esistono così tanti moduli, perché la funzionalità semplicemente non viene fuori dalla scatola. Puoi sicuramente servire il file con Node.js ma dovresti implementare un percorso nel tuo server che riconosca una richiesta per "/style.css" e fagli leggere quel file dal disco. –

+0

Grazie mille per aver chiarito che Jeff –

3

Il problema è che mentre è stato definito il percorso per una risorsa statica (sitename.html), non è stato definito il percorso per tutte le altre risorse statiche a cui fa riferimento (ad esempio somefile.js). Supponendo che la seguente struttura di file, di seguito contiene il codice del server che gestisce il caricamento delle risorse statiche relative alla propria directory pubblica (www), senza utilizzare moduli esterni. (In parte tratto da here)

project/ 
    server/  
     server.js 
     dispatcher.js 
    www/ 
     index.html 
     js/ (your javascript files) 
     css/ (your css files) 

server.js:

var http = require('http'); 
http.createServer(handleRequest).listen(8124, "127.0.0.1"); 
var dispatcher = require('./dispatcher.js'); 

function handleRequest(req, res) { 
    try { 
     console.log(req.url); 
     dispatcher.dispatch(req, res); 
    } catch(err) { 
     console.log(err); 
    } 
} 

dispatcher.js:

var fs = require('fs'); 
var path = require('path'); 

this.dispatch = function(request, response) { 
    //set the base path so files are served relative to index.html 
    var basePath = "../www"; 
    var filePath = basePath + request.url; 

    var contentType = 'text/html'; 
    var extname = path.extname('filePath'); 
    //get right Content-Type 
    switch (extname) { 
     case '.js': 
      contentType = 'text/javascript'; 
      break; 
     case '.css': 
      contentType = 'text/css'; 
      break; 
    } 

    //default to index.html 
    if (filePath == basePath + "/") { 
     filePath = filePath + "index.html"; 
    } 

    //Write the file to response 
    fs.readFile(filePath, function(error, content) { 
     if (error) { 
      response.writeHead(500); 
      response.end(); 
     } else { 
      response.writeHead(200, {'Content-Type': contentType}); 
      response.end(content, 'utf-8'); 
     } 
    }); 

} 
9

La soluzione più semplice che ho trovato a servire i file statici locali è quello di utilizzare Http-Server.

Il suo utilizzo è semplice. Dopo averlo installato a livello globale

npm install http-server -g 

Vai alla directory principale si vuole servire

cd <dir> 
http-server 

Questo è tutto!

+0

Questo ha funzionato perfettamente per me e credo sia la soluzione esatta che l'OP stava cercando! Grazie @hexinpeter –

Problemi correlati