Express.js에서 정적 파일 제공하기

express.static()

• express의 미들웨어 모듈
• 이를 이용하면 정적 파일을 직접적으로 제공할 수 있다.
• 예로 들면, 아래 코드를 작성하면 public이라는 이름의 디렉터리에 포함된 이미지, css 파일 및 js 파일을 url로 제공하게 된다.

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

 

다음과 예와 같이 /static 경로를 통해서 public 디렉터리에 포함된 파일을 로드할 수 있다.

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

http://localhost:3000/css/style.css
http://localhost:3000/images/logo.css
http://localhost:3000/js/main.js
http://localhost:3000/public/images/logo.svg
http://localhost:3000/public/index.html

 

💡 express.static 함수에 제공되는 경로는,
node 프로세스가 실행되는 디렉터리에 대해 상대적이다. 따라서 express 앱을 다른 디렉터리에서 실행하는 경우에는 제공을 원하는 디렉터리의 절대 경로(__dirname)를 사용하는 것이 안전하다!

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

 

 

(+) __dirname is not defined

Express에서 commonjs 모듈을 사용하다가 es 모듈을 사용하게 된 경우에 해당 에러가 발생하게 된다.

왜냐하면 commonjs에서 사용하던 __dirname 변수가 es 모듈에는 없기 때문!

따라서 에러를 해결하려면 다음과 같이 작성해야 한다.

import path from 'path';
const __dirname = path.resolve();

 

CommonJS 모듈

const express = require('express');

 

ES 모듈

import express from 'express';