api서버를 cloudflare dns에 등록했을 때, api서버 응답이 없는 이슈

2023/03/12 해결

내용 : react 배포용 빌드에서  api서버로 (nodejs) 데이터를 가져오기 위해 fetch를 할 때 api 서버에서 응답이 오지 않음.

원인 : cloudflare DNS의 프록시 기능을 사용하면, 사용자의 요청이 중간에 cloudflare Proxy server를 경유하게 됨.

기존에 사용하려고 했던 3030 은 cloudflare Proxy 에서 지원하지 않는 포트번호.

ex) [도메인] >> cloudflare Proxy server >> [도메인에 등록한 IP] 

 

해결 : cloudflare doc 참고하여 cloudflare Proxy 에서 지원하는 포트(2087)로 nodejs 서버 구동.

https://developers.cloudflare.com/fundamentals/get-started/reference/network-ports/

Network ports · Cloudflare Fundamentals docs

 

이슈 내용 : 동일한 도메인의 서로 다른 포트가 연결이 되지 않고 있었음.

[도메인] <> [도메인]:3030 포트간 통신응답이 아예 오지 않음. 

 

이슈 발생시 스크린샷 : 

크롬 dev tool, network tap&nbsp; [ 헤더 ]

크롬 dev tool, network tap [타이밍]

 

원인 파악 히스토리 :

1. 내 공유기 IP의 외부포트 열려있는지 확인  -  [ 문제 없음 ]

https://www.yougetsignal.com/tools/open-ports/

Open Port Check Tool - Test Port Forwarding on Your Router

2. ping myloa.co.kr - [특이사항 발견]

cmd 에서 내가 사용하는 도메인으로 핑 찍어보니, 내 공유기 IP가 나오지 않고 처음보는 IP로 핑이 진행됨.

cloudflare DNS 설정값 확인 중 proxy 설정이 수상해서 해당부분 검색.( 초록색 부분 ) 

cloudflare proxy가 지원하는 네트워크 포트가 따로 있다는것 인지.

 

[ 초기 설정 + 수정내용 ]

DNS 서버 설정 : http://myloa.co.kr/ >> 공유기 IP

공유기 설정 :

외부 포트	내부 포트	서버
80	3000	react server
3030 2087	3030 2087	nodejs ( api server)

nodejs : 구동 포트 변경 3030 > 2087

react > nodejs 데이터 요청 코드 :  api 서버 포트 변경 3030 > 2087

const callApi = async () => {
    //const response = await fetch('https://myloa.co.kr:3030/api/challengeAbyssDungeons', {
    const response = await fetch('https://myloa.co.kr:2087/api/challengeAbyssDungeons', {
        method: "POST",
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
        body: ""
    });
    const data = await response.json();
    return data;
};