Express를 이용해 정적파일 불러오기

이번 글에선 저자가 Express를 이용해 Javascript가 포함된 HTML파일을 불러오는데에 있어서 겪은 경험을 바탕으로 쓰여진 글이다. 먼저 저자가 하고자 했던 내용을 간단히 설명하겠다. 

 

문제

파일구조

Express를 이용하여 main.js에서 index.html를 불러오고 index.html에는 <script>태그를 이용하여 lib/tetris.js 파일을 source로 이용하고자 했다. 

 

(좌) main.js   (우) index.html

이 상태로 node를 실행할 경우 tetris.js를 찾지 못한다는 에러가 뜬다. 

 

해결

Express에서는 정적파일들이 이용될 경우 경로를 미리 제시해주어야 한다. static이라는 함수를 이용해서 경로를 설정해주는 두가지 방법이있다.

 

1. app.use(express.static('public'))

public이라는 경로안에 있는 정적파일들을 바로 호출할수 있게해준다. 예를들어 public 안에 있는 style.css를 불러오고 싶으면 http://localhost:3000/style.css를 통해 호출할수 있다.

 

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

이 방법을 가상경로를 이용해서 불러오는 것인데 public안에 있는 파일들을 /static이라는 경로를 통해 불러오는 것이다. 이렇게 하면 보안상 더 안전하다는 장점도 있다. 예를 들어 public안에 있는 style.css를 불러오고 싶으면 http://localhost:3000/static/style.css 을 이용해 불러 올수 있다.

 

저자의 상황에서는 app.use('/lib', express.static(__dirname + "/lib")); 부분을 main.js에 추가시켜주면 정적파일들을 올바르게 불러올수 있게된다.

 

참고된 본문

expressjs.com/en/starter/static-files.html

Serving static files in Express