정적 파일 제공하기

정적 파일 제공하기 (Serving Static Files)

이미지, CSS 파일, JavaScript 파일 같은 정적 파일을 제공하려면 Express의 내장 미들웨어 함수인 express.static을 사용해요. 정적 파일 제공은 웹 앱을 만들 때 가장 기본적이고 자주 마주치는 일이에요.

출처: Express 공식 문서 - Serving static files in Express

express.static 사용하기

함수 시그니처는 다음과 같아요:

express.static(root, [options]);

root 인자는 정적 자산을 제공할 루트 디렉토리를 지정해요. options 인자에 대한 자세한 내용은 express.static 문서를 참고하세요.

예를 들어 public이라는 디렉토리의 이미지, CSS, JavaScript 파일을 제공하려면:

app.use(express.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

중요한 점: Express는 정적 디렉토리를 기준으로 파일을 찾으므로, 정적 디렉토리의 이름은 URL에 포함되지 않아요.

여러 정적 디렉토리 사용하기

여러 정적 자산 디렉토리를 사용하려면 express.static 미들웨어 함수를 여러 번 호출하면 돼요:

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

Express는 express.static 미들웨어로 정적 디렉토리를 설정한 순서대로 파일을 찾아요.

가상 경로 접두사 만들기

파일 시스템에 실제로 존재하지 않는 가상 경로 접두사(마운트 경로)를 만들려면 정적 디렉토리에 마운트 경로를 지정해요:

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

이제 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 함수에 주는 경로는 node 프로세스를 실행한 디렉토리를 기준으로 해석돼요. 다른 디렉토리에서 Express 앱을 실행한다면, 제공하려는 디렉토리의 절대 경로를 쓰는 편이 더 안전해요:

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

정적 파일 제공하기