Node.js + Express + TypeScript 게시판 만들기 #4 – morgan, helmet, cors로 서버 기본 세팅

이전 글에서

Controller / Service 분리, 에러 처리 미들웨어, 404 처리까지 완료했다.

이번에는 운영을 대비한 기본 세팅을 추가한다.

morgan: HTTP 요청 로그 관리
helmet: 기본 보안 헤더 적용
cors: 프론트/백 분리 대비 (+ 환경변수로 Origin 관리)

1. morgan – HTTP 요청 로그 관리

> npm install morgan
> npm install -D @types/morgan

index.ts에 적용

...
import morgan from 'morgan';
...

...
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: true}));
...

router 위에 입력해야 라우터로 들어가기 전에 로그가 찍힌다.

위처럼 로그가 찍히게 된다. (GET / 200 1.875 ms -13) (GET /favicon.ico 404 0.568 ms -23)

app.use(express.json());

app.use(express.urlencoded({ extended: true}));

이 두줄은 요청 body를 파싱해주는 뭐라고 하던데 뭐 어떻게 됐더라?? 아무튼 대충 json 파싱

application/x-www-form-urlencoded 형식 파싱 이라고 한다… 한다고 한다.

2. helmet – 기본 보안 헤더 적용

> npm install helmet cors
> npm install -D @types/cors

index.ts 수정

...
import helmet from 'helmet';
import cors from 'cors';
...
...
app.use(helmet());
app.use(cors());
...

router 위에 작성해준다.

app.use(helmet()) 의미 :

helmet을 Express 미들웨어로 등록

이는 기본 보안 http 헤더 자동 설정해주며 XSS, 클릭재킹 등 기본 공격을 막아준다.

3. cors – 프론트/백 분리 대비

app.use(cors()) 의미 :

다른 출처(도메인/포트)에서 오는 요청 허용

즉 백단 포트는 3000 프론트 폰트는 5173이면 5173에서 3000으로 오는 요청을 허용한다는 의미.

프론트엔드와 API 서버 분리 대비 필수

4. env로 PORT / Origin 관리 + CORS 옵션 분리

.env 수정

PORT=3000
NODE_ENV=development
CORS_ORIGIN=http://localhost:5173

cors를 전부 허용하면 운영에서는 맞지 않으니 CORS_ORIGIN 환경변수를 설정한다.

src/config/cors.ts 생성.

import { CorsOptions } from 'cors';

export const corsOptions: CorsOptions = {
    origin: process.env.CORS_ORIGIN,
    credentials: true,
};

origin: .env에 설정한 환경변수를 입력한다.

나중에 url, 포트가 수정되었을때도 환경변수만 수정하면 된다.

credentials: true 쿠키/세션/인증정보 등 요청을 허용한다.

index.ts 수정

방금 작성한 cors.ts를 import 한다.

...
import { corsOptions } from './config/cors';
...
...
app.use(cors(corsOptions));
...

app.use(cors()) > app.use(cors(corsOptions)) 로 수정한다.

5. 현재 index.ts 흐름

app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(helmet());
app.use(cors(corsOptions));

app.use('/', indexRouter);

로그 > 바디 파싱 > 보안 > CORS > 라우터

다음 글 예고

MariaDB 연결
데이터베이스 환경 설정
.env에 DB 정보 추가
실제 DB 접속 테스트

Post Views: 24