http://localhost:3000/ 으로 개발하는것을 URL로 해서 다른곳에서도 접속이 되게 할려면 어떻게 해야하지 가장 쉬운방법 알려줘

가장 쉽고, 전 세계 개발자들이 가장 많이 쓰는 ‘국룰’ 방법 2가지를 알려드릴게요.

지금 개발하고 계신 localhost:3000을 외부(친구 핸드폰, 다른 컴퓨터)에서 접속하게 하려면 ‘터널링(Tunneling)’ 기술을 써야 하는데, 복잡한 이론 몰라도 아래 방법이면 1분 만에 해결됩니다.


방법 1. 가장 유명하고 안정적인 방법: ngrok (엔그록)

가장 추천하는 방법입니다. 설치가 필요하지만 한번 깔아두면 가장 안정적이고 속도도 빠릅니다.

  1. 다운로드: ngrok 공식 홈페이지에서 회원가입 후 파일을 다운로드합니다. (무료입니다.)

  2. 실행: 설치된 ngrok 프로그램을 실행(터미널/명령 프롬프트)합니다.

  3. 명령어 입력: 터미널에 아래 한 줄을 치세요.

    Bash

    ngrok http 3000
    

  4. 끝: 화면에 Forwarding이라고 적힌 곳 옆에 https://xxxx-xxxx.ngrok-free.app 같은 주소가 뜹니다.
    👉 이 주소를 친구에게 카톡으로 보내면 바로 접속됩니다.


방법 2. 설치 없이 명령어 한 줄로 끝: localtunnel (로컬터널)

만약 Node.js가 이미 깔려 있다면(보통 localhost:3000을 띄우셨다면 깔려 있을 겁니다), 아무런 가입도 설치도 필요 없는 이 방법이 제일 빠릅니다.

  1. 개발 중인 터미널(VS Code 터미널 등)을 엽니다.

  2. 아래 명령어를 복사해서 붙여넣으세요.

    Bash

    npx localtunnel --port 3000
    

  3. 끝: 잠시 후 your url is: https://xxxx.loca.lt 라는 주소가 나옵니다.

  4. 주의: 처음 접속할 때 보안을 위해 비밀번호를 물어볼 수 있습니다. 그럴 땐 터미널에 나온 IP 주소 같은 숫자를 입력해주면 열립니다.


방법 3. VS Code를 쓰고 있다면? (설치 X, 가입 X)

혹시 코딩 툴로 **VS Code(비주얼 스튜디오 코드)**를 쓰고 계신가요? 그럼 프로그램이 이미 기능을 가지고 있습니다.

  1. VS Code 하단 패널(터미널 있는 곳)에서 ‘포트(Ports)’ 탭을 클릭합니다.

  2. 3000 포트가 보일 겁니다. 마우스 오른쪽 클릭 -> ‘포트 표시 여부(Port Visibility)’ -> ‘공용(Public)’ 선택.

  3. 지구본 모양 아이콘을 누르면 외부 접속 주소가 복사됩니다.


💡 추천: 무엇을 쓸까요?

  • 가장 추천: ngrok (방법 1) -> 조금 귀찮아도 제일 확실하고 끊김이 없습니다.

  • 급할 때: localtunnel (방법 2) -> 5초 만에 열 수 있습니다.

지금 바로 방법 2번(npx localtunnel --port 3000)부터 터미널에 쳐보세요!

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다