가장 쉽고, 전 세계 개발자들이 가장 많이 쓰는 ‘국룰’ 방법 2가지를 알려드릴게요.
지금 개발하고 계신 localhost:3000을 외부(친구 핸드폰, 다른 컴퓨터)에서 접속하게 하려면 ‘터널링(Tunneling)’ 기술을 써야 하는데, 복잡한 이론 몰라도 아래 방법이면 1분 만에 해결됩니다.
방법 1. 가장 유명하고 안정적인 방법: ngrok (엔그록)
가장 추천하는 방법입니다. 설치가 필요하지만 한번 깔아두면 가장 안정적이고 속도도 빠릅니다.
-
다운로드:
에서 회원가입 후 파일을 다운로드합니다. (무료입니다.)ngrok 공식 홈페이지 -
실행: 설치된 ngrok 프로그램을 실행(터미널/명령 프롬프트)합니다.
-
명령어 입력: 터미널에 아래 한 줄을 치세요.
Bashngrok http 3000 -
끝: 화면에
Forwarding이라고 적힌 곳 옆에https://xxxx-xxxx.ngrok-free.app같은 주소가 뜹니다.
👉 이 주소를 친구에게 카톡으로 보내면 바로 접속됩니다.
방법 2. 설치 없이 명령어 한 줄로 끝: localtunnel (로컬터널)
만약 Node.js가 이미 깔려 있다면(보통 localhost:3000을 띄우셨다면 깔려 있을 겁니다), 아무런 가입도 설치도 필요 없는 이 방법이 제일 빠릅니다.
-
개발 중인 터미널(VS Code 터미널 등)을 엽니다.
-
아래 명령어를 복사해서 붙여넣으세요.
Bashnpx localtunnel --port 3000 -
끝: 잠시 후
your url is: https://xxxx.loca.lt라는 주소가 나옵니다. -
주의: 처음 접속할 때 보안을 위해 비밀번호를 물어볼 수 있습니다. 그럴 땐 터미널에 나온 IP 주소 같은 숫자를 입력해주면 열립니다.
방법 3. VS Code를 쓰고 있다면? (설치 X, 가입 X)
혹시 코딩 툴로 **VS Code(비주얼 스튜디오 코드)**를 쓰고 계신가요? 그럼 프로그램이 이미 기능을 가지고 있습니다.
-
VS Code 하단 패널(터미널 있는 곳)에서 ‘포트(Ports)’ 탭을 클릭합니다.
-
3000포트가 보일 겁니다. 마우스 오른쪽 클릭 -> ‘포트 표시 여부(Port Visibility)’ -> ‘공용(Public)’ 선택. -
지구본 모양 아이콘을 누르면 외부 접속 주소가 복사됩니다.
💡 추천: 무엇을 쓸까요?
-
가장 추천: ngrok (방법 1) -> 조금 귀찮아도 제일 확실하고 끊김이 없습니다.
-
급할 때: localtunnel (방법 2) -> 5초 만에 열 수 있습니다.
지금 바로 방법 2번(npx localtunnel --port 3000)부터 터미널에 쳐보세요!
답글 남기기