인프런 커뮤니티 질문&답변
작성한 질문수
질문 있습니다.
해결된 질문
작성
·
80
0
안녕하세요. API 개발을 하다가 클라이언트의 IP를 가져와서 사용 할 일이 생겼습니다.
간단하게 Request 객체의 ip 값을 가져와서 사용하려고 하는데, 저희 클라이언트가 NextJS의 SSR을 사용해서 렌더링을 하고있어서 브라우저에서 요청을 하면 NextJS 서버 -> NestJS 서버로 요청이 들어가 IP가 요청을 보낸 유저의 IP가 아닌 배포하고있는 서버의 IP로 들어오고 있습니다. 이 문제는 user-agent 값 확인을 통해서 원인을 파악 할 수 있었습니다.
문제를 해결하기 위해 NextJS에서 axios요청을 할 때, 헤더에 클라이언트의 원본 아이피를 가져와서 달아주고 서버에서 해당 헤더의 값을 가져와서 사용하고자 했습니다.
생각처럼 됐으면 좋았겠지만, 왜인지 서버에서는 계속 배포하고있는 서버의 IP를 가져오고 있는 상태입니다. 커스텀 헤더에 달아준 값을 확인해봐도 서버 IP가 찍히고 있는데요. 클라이언트 로그에서는 또 원본 IP가 잘 찍히고 있습니다.
Nginx를 사용중인데 Nginx에서 문제가 생기고 있는건지, 어디가 잘못된건지 감이 안와서 질문 남깁니다. 어떻게 하는게 좋을까요?
추가로, 클라이언트의 원본 IP를 받아오는 다른 방법이 있을까요?
감사합니다.
답변 2
0
그러면 중간 nextjs에서는 당연히 아이피가 제일 앞 nextjs 서버 아이피가 되죠.
거기서도 제일 앞 아이피가 담긴 헤더가 있으면 그걸 그대로 서버로 전달하셔야 합니다.
네, 그래서 getServerSideProps를 사용 하면서 axios를 사용 할 때, headers에 x-client-ip 라는 이름으로 원본 아이피를 넘겨줬습니다.
그러나, 로그에 찍히고 있는건 원본 아이피가 아니라 nextjs 서버 아이피가 찍히고 있습니다.
어느 부분이 잘못 된건가요? 서버로 전달 하는 방법이 잘못된걸까요?
브라우저 - nextjs - nextjs - nestjs 구조일 때 지금
브라우저가 아니라 1번 nextjs 서버 아이피를 보내고 계신 것 같은데요.
지금 axios의 위치가 1번인지 2번인지 모르겠다면 headers 설정할 때
req.headers.[x-client-ip] || 지금서버ip
이런 식으로 앞단에서 받은 클라이언트 아이피를 다시 넘기세요
IP를 가져와서 변수에 담아주는 함수를 만들고, 가져온 ip를 브라우저 콘솔에서 찍어보게 해놨습니다. 브라우저 콘솔에서는 클라이언트의 ip가 정상적으로 출력되고 있는데 서버에서는 왜 설정해둔 헤더의 값을 가져오면 배포한 서버의 ip가 나올까요?
const initializeClientIp = async () => {
clientIp = await getIpAddress();
console.log("✅ Initialized Client IP:", clientIp);
};브라우저에서 잘 찍히고 있으면 일단 클라이언트 아이피를 잘 넘기고 있는 것이고, 백엔드에서 헤더에 접근 할 때, 문제가 있는 것 아닌가요?
getServerSideProps에서 실행되는 거면 브라우저 콘솔에 찍히면 안 됩니다. nextjs 서버 콘솔에 찍혀야 합니다.
프로그램이 값을 잘못 읽는 일은 거의 없습니다. 값을 설정하는 쪽에서 실수가 있는 것입니다. 클라이언트 아이피를 설정했다고 생각한 그 곳에서 지금 서버 아이피를 설정하고 있는 것입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 뱅준님.
NestJS와 NextJS 서버 간의 요청에서 클라이언트의 실제 IP를 얻고자 하는 문제는 서버와 클라이언트 간 통신에서 자주 직면하는 문제입니다. 특히, SSR 환경에서는 이러한 문제가 더욱 눈에 띄게 됩니다. 아래에 관련된 유사한 질문들과 해결책을 제시할 수 있는 자료를 안내해 드리겠습니다.
Client IP 획득과 관련된 질문과 답변:
- 서버에서 클라이언트 IP 확인하는 방법: 여기서는 클라이언트의 IP 주소를 직접 헤더에 설정하여 서버 요청 시 포함하는 방법이 논의되고 있습니다. 특히 SSR 환경에서
x-forwarded-for헤더를 사용하는 것이 공통된 방안입니다.
- 서버에서 클라이언트 IP 확인하는 방법: 여기서는 클라이언트의 IP 주소를 직접 헤더에 설정하여 서버 요청 시 포함하는 방법이 논의되고 있습니다. 특히 SSR 환경에서
Nginx 사용 시 X-Forwarded-For 헤더 설정:
- Nginx에서 실제 클라이언트 IP를 얻기 위해서는,
proxy_set_header설정을 통해 클라이언트의 원본 IP를X-Forwarded-For라는 헤더에 담아 보내도록 설정해야 합니다. 이를 통해, 서버 측 코드에서 이 헤더 값을 참조하면 됩니다. 예제 설정은 다음과 같습니다:
location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://your_app_server; }
- Nginx에서 실제 클라이언트 IP를 얻기 위해서는,
NestJS 서버에서 IP 획득:
- NestJS에서
X-Forwarded-For헤더를 활용하여 클라이언트의 IP를 획득하는 코드 예시는 다음과 같습니다:
const clientIp = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
- NestJS에서
질문의 상황을 고려하면, Nginx 설정에 따라 클라이언트의 원본 IP가 요청에 포함되지 않거나 NestJS에서 해당 헤더 값을 올바르게 읽지 못하는 문제가 있을 수 있습니다. 위 방법을 검토하시고, 관련된 설정을 기반으로 클라이언트 IP를 올바르게 얻을 수 있도록 조정하시길 바랍니다.
혹시 위 링크나 설명으로 해결되지 않는다면, 이어서 추가적인 질문을 해 주시면 더욱 상세히 답변드릴 수 있도록 하겠습니다. 감사합니다.🙏
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
1)
x-forwarded-for설정 했으나,console.log("x-forwarded-for: ", req.headers["x-forwarded-for"]);배포하고 있는 서버 ip가 두개 뜹니다.
2) 네 맞습니다.