배포 - 프론트, 백엔드 쿠키 통일하기

배포할 때 프론트와 백엔드의 쿠키를 통일하기 위해서는 다음과 같이 추가 설정이 필요하다.

backend/index.js

const prod = process.env.NODE_ENV === 'production';

if (prod) { // 배포 환경에서 추가 설정
  app.use(hpp());
  app.use(helmet());
  app.use(morgan('combined'));
  app.use(
    cors({
      origin: 'http://bigbroshin.net', // 해당 프론트 주소의 요청만 허용
      credentials: true, 
    }),
  );
} else { // 개발 환경에서의 설정
  app.use(morgan('dev'));
  app.use(
    cors({
      origin: true,
      credentials: true,
    }),
  );
}

express-session에서 domain설정을 추가하여 프론트 서버(예제에서는 bigbroshin.net)와 백엔드 서버(예제에서는 api.bigbroshin.net) 두 주소가 허용될 수 있도록 한다.

app.use(
  expressSession({
    resave: false,
    saveUninitialized: false, 
    secret: process.env.COOKIE_SECRET, 
    cookie: {
      httpOnly: true, 
      secure: false, 
      domain: prod && '.bigbroshin.net', // 배포 환경에서의 도메인
    },
    name: 'cookie',
  }),
);

주의할 점을 domain 설정의 주소의 앞에 dot(.)이 반드시 들어가야 한다는 점이다. 이렇게 해야 프론트와 백엔드 서버 모두 쿠키를 통일할 수 있다.