localtunnel로 AWS 리액트 서버 외부 접속하기

리액트-익스프레스로 협업 프로젝트를 하던 도중,

AWS 서버에 올려(리액트-3000번 포트, 익스프레스-5000번 포트) get post 요청을 테스트하려고 하는데 npm start 실행 후 외부에서 리액트 서버 페이지에 접속이 안되는 현상이 생겼다.

찾아보니 외부에서 localhost에 접속하게 해주는 ngrok과 localtunnel 있었다. 이 둘 중 하나를 사용하여 리액트 서버에 접속해보려고 한다.

ngrok과 localtunnel

ngrok은 Secure tunnels to localhost로 외부에서 로컬에 접속 가능하게 하는 터널 프로그램이다.

→ 다운로드, 회원가입 등 요구사항이 많아서 pass

내 ngrok과 동일하게 로컬 환경을 외부에서 접속해 볼 수 있는 주소를 만들어주는 프로그램이다.

→ 대신 localtunnel은 npm에 속해있어서 내가 사용하기엔 이것저것 다운로드, 회원가입 등 요구사항이 많은 ngrok보단 적합하다 생각해 이것으로 사용 채택!

$ npm i -g localtunnel

// p : 포트 
$ lt -p 3000

// 해당 url에 접속하면 된다!
> your url is: http://nine-plants-scream-43-200-191-221.loca.lt

리액트 npm start를 하면 뜨는

Local:            http://localhost:3000
On Your Network:  http://172.31.xx.xxx:3000

http://172.31.xx.xxx:3000 → 이 url이 AWS에서 프라이빗 IPv4 주소여서 접속이 안됐던 거였다. 즉, 퍼블릭 IPv4 주소로 접속해야 했는데 틀린 url 주소로 접속했던 것이었다.

퍼블릭 IPv4 주소인 http://43.200.xxx.xxx로 접속하니 잘된다.. ㅎ..