인프런 커뮤니티 질문&답변

google_user님의 프로필 이미지

작성한 질문수

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

express aws 배포 후 세션 - 쿠키

작성

·

1.5K

0


선생님, 안녕하세요.
사실 이 질문이 여기에 해도 되는 질문인지 잘 모르겠지만 답변해주시면 감사하겠습니다.
nest.js를 학습하기에 앞서
express 를 복습하고자
전에 개인적으로 만들었던 거를 한번 복습 후, 이번에 aws ec2에 배포까지 해보게 되었습니다.
로그인을 session으로 구현하였는데,
로컬에서는 클라이언트에 쿠키가 잘 전달 되었지만,
ec2에 올리고 난 후 클라이언트에 쿠키가 전달되지 않아 도움을 청하고자 합니다.
 
 
우선 서버쪽 CORS 설정과 세션 설정은 이렇게 해주었습니다.
app.use(
  cors({
    origin: [
      'https://jh-client.ga' // 배포한 client url
    ],
    preflightContinue: true,
    credentials: true,
  })
);



app.use(
  session({
    secret: 'jjj',
    proxy: true,
    store: new RedisStore({
      client: redisClient,
      ttl: 3600 * 24 * 3, //3600초 = 1시간
      // ttl: 10,
    }),
    saveUninitialized: true,
    resave: false,
    name: 'MySessionKey',
    cookie: {
      sameSite: 'none',
      secure: true,
     // httpOnly : true,
      // maxAge: 1000 * 60 * 60, // 1000밀리세컨드 : 1초
      maxAge: 1000 * 60 * 60 * 5,
    },
  })
);
 

클라이언트와 server 모두 ACM을 통해 https 설정을 해주었고, 

클라이언트에는 cloud front,

서버에는 elastic load balancer 도 적용해주었습니다.

stack over flow나 다른 곳들을 찾아본 결과, 

sameSite = 'none',  secure = true 설정을 해주면 대부분 된다고 하던데

(물론 클라이언트에서 axios 요청을 보낼때도 withCredentials : true 설정을 해주었습니다.)

저는 이것 외에도 추천하는 다양한 방법들을 시도해보았지만 

잘 해결되지 않아 너무 답답한 마음에 질문 드렸습니다.

꼭 답변해주시면 감사하겠습니다

감사합니다~~

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

프론트서버 백엔드 서버가 따로있는 상황이신가요? 네트워크탭에서 요청을 클릭해서 쿠키를 확인해보세요. 아마 느낌표가 떠있을 겁니다. domain 세팅이 잘 되어있는지 확인해보세요.

google_user님의 프로필 이미지
google_user
질문자

먼저 늦은 시간에

빠른 답변 해주셔서 정말로 감사드립니다.

먼저 프론트는 리액트로 만들어서 s3에 배포하고 ACM을 통해 https를 적용하고, 클라우드 프론트도 적용해줬습니다.

백엔드 서버는 ec2 ubuntu 에 올려줬고, 마찬가지로 ACM을 통해 https를 적용하고 elastic load balancer 를 적용해주었습니다.

 

방금 말씀해주신 네트워크 탭을 살펴보니,

이런 식으로 response 에 set-cookie가 있는 것을 확인 할 수 있었습니다.
그런데, application 탭으로 들어가 확인해보니

이렇게 쿠키가 설정이 안된 것을 볼 수 있었습니다. 

 

이렇다면 혹시 클라이언트에서 무언가 설정이 잘못된걸까요??

 

그리고 추가로 설명해주신 도메인 세팅이라는게 혹시 뭔지 설명해주실 수 있을까요???

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

cookie에 domain 설정 넣으셔야 합니다. 프론트 서버에서도 쓸 수 있게끔요. 혹시 프론트랑 백엔드가 도메인이 다른 경우에는 쿠키 설정이 현실적으로 어렵습니다.

google_user님의 프로필 이미지
google_user
질문자

 

답변 진심으로 감사드립니다!!!

app.use(
  session({
    secret: 'blue',
    proxy: true,
    //Redis 서버 설정 정보
    store: new RedisStore({
      client: redisClient,
      ttl: 3600 * 24 * 3, //3600초 = 1시간
      // ttl: 10,
    }),
    saveUninitialized: true,
    resave: false,
    name: 'MySessionKey',
    cookie: {
      sameSite: 'none',
      secure: true,
     httpOnly : false,
      // maxAge: 1000 * 60 * 60, // 1000밀리세컨드 : 1초
      maxAge: 1000 * 60 * 60 * 5,
      domain : 'jh-client.ga',    // 배포한 클라이언트 도메인
    },
  })
);

 

위처럼 cookie 부분에 domain : 'jh-client.ga' 이렇게 설정하는 거 말씀하시는 게 맞을까요??

그리고 프론트랑 백엔드가 도메인이 다른경우에 쿠키 설정이 현실적으로 어렵다고 하셨는데,  

그럼 보통 프론트랑 백엔드가 같은 도메인을 사용하나요??
보통 프론트랑 백을 분리해서 개발하지 않나요???

 

++ 추가로
url 옆의 자물쇠를 클릭해서 보니 서버쪽 쿠키는 확인 할 수 있었습니다!

하지만 여전히 클라이언트에 저장이 되지는 않네요;;;

stackOverFlow에서

app.set('trust proxy',1)

설정을 해주면 된다고 해서 이 설정도 해줬는데 먹히지 않습니다;;;

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

보통 같은 도메인을 사용합니다. api.zerocho.com과 zerocho.com app.zerocho.com 이렇게 서브도메인만 다르죠.

google_user님의 프로필 이미지
google_user
질문자

아하, 감사합니다~~ 
그렇다면 현재 제 백엔드 서버의 도메인이 'jaehyeon.com' 인데, (https://jaehyeon.com)

'client.jaehyeon.com' 이런식으로 프론트 도메인을 만들어서 s3에 올려서 배포하고, https를 적용한 뒤,

app.use(
  session({
    secret: 'jjj',
    //Redis 서버 설정 정보
    store: new RedisStore({
      client: redisClient,
      ttl: 3600 * 24 * 3, //3600초 = 1시간
      // ttl: 10,
    }),
    saveUninitialized: false,
    resave: false,
    name: 'MySessionKey',
    cookie: {
      sameSite: 'strict',
      secure: true,
      // maxAge: 1000 * 60 * 60, // 1000밀리세컨드 : 1초
      maxAge: 1000 * 60 * 60 * 5,
    },
  })
);

익스프레스 세션을 이런식으로 설정해주면 될까요?? 

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

cookie.domain은 .jaehyeon.com (앞에 점이 중요)으로 설정하시고 cors도 client.jaehyeon.com으로 설정하셔야 합니다.

google_user님의 프로필 이미지
google_user
질문자

감사합니다!!! 

서브도메인으로 하니깐 되었습니다!!

덕분에 해결되었습니다!! 너무너무 감사드립니다~~!!!