익스프레스 웹 서버 만들기 - 미들웨어(express.static)

1. express.static 미들웨어란?

 

• **express.static**은 Express.js에서 정적 파일을 제공하기 위한 내장 미들웨어 이다.
• 정적 파일은 서버가 직접 생성하지 않고, 파일 시스템에 저장된 파일을 클라이언트에게 그대로 제공하는 파일들이다.
• 주로 이미지, CSS, JavaScript, HTML 파일 등을 서빙할 때 사용된다.
• 즉, fs 모듈을 사용하지 않고도 서빙할 수 있게 해준다.

 

2. 설치 방법

express 설치 시 포함된다. (내장)

사용 예시

const express = require('express');
const path = require('path');

const app = express();

// 정적 파일 서빙을 위한 미들웨어 설정
app.use(express.static(path.join(__dirname, 'public')));

// 라우트 예시
app.get('/', (req, res) => {
  res.send('정적 파일을 제공하는 Express 서버입니다.');
});

app.listen(3000, () => console.log('서버가 포트 3000에서 실행 중입니다.'));

 

• express.static: 정적 파일을 제공하기 위한 미들웨어 함수
• path.join(__dirname, 'public'): 정적 파일들이 위치한 디렉토리의 절대 경로를 지정한다. 여기서는 현재 파일(__dirname) 기준으로 public 폴더를 지정.
• app.use(express.static(...)): 모든 요청에 대해 지정된 디렉토리 내의 정적 파일을 서빙한다.

3. 주요 옵션

express.static(root, [options])

• root: 정적 파일들이 위치한 디렉토리의 절대 경로.
• options: 정적 파일 서빙 방식을 조정할 수 있는 선택적 설정 객체.

4. 보안 고려사항

정적 파일을 서빙할 때 보안은 매우 중요합니다. 다음과 같은 보안 고려사항을 염두에 두어야 한다.

4.1. 디렉토리 트래버설 공격 방지

• 설정 방법: express.static은 기본적으로 디렉토리 트래버설 공격을 방지한다. ..을 사용한 경로 접근을 자동으로 무시한다.
• 추가 조치: 정적 파일이 포함된 디렉토리 외부에 민감한 파일이 없도록 구조를 설계한다.

4.2. 숨김 파일(dotfiles) 처리

• 옵션 설정: dotfiles 옵션을 'deny' 또는 'ignore'로 설정하여 숨김 파일의 서빙을 금지 한다.

app.use(express.static('public', { dotfiles: 'deny' }));

4.3. 적절한 캐싱 설정

• maxAge 설정: 정적 파일의 캐싱 기간을 적절히 설정하여 보안과 성능을 균형 있게 유지한다.

app.use(express.static('public', { maxAge: '1d' }));

4.4. MIME 타입 설정 확인

• 서버가 올바른Content-Type헤더를 설정하는지 확인한다. express.static은 파일 확장자에 따라 적절한 MIME 타입을 자동으로 설정하지만, 추가적인 검증을 고려할 수 있다.

4.5. CORS 설정

• **교차 출처 리소스 공유(CORS)**가 필요한 경우, 별도의 CORS 미들웨어를 사용하여 정적 파일에 대한 접근을 제어한다.

const cors = require('cors');

app.use(cors({
  origin: 'https://example.com',
  optionsSuccessStatus: 200
}));

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

4.6. SSL/TLS 사용

• HTTPS를 사용하여 정적 파일의 전송을 암호화함으로써, **중간자 공격(MITM)**을 방지한다.

5. 추가적인 설명

5.1. 실무 예시

const express = require('express');
const path = require('path');

const app = express();

// 'public' 디렉토리의 정적 파일을 서빙
app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000, () => console.log('서버가 포트 3000에서 실행 중입니다.'));

 

• 요청: http://localhost:3000/index.html
• 응답: public/index.html 파일의 내용이 클라이언트에 전송된다.

5.2 커스텀 정적 파일 경로 설정

Express에서는 여러 정적 파일 디렉토리를 설정할 수 있습니다. 예를 들어, public과 uploads 두 개의 디렉토리를 정적 파일 서빙 대상으로 지정할 수 있습니다.

const express = require('express');
const path = require('path');

const app = express();

// 'public' 디렉토리 서빙
app.use(express.static(path.join(__dirname, 'public')));

// 'uploads' 디렉토리 서빙 (URL 경로에 'uploads' 접두사 추가)
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.listen(3000, () => console.log('서버가 포트 3000에서 실행 중입니다.'));

 

 

• 요청: http://localhost:3000/uploads/image.jpg
• 응답: uploads/image.jpg 파일의 내용이 클라이언트에 전송됩니다.

6. 주의 사항

미들웨어간의 순서가 애플리케이션 동작 방식과 성능에 영향을 끼치기 때문에 각 미들웨어의 특성과 동작을 알아둘 필요가 있다.

static 미들웨어는 정상적으로 동작할 경우(파일 존재시) 해당 파일을 클라이언트에 서빙하고 종료한다. 즉, next()가 호출되지 않는다. 파일이 존재하지 않아야 next()를 호출하여 다음 미들웨어를 실행한다.

다만 static 미들웨어를 성공시켜 클라이언트에 파일을 서빙하고 종료하고 싶다면, static 미들웨어를 전역 미들웨어보다 위쪽에 두어야한다.

const express = require('express');
const path = require('path');
const app = express();

// 1. 전역 미들웨어 등록
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// 기타 전역 미들웨어 (예: cookie-parser, morgan 등)

// 2. express.static을 라우터 미들웨어보다 먼저 등록
app.use(express.static(path.join(__dirname, 'public')));

// 3. 라우터 등록
app.get('/about', (req, res) => {
  res.send('About 페이지');
});

// 4. 404 핸들러 등록
app.use((req, res, next) => {
  res.status(404).send('페이지를 찾을 수 없습니다.');
});

app.listen(3000, () => console.log('서버가 포트 3000에서 실행 중입니다.'));