express.js - 정적 파일 제공

이미지, CSS 파일, JavaScript 파일과 같은 정적 파일을 제공하려면 Express에 내장된 미들웨어 함수 express.static을 사용하세요.

함수 사용은 다음과 같습니다.

express.static(root, [options])

 

root 인수는 정적 자산을 제공할 루트 디렉터리를 지정합니다. 

옵션 인자에 대한 자세한 내용은 express.static을 참조하세요.

예를 들어 다음 코드를 사용하여 public이라는 디렉터리에 이미지, CSS 파일, JavaScript 파일을 제공합니다.

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

 

여러 개의 정적 에셋 디렉터리를 사용하려면 express.static 미들웨어 함수를 여러 번 호출하세요.

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

Express는 express.static 미들웨어 함수를 사용하여 정적 디렉터리를 설정한 순서대로 파일을 조회합니다.

 

 

express.static 함수가 제공하는 파일에 대한 가상 경로 접두사(경로가 실제로 파일 시스템에 존재하지 않는 경우)를 만들려면 아래와 같이 정적 디렉터리에 대한 마운트 경로를 지정합니다:

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

이제 공용 디렉터리에 있는 파일을 /static 경로 접두사에서 로드할 수 있습니다.

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 함수에 제공하는 경로는 노드 프로세스를 실행하는 디렉터리에 상대적인 경로입니다.

다른 디렉토리에서 express 앱을 실행하는 경우, 서비스하려는 디렉토리의 절대 경로를 사용하는 것이 더 안전합니다.

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