inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

express aws 배포 후 세션 - 쿠키

1693

google_user

작성한 질문수 28

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 설정을 해주었습니다.)

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

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

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

감사합니다~~

express nodejs session cookie NestJS TypeORM

답변 1

1

제로초(조현영)

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

0

google_user

먼저 늦은 시간에

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

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

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

 

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

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

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

 

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

 

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

0

제로초(조현영)

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

0

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)

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

0

제로초(조현영)

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

0

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,
    },
  })
);

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

0

제로초(조현영)

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

0

google_user

감사합니다!!! 

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

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

강의자료는 어디서 다운받나요?

0

110

3

질문 있습니다.

0

294

3

코드 편집기 확장 프로그램

0

209

2

(질문)비밀 저장소에 접근하기 위한 인증 정보는 로컬 .env에 저장하는지?

0

143

2

(질문)외부 저장소를 통한 환경변수 불러오기 비동기 질문

0

166

3

로그인을 해도 LoggedInGuard쪽에서 false값이 나옵니다.

0

152

2

로그인방법이 고민됩니다.

0

190

2

yarn seed 명령어 실행 시 데이터 삽입 안됨

0

296

4

yarn run db:create 시에 발생하는 데코레이터 오류

0

242

2

npm run db:create 시에 발생하는 decorating 오류

0

231

2

RxJS 디버깅 질문 있습니다.

0

187

3

CacheManager에 대해 질문 있습니다.

0

173

2

로깅은 어떻게 하는게 효율적일까요?

0

224

1

CORS 질문 있습니다.

0

417

2

쿠키 옵션에 대해서 질문 있습니다.

0

184

2

로그아웃 요청이 403 forbidden 에러가 나는데 왜그런걸까요??

0

447

1

401 unauthorized문제

0

286

1

가드의 장점에 대해서 질문이 있습니다.

0

225

1

로그 관리에 대해 질문 있습니다.

0

252

2

CORS 에러 질문 있습니다.

0

318

2

배포 환경 DB 연결 질문 있습니다.

0

411

2

socket io 미 연결 문제 (nest & flutter)

1

1154

3

no elements in sequence 에러 관해서 질문이 있습니다.

0

454

1

start:dev-backup으로 돌리면 핫 리로딩이 되요 정상인가요?

0

322

1