2014-10-01 16 views
9

Mam następujące lokalizacje plików:Jak udostępniać pliki statyczne za pośrednictwem Node.js lokalnie?

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 

Wewnątrz sitename.html załadować wszystkie niezbędne pliki w następujący przykład:

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

ilekroć otworzy file:///Users/MyName/Developer/sitename/sitename.html Więc wszystko działa bez zarzutu.

Jednak gdy próbuję załadować file:///Users/MyName/Developer/sitename/sitename.html poprzez lokalny serwer node.js, że mam (lokalizację pliku serwera: file:///Users/MyName/Developer/sitename/server.js) konfiguracja następująco:

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 znajduje i załadowany, ale wszystkie inne pliki, które mają zostać załadowane, nie mogą się załadować, ponieważ wszystkie mają przedrostek http://localhost:8080/ (http://localhost:8080/scripts/somefile.js nie jest prawidłową ścieżką do pliku na przykład).

To wygląda tak szybko, jak jest tworzone przez serwer (wewnątrz http.createServer(.....);) zmiany kontekstu i katalog nadrzędny staje się teraz http://localhost:8080/ zamiast file:///Users/MyName/Developer/sitename/ co ma sens Chyba jednak nie jest bardzo pomocne przy użyciu plików, które są nadal przechowywane lokalnie.

Jak to obejść? Czy fakt, że przechowuję server.js (tylko na razie) w tym samym katalogu sprawia, że ​​rzeczy są jeszcze bardziej zagmatwane?

Dzięki!

Odpowiedz

8

Możesz załadować pliki, używając adresu URL file://, ponieważ jest to funkcja Twojej przeglądarki internetowej.

Podczas ładowania adresu http://localhost:8080 nie używasz już możliwości przeglądania plików przez przeglądarkę (uzyskujesz dostęp do serwera Node.js). Wyświetlana strona HTML zawiera ścieżki względne, które działają w połączeniu z bieżącą nazwą hosta, aby załadować zasoby.

Istnieje wiele opcji udostępniania zasobów.

Można obsługiwać pliki z node.js:

Alternatywnie możesz użyć serwera WWW, aby przesłać pliki za Ciebie. Jest to prawdopodobnie najbardziej wydajna opcja. Here is an example serwowania statycznej zawartości za pomocą nginx.

+0

Hej wielkie dzięki za odpowiedź. Rzucę okiem na te 2 opcje, które zasugerowałeś. Ale tylko dlatego, że jestem na tym nowicjuszem, czy mógłbyś rozwinąć nieco więcej: Więc kiedy ktoś tworzy aplikację internetową i używa Node.js do obsługi aplikacji, a aplikacja ma dużo statycznych plików (oczywiście), robi to zawsze muszą używać "wtyczek", takich jak te, które zasugerowałeś, testując swoją aplikację lokalnie? Wydaje się to trochę dziwne, że Node nie ma domyślnej opcji określenia lokalizacji folderu macierzystego dla wszystkich plików statycznych, które będą wyświetlane. Jeszcze raz dziękuję za pomoc! –

+1

Węzeł daje narzędzia do serwowania tych plików, po prostu trzeba go zaimplementować. Właśnie dlatego istnieje tak wiele modułów, ponieważ funkcjonalność po prostu nie wychodzi z pudełka. Można z całą pewnością obsługiwać plik za pomocą Node.js, ale trzeba by zaimplementować trasę na serwerze, która rozpoznaje żądanie "/style.css" i zlecić odczytanie tego pliku z dysku. –

+0

Wielkie dzięki za wyjaśnienie, że Jeff –

3

Problem polega na tym, że podczas definiowania ścieżki dla jednego statycznego zasobu (sitename.html) nie zdefiniowano ścieżki dla wszystkich innych zasobów statycznych, do których się odnosi (np. Somefile.js). Zakładając poniższą strukturę plików, poniżej zawiera kod serwera, który obsługuje ładowanie zasobów statycznych w stosunku do twojego katalogu publicznego (www), bez korzystania z modułów zewnętrznych. (Częściowo pochodzi z here)

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

serwer.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

Najprostszym rozwiązaniem znalazłem się na obsłudze lokalnych statycznych plików jest użycie Http-Server.

Jego użycie jest proste. Po zainstalowaniu go globalnie

npm install http-server -g 

przejdź do katalogu głównego chcesz służyć

cd <dir> 
http-server 

To jest to!

+0

To działało idealnie dla mnie i uważam, że jest to dokładne rozwiązanie, którego szukał OP! Dziękuję @ hexpeter –

Powiązane problemy