현상
자 저번시간까지 이제 nodejs 환경에서 구동되는 express BE, react FE를 git 저장소에 올려서 내 라이트세일 우분투 서버까지 저장소 연동을하여 부팅하는데 성공했다. 그리고 리눅스 환경에서 백그라운드로 동작할 수 있게 forever 설정까지 끝냈다. 여기까지는 아래 포스팅을 참고하면 된다.
https://extsdd.tistory.com/453
sudo forever list
자 forever를 이용해 백그라운드에서 express 백앤드 API 앱(0번)과 react 프론트앤드 앱(1번)이 모두 구동중에 있다
curl localhost:3000 # React 서버 요청
curl localhost:4000 # Express 서버 요청
FE 응답
자 React FE가 구동중인 3000번 포트로 요청을 보내면 응답이 온다. 잘 구동중이라는 것이다.
BE 응답
자 Express BE가 구동중인 4000번 포트도 요청을 보내면 API 응답이 온다. BE도 잘 구동중이라는 것이다.
외부 요청
이건 지금 FE/BE 앱들이 구동되고 있는 서버에서 수행한 것이고. 이제 공인 IP를 이용하여 외부에서 호출해보자.
{서버 공인 IP}:{PORT}
자 공인 IP를 이용해서 FE/BE 각각 3000번 4000번 포트로 접근할 경우 아래와 같은 응답이 온다.
- 사이트에 연결할 수 없음
- {서버 공인 IP} 에서 응답하는 데 시간이 너무 오래 걸립니다.
- 다음 방법을 시도해 보세요.
- 연결 확인
- 프록시 및 방화벽 확인
- ERR_CONNECTION_TIMED_OUT
원인
보자마자 아마 방화벽 개방이 안되었음을 확신했다. 서버 터미널이 아닌 내 PC 터미널에서 한번 확인해보자.
telnet {서버 공인 IP} {PORT}
# Ex) telnet 123.123.123.123 3000 # FE 포트 확인
# Ex) telnet 123.123.123.123 4000 # BE 포트 확인
외부에서 접근하면 3000, 4000번 포트 모두 접근이 안되는 것을 알 수 있다. 실제로 3000, 4000번 포트가 동작하지 않을수도 있으나, 방금 서버 로컬환경에서 3000, 4000 번 포트 검증을 마쳤으니 이 케이스는 아니다. 고로. 방화벽 개방 상태를 보면 된다.
방화벽 개방
라이트세일 대시보드 접속
자 내 라이트세일 대시보드에서 네트워킹 탭에 들어가보자.
방화벽 목록 확인
스크롤을 내려보면 IPv4 방화벽 목록이 있다. 여기에 보면 3000/4000 포트가 없는 것을 볼 수 있다. 여기서 3000, 4000번 포트를 추가해주면 외부에서 접속이 가능해진다.
방화벽 목록 추가
사용자 지정으로 3000번을 추가해주고 생성을 눌러주자. 4000번 포트도 반복하면 된다.
테스트
자 그럼 이제 공인 IP로 FE,BE에 접근 할 수 있는 것을 확인 할 수 있다. 난 테스트를 위해서 3000, 4000포트를 임시로 개방했지만 nginx 를 이용해 리버스 프록시로 구성을 할 것이기 때문에 이 방화벽 설정은 삭제할 예정이다. 혹시나 nginx 를 이용해 80,443 포트를 FE로 연결시키고, FE는 BE간 로컬 통신 할 예정이라면 다음 포스팅을 참고해주면 된다.