Node.js를 통해 정적 파일을 로컬에서 어떻게 제공합니까?

나는 다음과 같은 파일 위치를 가지고 : 나는 file:///Users/MyName/Developer/sitename/sitename.html 모든 것을 열 때마다Node.js를 통해 정적 파일을 로컬에서 어떻게 제공합니까?

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

그래서 잘 작동 : 예를 들어 다음과 같이 내가 필요한 모든 파일을로드

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

sitename.html 내부. 그러나

, 내가 설치 (서버 파일 위치 : file:///Users/MyName/Developer/sitename/server.js)를했습니다 로컬 Node.js를 서버를 통해 file:///Users/MyName/Developer/sitename/sitename.html를로드하려고 할 때마다 다음과 같이

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가 발견로드하지만, 모든 다른 로드하는 파일은 모두 접두어 http://localhost:8080/ (예 : http://localhost:8080/scripts/somefile.js은 유효하지 않은 파일 경로)이 부여되어로드되지 않습니다.

그것은 곧 서버가 (http.createServer(.....); 내부) 생성으로 같은 맥락의 변화와 상위 디렉토리 지금 http://localhost:8080/ 대신 내가 추측 말이 여전히 로컬에 저장되어있는 파일을 사용할 때 매우 도움이되지 않습니다 file:///Users/MyName/Developer/sitename/하게 보인다.

어떻게 해결할 수 있습니까? 사실 server.js (당분간은) 같은 디렉토리에 저장하는 것이 훨씬 더 혼란 스럽습니까?

감사합니다.

출처

2014-10-01 Sprout Coder

웹 브라우저의 기능이기 때문에 file:// URL을 사용하여 파일을로드 할 수 있습니다.

주소 http://localhost:8080을로드 할 때 더 이상 브라우저에서 파일을 제공하는 기능을 사용하지 않습니다 (Node.js 서버에 액세스하고 있음). 제공되는 HTML 페이지에는 현재 호스트 이름과 결합하여 애셋을로드하는 상대 경로가 포함되어 있습니다.

자산을 제공하기위한 다양한 옵션이 있습니다.

당신은 Node.js를 사용하여 파일을 제공 할 수 :

Express.js이 serving static assets
Node-static위한 모듈을 가지고 있습니다 내가

또는 NPM에 대한 빠른 검색과 발견 모듈 웹 서버를 사용하여 파일을 제공 할 수 있습니다. 이것은 가장 영향력있는 선택입니다. Here is an example은 nginx로 정적 컨텐츠를 제공합니다.

출처

2014-10-01 23:34:57

안녕하세요. 회신 해 주셔서 감사합니다. 내가 제안한 두 가지 옵션을 살펴 보겠습니다. 그러나 내가 이것에 처음으로 등장했기 때문에 조금 더 자세히 설명해 주실 수 있습니까? 누군가가 웹 앱을 만들고 Node.js를 사용하여 앱을 제공하고 앱에 많은 정적 파일 (분명히)이있을 때마다 개발자는 앱을 로컬에서 테스트 할 때 항상 제안한 것과 같은 "플러그인"을 사용해야합니다. 조금 이상한 것 같지 않습니다. Node는 제공 될 모든 정적 파일에 대한 상위 폴더 위치를 지정하는 기본 옵션이 제공되지 않습니다. 도와 주셔서 다시 한 번 감사드립니다! –

Node는 이러한 파일을 제공 할 수있는 도구를 제공하므로 간단하게 구현해야합니다. 그렇기 때문에 많은 모듈이 존재합니다. 왜냐하면 기능은 그냥 상자 밖으로 나오지 않기 때문입니다. 확실히 Node.js로 파일을 제공 할 수 있지만 "/style.css"에 대한 요청을 인식하고 디스크에서 해당 파일을 읽는 경로를 서버에 구현해야합니다. –

제프 (Jeff)를 명확히 밝히신 고마워요. –

하나의 정적 리소스 (sitename.html)에 대한 경로를 정의했지만 다른 참조 리소스 (예 : somefile.js)의 경로는 정의하지 않은 것이 문제입니다. 다음 파일 구조를 가정 할 때, 외부 모듈을 사용하지 않고 공개 디렉토리 (www)를 기준으로 정적 자원로드를 처리하는 서버 코드가 아래에 있습니다.

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

서버를 (부분적으로 here에서 촬영). 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'); 
     } 
    }); 

}

출처

2015-10-02 20:19:52 shimizu

나는 지역 정적 파일을 제공에서 찾을 수있는 가장 쉬운 해결책은 Http-Server을 사용하는 것입니다.

사용법이 간단합니다. 전 세계적으로

루트 디렉토리에

npm install http-server -g

이동을 설치 한 후에 당신은 그것을

cd <dir> 
http-server

의 그 역할을하고 싶다!

출처

2015-12-17 02:40:31 hexinpeter

이것은 나를 위해 완벽하게 작동했으며 OP가 찾고 있던 정확한 해결책이라고 생각합니다! 감사합니다 @ hexinpeter –

Node.js를 통해 정적 파일을 로컬에서 어떻게 제공합니까?

답변

관련 문제