Node - Express 미들웨어 static

static

정적인 파일들을 제공한다. 익스프레스 4버전에서 유일하게 익스프레스에 내장되어 있던 미들웨어였다.

정적파일

프로그래밍적으로 만들어진 파일이 동적 파일이고 사람이 작성한 것이 언제나 똑같이 보이는 것이 정적 파일이다.

하지만 익스프레스 4.16.0 버전에서는 body-parser의 일부분이 내장되어 이제는 유일한 내장 미들웨어가 아니다.

(express 설치하면 따라오므로 따로 설치할 필요 없음)

app.js

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

함수의 인자로 정적 파일들이 담겨있는 폴더를 지정하면 된다.

현재 public 폴더가 지정되어 있다. ( 불러올 디렉토리 경로 )

public/stylesheets/style.css는 http://localgost:3000/stylesheets/styles.css로 접근한다.

실제 서버의 폴더 경로에는 public이 들어 있지만,

요청 주소에는 public이 들어 있지 않다는 점을 주목하자.

... app.use(express.static('pulbic'); ... 이렇게 해도 되지만  path.join( __dirname , "디렉토리 명 ") 한 이유는  서버의 폴더 경로와 요청 경로가 다르므로 외부인이 서버의 구조를 쉽게 파악할 수 없다.  이는 보안에 큰 도움이 된다. 위 코드 사용 방식 : https://opentutorials.org/course/2136/11857

또한, 정적 파일들을 알아서 제공해주므로 이전에 fs.readFile로 파일을 직접 읽어서 전송할 필요가 없다.

[경로명 지정 가능]

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

이렇게 정적 파일을 제공할 주소를 지정할 수도 있다.

public폴더 안에 abc.png가 있다고 가정하면 앞에 /img 경로를 붙인 http://localhost:3000/img/abc.png 주소로 접근 할 수 있다.

static 미들웨어는 요청에 부합하는 정적 파일을 발견한 경우 응답으로 해당 파일을 전송한다.

이 경우 응답을 보냈으므로 다음에 나오는 라우터가 실행되지 않는다.

만약 파일을 찾지 못했다면 요청을 라우터로 넘긴다

이렇게 자체적으로 정적 파일 라우터 기능을 수행하므로 최대한 위쪽에 배치하는 것이 좋다.

그래야 서버가 쓸데없는 미들웨어 작업을 하는 것을 막을 수 있다.

보통 morgan다음에 배치한다.

static 미들웨어를 morgarn보다 더 위로 올리면 정적 파일 요청이 기록되지 않기 때문이다.

기존의 코드를 이렇게 수정한다.

...
app.use(logger('dev'));
app.use(express.static(path.join(__dirname,'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
//app.use(express.static(path.join(__dirname, 'public')));
...

기존 코드에서는 morgan, json, urlencoded, cookie-parser 미들웨어를 거쳐야 static 미들웨어 도달한다.

요청을 기록하는 morgan을 제외하고 정적 파일을 제공하는데 

영향을 끼치지 않는 json, unlencoded, cookie-parser를 거치는 것이 낭비이다.

따라서 순서를 바꿔주는 것이 좋다.

참고로 서비스 따라 쿠키 같은 것이 정적 파일을 제공하는데 영향을 끼칠 수도 있다.

그러므로 자신의 서비스에 맞는 위치를 선택해야 한다.

출처 : node.js 교과서