[express] 서로 다른 도메인 쿠키 공유 (Vercel에서 가비아 도메인 설정)

프론트는 Next.js, 백엔드는 express로 프로젝트를 완성하고 Vercel에 배포를하였다.

그러나 로그인 하는부분에서 문제가 생긴 것이다.

사용자가 로그인을 요청하면 백엔드에서는 사용자정보를 세션에 저장하고 그 값을 클라이언트에 쿠키로 보내서 로그인이 필요한 서비스 이용시 백엔드에 쿠키를 같이 보내도록 작업을 해놓았는데 로컬에서 작업할때는 잘 작동이 되었지만 배포를 한 이후에는 쿠키값을 전달받지 못하는 상황이었다.

알고보니 express-session 부분에 설정을 다르게 해야된다는 것을 깨닫게 되었다.

• 기존 코드

const express = require('express');
const app = express();
const session = require('express-session');

app.use(
  session({
    key: 'session_cookie_user_auth',
    saveUninitialized: false,
    resave: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
      httpOnly: true,
      secure: false,
    },
  })
);

• 수정된 코드

const express = require('express');
const app = express();
const session = require('express-session');

app.use(
  session({
    key: 'session_cookie_user_auth',
    saveUninitialized: false,
    resave: false,
    secret: process.env.COOKIE_SECRET,
    proxy: process.env.NODE_ENV === 'production',
    cookie: {
      httpOnly: true,
      sameSite: process.env.NODE_ENV === 'production' && 'None',
      secure: process.env.NODE_ENV === 'production',
    },
  })
);

proxy, sameSite, secure 속성을 추가하였고 개발환경이 production일 경우에 맞게 설정을 하였다.

sameSite에 기본값은 Lax이고 None으로 바꾸어야 다른도메인에서도 사용이 가능하였고,
sameSite를 None으로 바꾸면 secure도 무조건 적용이 되어야 한다고해서 설정을 해놓았다.

sameSite와 secure를 바꿔주어야 한다는 것은 이해가 된 상황인데 proxy를 true로 설정해야 된다는것은 아직 이해를 하지 못하였다.
proxy를 왜 true로 설정해야되는지는 더 찾아봐야 할것같다.

하지만

위에 설정대로 하여도 서버에서 클라이언트로 쿠키를 받지못하였다.
크롬에 네트워크탭으로가서 응답헤더에 Set-Cookie를 확인해보니 정상적으로 쿠키값이 찍히는데 브라우저 쿠키에는 저장이 되지 않았다.

이 경우는 서버와 클라이언트에 도메인 주소가 달라서 생긴 문제였던 것이었다.
그래서 클라이언트는 메인도메인, 서버는 서브도메인으로 설정하여 문제를 해결하였다.

그럴려면 일단 도메인을 갖고있어야 하기에 가비아에서 도메인을 새로 구입하였다.

Vercel 도메인 변경

1. Project Settings탭에 Domains로 이동

가비아에서 구매한 도메인을 입력하고 Add를 클릭

도메인을 추가하면 다음과 같이 A Record와 CNAME을 설정하라는 내용을 확인할 수 있다.

2. 가비아에서 레코드 정보 수정

가비아 DNS 관리 창에 접속하면 다음과 같이 레코드 정보를 수정할 수 있다. 여기서 레코드 수정 버튼을 클릭해서 A Record와 CNAME 항목에 각각 Vercel DOMAIN 페이지의 Value에 적힌 값을 그대로 적어준다.

3. 서브도메인 설정

레코드설정에서 CNAME항목에 입력한값 그대로 한줄 추가해주고, 호스트부분만 사용할 서브도메인에 이름을 입력해준다. 나같은경우엔 클라이언트는 devlog.shop이고 서버는 api.devlog.shop으로 할 예정이기에 호스트부분에 api를 적어주었다.

express 프로젝트 수정

const express = require('express');
const app = express();
const session = require('express-session');

app.use(
  session({
    key: 'session_cookie_user_auth',
    saveUninitialized: false,
    resave: false,
    secret: process.env.COOKIE_SECRET,
    proxy: process.env.NODE_ENV === 'production',
    cookie: {
      httpOnly: true,
      sameSite: process.env.NODE_ENV === 'production' && 'None',
      secure: process.env.NODE_ENV === 'production',
      domain: process.env.NODE_ENV === 'production' &&'.devlog.shop',
    },
  })
);

쿠키 설정 부분에 production 환경일 경우 domain을 .devlog.shop 으로 설정했더니 정상적으로 브라우저에 쿠키가 저장이 되는 것을 볼 수 있었다.