Express.js에 Javascript 및 CSS 파일을 포함하는 방법

Question

설치하려는 시스템의 테스트와 마찬가지로 page.js라는 파일에서 간단한 노드 서버를 실행하고 있습니다. 해당 파일에서 나는 다음과 같습니다.

var express = require('express'); 
var app = express(); 

app.get('/', function(req, res) { 
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html'); 
}); 

app.get('/*', function(req, res) { 
    res.send("404 –– Page not found"); 
}); 

var server = app.listen(8080, function() { 
    var host = server.address().address 
    var port = server.address().port 
}); 

인덱스 파일에 그 경로에 저장된의 .js 파일과 동일한 디렉토리 (SublimeFolder)에 이르게 또한 그 디렉토리 내 자바 스크립트와 CSS 파일입니다. index.html을 내, 나는 다음과 같은 라인이 : 내 컴퓨터의 전체 경로에 index.html을 내 그 경로를 변경 시도

<script language="javascript" type="text/javascript" src="myScript.js"></script> 
<link rel="stylesheet" type="text/css" href="myStyleSheet.css"> 

을하지만, 그건 내 문제가 해결되지 않았다. Finder에서 index.html 파일을 찾아 두 번 클릭하면 크롬에 file:///Users/JohnFarkerson/Documents/SublimeFolder/index.html이라는 파일이 열립니다. 그러나 노드에서 서버를 실행 한 다음 http://localhost:8080/으로 이동하면 페이지에 내 자바 스크립트 또는 CSS가없는 매우 뼈없는 버전이로드됩니다. 여기서 내가 뭘 잘못하고 있니?

편집 :

이제 작동합니다. 다음 app.js에서이 코드를 복사 JS 폴더에 자바 스크립트 파일

var express = require('express'); 
var app = express(); 
app.use('/js', express.static(__dirname + '/js')); 
app.use('/css', express.static(__dirname + '/css')); 

app.get('/', function(req, res) { 
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html'); 
}); 

app.get('/*', function(req, res) { 
    res.send("404 –– Page not found"); 
}); 

var server = app.listen(8080, function() { 
    var host = server.address().address 
    var port = server.address().port 
}); 

Answer 1

첫번째 장소 (주 Node.js를 파일) :

app.use("/js", express.static(__dirname + '/js')); 

Answer 2

Chrome에서 file:///Users/JohnFarkerson/Documents/SublimeFolder/index.html를 열면, index.html을 같이 보입니다 프로토콜은 파일 프로토콜입니다. 하지만 http://localhost:8080/을 열면 http 프로토콜입니다. express는 http 서버를 만듭니다. .html.css 및 .js 파일은 http 서버의 정적 파일입니다.

어쩌면 디렉토리는 다음과 같이 : 파일 프로토콜에서

SublimeFolder 
|--- index.html 
|--- myScript.js 
|--- myStyleSheet.css 

, 당신은 디스크에 절대 경로를 사용하여 루트 경로는 /, 그래서 그것을 잘 작동합니다.

그러나 http 프로토콜에

는, 루트 경로 같은, 그것은 당신의 코드에 정의 된 것입니다 수 있습니다, http 서버의 루트입니다 :

app.use(express.static(path.join(__dirname, 'public'))); 

HTTP 서버 루트 your_project_path/public, 그리고 당신이 당신의 js를 넣어해야하며, CSS 파일을 your_project_path/public 디렉토리에 놓은 다음 루트 경로를 사용하여 테마를 연결하십시오.

your_project_path/public 
|--- myScript.js 
|--- myStyleSheet.css 

그리고 script 태그 <script src="/myScript.js"></script>입니다 : 예를 들어, 공공 디렉토리 구조입니다.

Express application generator을 사용하여 표현 프로젝트를 만들고 프로젝트 구조를 확인하면 이해할 수 있습니다.