express.js가있는 정적 파일


213

정적 파일로 서브 디렉토리 를 제공 index.html하고 싶습니다 /media. 색인 파일은 URL /index.html/URL 모두에 제공되어야 합니다.

나는 가지고있다

web_server.use("/media", express.static(__dirname + '/media'));
web_server.use("/", express.static(__dirname));

그러나 두 번째 줄은 분명히 __dirname원하지 않는 파일 ( index.html및 뿐만 아니라 media)의 모든 파일을 포함 하여 전체를 제공합니다 .

나는 또한 시도했다

web_server.use("/", express.static(__dirname + '/index.html'));

그러나 기본 URL에 액세스하면 (더블 구성 요소) /에 대한 요청이 발생하지만 실패합니다.web_server/index.html/index.htmlindex.html

어떤 아이디어?


그건 그렇고, 나는이 주제 ( static()+ 그 매개 변수)에 대한 Express의 문서를 전혀 찾을 수 없었습니다 . 문서 링크도 환영합니다.


2
express 4.x부터는 패키지 미들웨어에 express.static()의해 처리됩니다 serve-static. 해당 문서는 npmjs.com/package/serve-static 또는 github.com/expressjs/serve-static 에서 찾을 수 있습니다 .
Anm

누군가 "정적 파일로서의 서버"의 의미를 설명해 주시겠습니까?
Abhi

@iLiveInAPineappleUnderTheSea Express를 사용하는 경우와 같은 동적 웹 응용 프로그램에서 페이지 내용은 응용 프로그램에 의해 생성되거나 생성됩니다. 반면, 정적 파일은 정적 디렉토리 계층에서 (대부분) 수정되지 않은 채 제공됩니다. 예를 들어 페이지가 변경 될 수 있지만 이미지 파일, CSS 파일 및 Javascript 파일은 변경되지 않습니다.
Philip Callender

아래 링크를 확인하십시오 only4ututorials.blogspot.com/2017/05/…
Dexter

답변:


100

express.static()첫 번째 매개 변수 는 파일 이름이 아닌 디렉토리 의 경로 일 것으로 예상합니다 . 나는 당신을 포함 index.html하고 그것을 사용 하기 위해 다른 하위 디렉토리를 만드는 것이 좋습니다 .

Express에서 정적 파일 제공 문서 , 또는 자세한 serve-static문서 포함, 봉사 기본 동작index.html :

기본적으로이 모듈은 디렉토리의 요청에 대한 응답으로 "index.html"파일을 보냅니다. 이 설정을 false로 설정하거나 새 색인을 제공하려면 원하는 순서로 문자열 또는 배열을 전달하십시오.


6
그리고 단지 정보를 위해서, 그것은 다른 디렉토리에 기본적으로 index.html을 제공 할 것입니다
TheSteve0

하나의 매개 변수 만있는 경우- express.static하나의 매개 변수가 경로 일 것으로 예상합니다.
Seti

188

이 설정이 있으면

/app
   /public/index.html
   /media

그런 다음 원하는 것을 얻을 수 있습니다.

var express = require('express');
//var server = express.createServer();
// express.createServer()  is deprecated. 
var server = express(); // better instead
server.configure(function(){
  server.use('/media', express.static(__dirname + '/media'));
  server.use(express.static(__dirname + '/public'));
});

server.listen(3000);

트릭은이 줄을 마지막 폴백으로 남겨두고 있습니다.

  server.use(express.static(__dirname + '/public'));

문서에 관해서는 Express가 connect 미들웨어를 사용하기 때문에 연결 소스 코드를 직접 보는 것이 더 쉽다는 것을 알았습니다.

예를 들어이 줄은 index.html이 https://github.com/senchalabs/connect/blob/2.3.3/lib/middleware/static.js#L140을 지원함을 보여줍니다


15
Application.configure()3.x에서 레거시로 문서화되었으며 4.x에서 제거되었습니다. 업데이트 된 예는 ChrisCantrell의 답변을 참조하십시오.
Anm

고마워요, 이것은 많은 도움이되었습니다
mdegges

무엇 __dirname입니까? 그 가치는 무엇입니까?
Abhi

1
최신 표현을 위해 구식입니다.
John Heeter

133

최신 버전의 express에서는 "createServer"가 더 이상 사용되지 않습니다. 이 예제는 저에게 효과적입니다.

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

//app.use(express.static(__dirname)); // Current directory is root
app.use(express.static(path.join(__dirname, 'public'))); //  "public" off of current is root

app.listen(80);
console.log('Listening on port 80');

__dirname은 키워드입니까?
Mohammad Faizan khan


7
__dirname은 실제로 전역이 아니라 각 모듈에 대해 로컬입니다.
Mohammad Faizan khan

2
이것은 파이썬에서 __file__사용 하는 것과 동일합니다.os.path.dirname(os.path.realpath(__file__))
Abdelouahab

@ChrisCantrell 파일이있는 경우 정적 폴더에 추가하려면 어떻게해야 public/teams/logo.png합니까?
michal

37

res.sendFile& express.static둘 다 이것을 위해 일할 것입니다

var express = require('express');
var app = express();
var path = require('path');
var public = path.join(__dirname, 'public');

// viewed at http://localhost:8080
app.get('/', function(req, res) {
    res.sendFile(path.join(public, 'index.html'));
});

app.use('/', express.static(public));

app.listen(8080);

public클라이언트 측 코드가있는 폴더는 어디에 있습니까?

으로 제안 하여 @ATOzTOA에 의해 명확히 @Vozzie , path.join인수로 가입 경로를 걸립니다은 +경로에 하나의 인자를 전달합니다.


2
path.join경로를 인수로 결합하고 경로에 +단일 인수를 전달합니다.
ATOzTOA

@ATOzTOA 좀 더 설명 해주시겠습니까?
Mohammed Zameer

무엇 @ATOzTOA이 말하고있는 것은 당신이 변경해야입니다 path.join(public + 'index.html')path.join(public, 'index.html')그것을에있는 동안, 변화와 __dirname + "/public/"path.join(__dirname, 'public')
Vozzie

이것은 정적 사이트와 API를 하나로 통합하는 데 도움이되었습니다
Jeff Beagley

4
const path = require('path');

const express = require('express');

const app = new express();
app.use(express.static('/media'));

app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'media/page/', 'index.html'));
});

app.listen(4000, () => {
    console.log('App listening on port 4000')
})

2

npm install serve-index

var express    = require('express')
var serveIndex = require('serve-index')
var path = require('path')
var serveStatic = require('serve-static')
var app = express()
var port = process.env.PORT || 3000;
/**for files */
app.use(serveStatic(path.join(__dirname, 'public')));
/**for directory */
app.use('/', express.static('public'), serveIndex('public', {'icons': true}))

// Listen
app.listen(port,  function () {
  console.log('listening on port:',+ port );
})

2

app.js에서 아래에서 사용하십시오.

app.use(express.static('folderName'));

(folderName은 파일이있는 폴더입니다)-이러한 자산은 서버 경로를 통해 직접 액세스합니다 (예 : http : // localhost : 3000 / abc.png (여기서 abc.png는 folderName 폴더 안에 있음)).

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.