express static, 정적파일 전달하기

정적 파일이란?

변화하지 않는 파일. image, css, js파일 등을 의미한다.

 

express에서는 정적 파일을 쉽게 전달할 수 있는 기능을 가지고 있다.

---

express.static()

express.static 미들웨어에 포함시키며 전달하면, 파일의 직접적인 제공을 시작할 수 있다.

app.use(expres.static('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'));

/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 프로세스가 실행되는 디렉토리에 대해 상대적이다.

 

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

 

"dir__name"은 현재 실행 중인 폴더의 경로를 뜻한다.

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

---

예시

server.js 에 다음 코드를 작성

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

 

app.js

 

이러면 아래와 같이 정적파일이 localhost:4000/public/js/app.js 주소로 전달된다.