https [리액트][노드] 배포 세션관련 질문

Question

안녕하세요 이번에 팀프로젝트를 리액트 와 노드로 진행하고 이제 배포하고있습니다. 저는 도메인을 하나 구입해서 ec2 ubuntu 로 서버를 올렸습니다. ssl 인증서 까지 진행했고 리액트와 노드는 하나의 ec2에 구동을 하였고 포트 전부 확인했고 제 도메인으로 접속하면 문제없이 리액트화면이 잘 나옵니다. 문제는 세션문제인데요 처음에 카카오로그인 구현을 해놔서 로컬에서는 포트만 다르니까 use 에서 true false 하라는 설정 다했을때 로그인했을때 세션관련 문제는 따로 없었습니다. 근데 이제 배포를 하고 나니 세션이 자꾸 덮어써지는 문제가 발생합니다. 0|server | use : upx3eMlDD5ok0XanMXSipmSupLciTx2i0|server | 로그인 요청0|server | 정보 저장0|server | 로그인 완료 upx3eMlDD5ok0XanMXSipmSupLciTx2i0|server | use : 9r3txAD5_DklMf0SkkbbqrF0Ts2d5kve0|server | 사용자 불러오기 9r3txAD5_DklMf0SkkbbqrF0Ts2d5kve서버에서 로그는 이렇게 되는데 처음엔 세션아이디가 생생이 잘되고 나서 로그인 요청 후에 페이지가 이동되면 세션이 갑자기 바뀌어 버립니다. 진짜 3일정도 잡고있었고 블로그란 블로그 다 찾아봤고 구글링도 밤새어가면서 구글링해봤지만 도저히 해결이 안됩니다.처음엔 리액트 는 네트라파이에 올리고 노드는 ec2에 올려서 다른 도메인으로 구성해봤는데 이것도 세션이 덮어써지고 같은 도메인에서 해보자 했는데 이것도 안되고 로그인하는게 현재 카카오 로그인 기능만 만들어놓긴했는데 로컬은 문제가 없는데 왜이러는지 이해가 잘 안됩니다. 세션 쿠키가 뭔지 어떻게 생성되는지 공부도 해봤고 use 설정 cros 설정 nginx 설정 완벽하게 해놓았는데도 도저히 원인을 잘모르겠습니다. 혹시 제가 참고할만한 블로그나 기술적인 방향을 알려주신다면 최대한 적용해보겠습니다. ㅠㅠ

new신입 · Answer

세션 덮어쓰는 문제는 주로 CORS 설정과 쿠키의 도메인, 경로 설정과 관련이 있습니다. 배포 환경에서는 로컬 환경과 다르게 네트워크와 쿠키 정책이 다르게 동작할 수 있기 때문에, 이와 관련된 여러 설정을 점검해보는 것이 중요합니다.여기서는 몇 가지 가능한 원인과 해결책을 제시하겠습니다.1. CORS 설정리액트 앱이 다른 도메인에서 실행되고 있고, 노드 서버와의 통신이 CORS 정책을 위반하고 있을 수 있습니다. 이 문제를 해결하기 위해서는 CORS 설정을 정확히 해야 합니다.Express에서 CORS 설정EC2의 노드 서버에서 CORS를 설정할 때, 클라이언트에서 오는 요청을 허용하려면 아래와 같이 설정을 해야 합니다.javascript코드 복사const cors = require('cors'); // CORS 설정 app.use(cors({ origin: 'https://your-react-app-domain.com', // 리액트 앱의 도메인 credentials: true, // 쿠키 전송을 허용하려면 true로 설정 }));2. 쿠키 설정세션 쿠키를 사용할 때는 쿠키의 domain, path, secure, sameSite 옵션을 적절하게 설정해야 합니다. 이 설정을 잘못하면 세션이 제대로 유지되지 않거나 다른 도메인에서 쿠키가 제대로 전달되지 않을 수 있습니다.쿠키 설정 (세션 관리)서버에서 세션 쿠키를 설정할 때 credentials: true와 함께, 쿠키의 옵션도 적절히 설정해야 합니다. 예를 들어, 아래와 같은 설정을 적용해 보세요:javascript코드 복사// 예시: Express에서 세션 쿠키 설정 app.use(session({ secret: 'your-secret-key', resave: false, saveUninitialized: true, cookie: { httpOnly: true, // JavaScript에서 쿠키 접근을 차단 secure: process.env.NODE_ENV === 'production', // HTTPS일 때만 쿠키가 전송되도록 sameSite: 'None', // cross-site 요청에서도 쿠키가 전송되도록 설정 domain: 'your-domain.com', // 쿠키 도메인 설정 (서버와 클라이언트가 같은 도메인일 때) } }));여기서 중요한 점은 secure: true를 설정하는 것입니다. 만약 https를 사용하고 있다면, secure: true로 설정해야 합니다. 또한 sameSite: 'None'을 설정하여 다른 도메인 간의 쿠키가 공유되도록 해야 합니다.3. 리액트에서의 쿠키 처리리액트에서 서버와 통신할 때 credentials: 'include' 옵션을 사용하여 쿠키를 포함시켜야 합니다. 예를 들어, API 요청 시 쿠키를 포함하려면 다음과 같이 설정할 수 있습니다.javascript코드 복사fetch('https://your-api-server.com/api', { method: 'GET', credentials: 'include', // 쿠키 포함 });4. 세션 초기화 및 덮어쓰기 방지서버에서 세션을 제대로 초기화하고 덮어쓰지 않도록 조치를 취해야 합니다. 로그인 후 세션을 저장하는 과정에서 세션이 덮어쓰이지 않도록, 세션 ID를 유지하도록 서버 측에서 처리해야 합니다.5. 로그인 후 페이지 이동리액트 앱에서 로그인 후 페이지 이동 시, 세션이 제대로 유지되지 않으면 쿠키가 초기화될 수 있습니다. 페이지 이동을 할 때 쿠키가 유지되도록 리디렉션 처리를 해줘야 합니다.6. 리액트와 서버 간의 쿠키 공유만약 프론트엔드(리액트)와 백엔드(노드 서버)가 다른 포트에서 실행되고 있다면, 서로 다른 포트일 경우 쿠키 공유가 안 될 수 있습니다. 이 경우 서버와 클라이언트가 동일한 도메인을 사용하도록 설정해야 합니다.서버와 클라이언트가 같은 도메인에서 실행되도록 하거나, CORS 설정을 통해 쿠키를 허용해야 합니다.만약 localhost에서 테스트 중이라면, localhost와 127.0.0.1은 다른 도메인으로 간주될 수 있습니다. 이 경우 쿠키가 제대로 전달되지 않을 수 있습니다.7. EC2와 도메인 설정 확인배포 환경에서 EC2와 도메인 설정을 제대로 확인해보세요. EC2의 보안 그룹 설정에서 HTTP/HTTPS 포트가 열려 있는지, 도메인과 연결된 IP가 정확한지 확인해야 합니다.결론CORS와 쿠키 설정을 정확히 해주세요.서버와 클라이언트가 같은 도메인에서 실행되도록 설정하거나, CORS 설정에서 credentials: true와 함께 정확한 도메인 설정을 해주세요.로그인 후 세션을 덮어쓰지 않도록 세션 ID 관리 방식을 체크하세요.이 문제는 배포 환경에서의 CORS, 쿠키 처리, 세션 관리가 로컬 환경과 달라서 발생하는 경우가 많습니다. 위의 설정을 확인하고 적용하면 세션 덮어쓰기 문제를 해결할 수 있을 것입니다.

https [리액트][노드] 배포 세션관련 질문

1개의 답변

기술 목록