이 영역을 누르면 첫 페이지로 이동
caputdraconis 블로그의 첫 페이지로 이동

caputdraconis

페이지 맨 위로 올라가기

caputdraconis

네트워크 관점에서의 클라우드 컴퓨팅을 공부하는 중입니다 :)

[ngrok] 배포없이 로컬 서비스 인터넷으로 공개하기

  • 2023.09.07 21:47
  • 알고 있으면 도움되지 않을까,,?
글 작성자: caputdraconis
반응형

ngrok 이란?

ngrok 은 로컬 환경에 있는 서비스나 애플리케이션을 인터넷에 공개할 수 있도록 도와주는 서비스입니다. 대부분 로컬 환경에 있는 서비스를 외부에서 접속하도록 하려면, 방화벽을 여는 등의 방법을 사용합니다. 쉽지 않죠..

이를 쉽게 하기 위해서 ngrok 은 NAT 나 방화벽을 우회하여 인터넷으로부터 로컬 서비스에 접속할 수 있도록 하는 터널링 서비스를 제공합니다.

토이 프로젝트를 진행할 때, '로컬에서 실행한 서비스를 팀원들도 접속할 수 있도록 하고 싶은디.. 서버에 올려야되나ㅠㅠ' 하는 고민을 했던 경험이 있습니다. 그때는 화면 공유를 해서 직접 보여주거나, 서버에 올리는 방법 밖에 생각을 못했었는데, 이 고민을 ngrok 이 해결해줄 수 있습니다.

무료 버전과 유료 버전이 있으며, 무료 버전에서는 여러 기능을 쓰지 못하지만 ngrok 의 메인 서비스인 터널링 서비스는 사용 가능합니다. 무료 버전으로도 충분할 듯 합니다. 유료 버전을 확인하고 싶다면 여기를 클릭하시면 됩니당.

무료 버전에서 제공하는 기능은 다음과 같습니다.

1. HTTP/TCP 접속을 위한 URL 생성
2. 1개의 ngrok 프로세스
3. 하나의 ngrok 프로세스 당 최대 4개의 터널
등등..

1개의 ngrok 프로세스, 그리고 프로세스 당 최대 4개의 터널로는 아래와 같은 시나리오가 가능합니다.
"
로컬 80 포트에서 웹 서버
로컬 8080 포트에서 API 서버 실행
로컬 22번 포트에서 SSH 서버 실행
로컬 3306 포트에서 MySQL 실행
"
4개의 서버에 대한 인터넷 접근을 제공받을 수 있습니다.

 

ngrok 설치

Mac

brew install ngrok/ngrok/ngrok

Linux

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
  sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && \
  echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | \
  sudo tee /etc/apt/sources.list.d/ngrok.list && \
  sudo apt update && sudo apt install ngrok

Windows

choco install ngrok

설치를 완료했다면, ngrok 계정과 연결 설정을 해주어야 합니다.

ngrok 회원가입을 하고 아래의 링크로 들어가면, 본인만의 토큰값과 함께 계정 연결을 할 수 있는 명령어가 아래와 같이 주어집니다.

계정 연결까지 완료하면 ngrok 을 사용할 모든 준비가 끝났습니다.

 

 

ngrok 사용해보기

웹 서버 띄우기

개발하고 있는, 혹은 개발이 완료된 웹 프로젝트가 있다면 그걸 사용해도 좋습니다. 저는 아주 간단한 서비스를 만들어보겠습니다.

Hello, World! 만 적힌 index.html 을 생성해줍니다. 이는 아래의 명령어로 생성 가능합니다.

echo "Hello, World!" >> index.html

이제 이를 로컬에 띄워보겠습니다. 파이썬을 사용하여 로컬에 서버를 올리겠습니다.

python3 -m http.server

이제 로컬호스트 8000 번 포트에 웹 서버가 실행되고 있습니다. 이를 확인해보겠습니다. 새로운 터미널을 열어 curl 명령어로 확인해보겠습니다.

