TeamMatch 프로젝트 문제해결 3[ 세션과 쿠키 ]

1. 문제 상황

배포 환경에서 세션 관리와 쿠키 설정에 대한 문제로 어려움을 겪었습니다. 로컬에서 개발할 때는 같은 도메인에서 HTTP로 통신을 하여 문제가 없었지만 https 배포 후 문제가 발생했습니다. 로그인 후 세션 값이 덮어지는 현상과 쿠키가 제대로 저장되지 않는 문제로 인해 며칠간 고생했습니다. 이 문제를 해결하는 과정에서 세션 관리와 쿠키 설정에 대한 더 깊은 이해를 얻을 수 있었습니다.

 

서버쪽 use 설정

// 세션 설정
app.use(
  session({
    secret: process.env.SESSION_SECRET, // 세션 암호화 키
    resave: true,
    saveUninitialized: false,
    cookie: {
      httpOnly: true,
      sameSite: "None",
      // secure: true, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      secure: true, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      maxAge: 60 * 60 * 1000, // 세션 만료 1시간
    },
  })
);

2. 배포 과정

• 리액트: https://www.netlify.com/에 배포.
• 노드 서버: AWS EC2 인스턴스에 배포.
• 두 도메인이 달라서 크로스 도메인 설정과 CORS 설정을 했고 https 통신을 적용하기 위해 SSL 설정을 진행했습니다.
• 두 클라이언트와 서버 간의 https 통신이 완료되었지만 세션과 관련된 문제는 계속 발생했습니다.

3. 문제 발생

로그인 후 사용자의 세션 값이 계속 덮어지는 문제가 발생했습니다. API 호출이 제대로 처리되지 않았고 쿠키가 저장되지 않는 문제를 발견했습니다. 이를 해결하기 위해 다양한 방법을 시도했습니다.

4. 나의 시도

• 크로스 도메인 설정: CORS 설정에서 origin 값을 내 클라이언트 도메인으로 수정했지만 문제가 해결되지 않았습니다.
• 서버와 클라이언트 도메인 차이: 클라이언트와 서버의 도메인이 다르다는 사실이 문제의 원인일 수 있겠다고 생각했지만, 크로스 도메인 설정을 맞춰서 진행한 코드와 동일한 설정을 적용했음에도 불구하고 문제는 지속되었습니다.
• EC2 인스턴스에서 리액트와 노드를 같이 배포: 두 도메인이 동일한 인스턴스 내에서 작동하도록 배포를 변경했지만 여전히 문제가 해결되지 않았습니다.

// CORS 설정
app.use(
  cors({
    origin: origin, // 요청을 허용할 클라이언트 도메인
    credentials: true,
    methods: ["GET", "POST", "UPDATE", "PATCH"], // 허용할 HTTP 메서드
  })
);

 

 

추가 시도: nginx 설정

• nginx 설정: nginx에서 크로스 도메인 관련 헤더 설정을 추가했으나, 여전히 문제가 해결되지 않았습니다. 이를 통해, nginx에서 설정을 변경하는 것만으로는 세션 문제를 해결할 수 없다는 것을 알게 되었습니다.

5. 진행 중 절망적인 상황

배포 후 3일이 지난 시점에서 도메인 설정이나 https 설정 자체가 문제였을까 고민했으며 도메인을 사용한 배포가 잘못된 선택이었을지 의문을 가졌습니다. 결국 배포를 포기할까 생각하였습니다.

 

6. 해결의 실마리

로컬 환경에서 테스트를 진행하면서 세션과 쿠키가 제대로 작동하는 것을 확인한 후 로컬에서 http 통신 설정을 그대로 서버에 적용해봤습니다. 서버에서 pull을 받고 실행했더니 배포한 서버에서 세션과 쿠키가 정상적으로 작동하는 것을 확인했습니다.

 

클라이언트 use 설정

// 세션 설정
app.use(
  session({
    secret: process.env.SESSION_SECRET, // 세션 암호화 키
    resave: true,
    saveUninitialized: false,
    cookie: {
      httpOnly: true,
      sameSite: "Lax",
      // secure: true, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      secure: false, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      maxAge: 60 * 60 * 1000, // 세션 만료 1시간
    },
  })
);

 

7. 설정 차이

배포한 서버는 https 통신을 사용하고 있었기 때문에 secure 옵션을 true로 설정한 상태에서 문제를 해결하고자 했습니다. 그러나 로컬에서는 http 통신을 사용하고 있기 때문에 secure를 false로 설정하고 배포했던 설정이 달랐지만 같은 설정을 통해 문제를 해결하였습니다. 로컬과 배포환경  secure  false 로 설정함. 

8. 이유 불분명

현재로서는 정확한 이유를 파악하기 어렵습니다. 하지만 이 과정에서 https 설정과 관련된 세션 및 쿠키 관리의 중요성을 다시 한 번 인식하게 되었습니다. secure 값을 false 로 바꾸니 원래 로컬에서 처럼 정확하게 되었던게 세션과 관련된 개발과정이 조금 미숙했던점 그리고 로컬에서도 이점을 신경쓰지않고 개발했던점이 원인이 아닐까 생각합니다. 

결론

1. 세션과 쿠키 관리는 http와 https 간의 설정 차이로 인해 문제가 발생할 수 있습니다. 배포 환경에서 https 통신을 사용하고 있을 때, **secure: true**로 설정해주어야 쿠키가 정상적으로 동작합니다.
2. 하지만 제프로젝트에서는 false 로 설정해야 동작합니다. 이거에 대한 원인은 아직까지 파악하지 못함
3. CORS 설정 및 크로스 도메인 처리는 중요하지만, 이 문제에서처럼 세션 관리와 쿠키 설정이 더 중요한 핵심 요소일 수 있습니다.
4. 향후 로그인 관련 프로젝트에서는 세션과 쿠키 관리 방식을 다양하게 테스트하고 배포 환경에서의 통신 방식에 맞는 설정을 점검할 필요가 있습니다.

교훈

• 로컬과 배포 환경에서의 설정 차이를 면밀히 확인해야 합니다.
• https에서 secure: true 설정을 반드시 적용해야 하며, 로컬에서는 http로 테스트를 진행할 때는 secure: false를 설정해야 합니다.
• 세션과 쿠키 문제는 단순히 CORS 설정만으로 해결되지 않으며 보안 설정이 중요한 역할을 한다는 점을 배웠습니다.

추가적으로 nginx나 서버 설정이 아닌 세션 및 쿠키 설정에서의 환경 차이가 문제의 원인이었음을 깨달았습니다.