한윤석 개발 블로그

배운 것을 적는 블로그입니다.

Express 정적파일

등록일: 2019-02-05
수정일: 2019-02-05

서버가 이미지나 css파일들 javascript파일같은 정적파일들을 전송하기 위해서는 다음과 같이 express.static미들웨어를 사용하면 됩니다.

express.static(root, [options])
  • root는 정적파일들의 root directory입니다.
  • options는 express.static 을 참고하세요

예를 들면 public이라는 폴더에 정적파일들이 있으면 다음과 같이 작성합니다.

 app.use(express.static('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 경로들로 public폴더에 있는 정적파일들에 접근할 수 있습니다.

  • Express는 static directory로 상대경로로 파일을 찾습니다. 그래서 경로에 public이 없습니다.

여러개의 static directory에 접근할 수 있도록 하려면 여러번 호출하면 됩니다.

Express는 express.static 미들웨어 기능을 사용하여 정적 디렉토리를 설정하는 순서로 파일을 찾습니다.

  • 캐싱하여 성능을 올리기 위해서는reverse proxy 를 사용해야합니다.

실제 파일 시스템에없는 virtual path prefix를 사용하기 위해서는 다음과 같이 입력 합니다.

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 public에 있는 파일들을 /staticpath를 통해 접근할 수 있습니다.

그러나 express.static 함수에 제공하는 경로는 노드 프로세스를 시작한 디렉토리와 관련이 있습니다. 다른 디렉토리에서 express 앱을 실행하는 경우 제공하려는 디렉토리의 절대 경로를 사용하는 것이 더 안전합니다.

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

Sources

  • https://expressjs.com/en/starter/static-files.html

자바스크립트로 직접 만들면서 배우는 - 자료구조와 알고리즘 강의 바로 가기
실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지 - OAuth 2.0 강의 바로 가기
기계인간 이종립, 소프트웨어 개발의 지혜 - Git 강의 바로 가기

코드숨에서 매주 스터디를 진행하고 있습니다. 메일을 등록하시면 새로운 스터디가 시작될 때 알려드릴게요!