제대로 실행되고 있는 것을 확인했으니 이 서비스에 ngrok 을 사용해볼까요?

 

ngrok 으로 터널 연결하기

ngrok http 8000

위 명령어로 ngrok 을 해당 서비스에 사용할 수 있습니다. 위 명령어의 결과는 아래 사진과 같습니다.

Forwarding 항목을 확인해보면 정적 도메인이 제 로컬 8000번 포트에서 돌아가고 있는 서비스로 포워딩이 됐다는 것을 확인할 수 있습니다. 주어진 주소로 접속을 해보면..?

워닝 페이지가 뜨고 해당 페이지의 Visit Site 를 클릭하면 아래와 같이 앞서 로컬에서 올린 서버로 접속이 된 것을 확인할 수 있습니다.

 

마무리

ngrok 은 제공하는 기능들이 아주 많습니다. 아래의 공식 문서에서 확인하실 수 있습니다.

https://ngrok.com/docs/

 

Overview | ngrok documentation

Learn to use ngrok with our guides, examples, integration guides, and API references

ngrok.com

해커톤, 토이 프로젝트 등 크기가 크지 않은 서비스를 개발할 때, 유용하게 사용할 수 있는 서비스인것 같습니다.

반응형

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • [Ubuntu] Windows 부팅 디스크 만들기(WoeUSB-ng)

    [Ubuntu] Windows 부팅 디스크 만들기(WoeUSB-ng)

    2023.09.18
  • [Setting] alias 를 파일로 관리하기

    [Setting] alias 를 파일로 관리하기

    2023.09.10
  • [Ubuntu] Notion 설치하기

    [Ubuntu] Notion 설치하기

    2023.09.07
  • [Error] The IP address configured for the host-only network is not within the allowed ranges. Please update the address used to be within the allowed ranges and run the command again.

    [Error] The IP address configured for the host-only network is not within the allowed ranges. Please update the address used to be within the allowed ranges and run the command again.

    2023.08.30
다른 글 더 둘러보기

정보

caputdraconis 블로그의 첫 페이지로 이동

caputdraconis

  • caputdraconis의 첫 페이지로 이동

검색

메뉴

    카테고리

    • 분류 전체보기 (168)
      • Cloud (3)
      • Computer Network (12)
      • Database (2)
      • Terraform (2)
      • 🥚고리즘 (13)
      • 겅부겅부🙃 (10)
        • Naver CS50 코칭스터디 (2)
        • Machine Learning (1)
        • Computing System (6)
      • 언어&프레임워크 (20)
        • Python (4)
        • Django (10)
        • Node JS (1)
        • C++ (2)
        • Java (1)
        • Flutter (2)
      • Security (76)
        • WebHacking Study (11)
        • 지옥방 스터디 (22)
        • 여름방학 스터디 (2)
        • PWN Study (6)
        • SUA Reversing Study (3)
        • PWN (3)
        • WebHacking (20)
        • Reversing (4)
      • 알고 있으면 도움되지 않을까,,? (23)
      • 일상다반사 (1)
      • 근황 정리 (1)
      • 42 Seoul (1)
        • Setting (1)

    최근 글

    인기 글

    댓글

    공지사항

    아카이브

    태그

    • 리스트함수
    • 파이썬함수
    • Python
    • 드림핵
    • old-16
    • 웹해킹.kr
    • 파이썬기초
    • 파이썬

    나의 외부 링크

    • Github
    • solved.ac
    • caputdraconis@kakao.com

    정보

    caputdraconis의 caputdraconis

    caputdraconis

    caputdraconis

    블로그 구독하기

    • 구독하기
    • RSS 피드

    방문자

    • 전체 방문자
    • 오늘
    • 어제

    티스토리

    • 티스토리 홈
    • 이 블로그 관리하기
    • 글쓰기
    Powered by Tistory / Kakao. Copyright © caputdraconis.

    티스토리툴바