[Express] 정적 파일 경로를 설정해보자.

웹 서버 호스트에서 경로를 통해 정적 파일을 참조하는 경우가 있다.

ex) localhost:3000/public/css/test.css → public/css/test.css 파일을 보여줌.

 

이미지, css 파일 및 javascript 파일 같으 정적 파일을 제공하려면 epxpress.static 함수를 사용해야 한다.

정적 파일이 포함된 디렉토리의 이름을 express.static 함수의 전달하면 파일의 직접적인 참조를 할 수 있다.

app.use(express.static('public')); 
// public 이라는 이름의 디렉토리를 정적 파일을 제공하는 디렉토리로 설정

public 디렉토리 구조가 다음과 같다고 하자.

그러면 다음과 같이 public 디렉토리에 있는 정적 파일을 로드할 수 있다.

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

또한, 가상 경로를 설정해서 정적 파일을 로드할 수 있다.

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

 

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

 

※ express.static 함수에 제공되는 경로는 node 프로세스가 실행되는 디렉토리에 대해 상대적이다.

따라서, 다음과 같이 절대경로를 사용하는 것이 더 안전하다.

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