어디서나 localhost에 접근하기

당신은 컴퓨터로 수 시간을 보내 새로운 웹사이트 디자인을 완벽하게 만드는 데 집중했습니다. CMS가 샘플 콘텐츠로 잘 설정되어 있으며 몇 가지 모바일 기기와 태블릿에서 테스트하고 싶습니다. 고객도 확인하고 싶지만 공개 서버로 전체를 마이그레이션하여 빠른 확인을 제공할 시간이 없습니다.

웹 개발자라면 이런 상황을 여러 번 겪어보았을 가능성이 큽니다. 그리고 아마도 공개 서버로 마이그레이션하는 데 잠시 밤을 새우며 더 쉬운 방법이 있기를 바라야 했을 것입니다.

지친 눈을 가진 모든 웹 개발자 여러분에게, 더 쉬운 방법이 왔다는 것을 알려드리겠습니다! 실제로, 로컬호스트에서 웹에 접근할 수 있도록 이 과정을 더 쉽게 만들어주는 수많은 애플리케이션과 서비스가 있습니다. 이 기사에서 논의할 것들은:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

주요 포인트

어떻게 어디서든지 localhost에 접근할 수 있을까요?

이것은 안전한 터널 서비스를 통해 가능합니다! 이러한 서비스들은 인터넷에서 여러분의 기기까지 터널을 제공합니다.

이는 공개적으로 접근 가능한 URL을 제공하고, 해당 URL로의 호출을 감시한 후, 이를 로컬호스트 서버로 전달하는 것을 의미합니다. 모든 혼란스러운 설정은 이미 완료되었으며, 필요한 것은 애플리케이션을 설치하고 이를 로컬호스트로 가리키는 것뿐입니다.

A Note About Using Virtual Hosts

제 로컬호스트에서는 가상 호스트가 설정되어 있습니다. 아래에 나열된 서비스의 주소가 ServerAlias로 등록되지 않으면, 서버가 잘 작동되지 않습니다. 몇 시간의 혼란이 뒤따르게 되었습니다. 마찬가지로 고민하고 계신다면, 아래의 ngrok 주소를 사용 중인 서비스의 주소로 교체하여 httpd.conf에 ServerAlias를 추가해주세요:

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrok는 Windows, macOS 및 Linux용 응용 프로그램으로, 터널을 생성할 뿐만 아니라 터널을 통해 전송되는 모든 트래픽을 검사하고 테스팅을 위해 해당 트래픽을 재생할 수 있습니다.

기본 기능은 무료로 사용할 수 있으며 고급 기능에 액세스하기 위해 가입할 수 있습니다. 사용자 정의 하위 도메인과 예약된 도메인을 사용하려면 유료 플랜에 가입해야 합니다. 그렇지 않으면 서비스를 사용할 수 있지만 위의 가상 호스트 샘플에서 350c0f8e.ngrok.com URL과 같은 임의의 도메인이 할당됩니다.

2021년 5월 현재 ngrok의 플랜은 다음과 같습니다:

ngrok의 주요 이점 중 하나는 종속성이 없다는 것입니다. ngrok을 설치하고 실행하면 됩니다. 다른 것은 필요하지 않습니다.

ngrok 사용 방법

ngrok.com으로 이동하여 아카이브를 다운로드하고 원하는 위치에 ngrok이 있는 곳으로 추출하십시오. 아래는 기본 단계이지만 자세한 내용이 필요하면 “로컬 개발 사이트 공유를 위해 ngrok 사용 방법”에 대한 다른 기사가 있습니다.

명령 줄 터미널을 열고 ngrok을 추출한 폴더로 이동합니다. 다음 명령을 실행하여 포트 80에서 로컬호스트로 터널을 생성하십시오:

./ngrok http 80

다음과 같은 화면이 표시됩니다:

위의 예에서 우리는 http://42e474ef9799.ngrok.com의 임의의 ngrok 주소로 들어오는 트래픽을 127.0.0.1:80의 로컬호스트로 전달하고 있습니다.

인터넷 연결이 되어 있는 어떤 기기에서든 해당 URL을 열면 웹에서 로컬호스트에 접근할 수 있습니다!

ngrok이 제공하는 더 독특한 기능 중 하나는 과거 트래픽을 검사할 수 있는 능력입니다. 이를 위해 컴퓨터에서 http://localhost:4040/로 이동하세요. 들어오는 요청을 보여주는 대시보드에 접속할 것입니다. 왼쪽에서 각 요청을 클릭하면 오른쪽에 헤더 및 기타 데이터에 대한 세부 정보를 볼 수 있습니다. 저는 이를 사용하여 요청에서 반환된 JSON 데이터를 보는 것이 가장 좋습니다. 간단한 HTML 페이지를 로드할 때의 매우 기본적인 레이아웃은 다음과 같습니다:

오른쪽의 Replay 버튼을 클릭하여 요청을 다시 재생할 수도 있습니다. 그러면 터널을 통해 요청을 다시 실행합니다.

ngrok의 고급 기능

비밀번호 보호를 통해 무작위 대중이 사이트에 접근하지 못하도록 할 수 있습니다:

ngrok http -auth="username:password" 80

사용자 지정 서브도메인은 무작위로 생성된 URL을 기억할 필요가 없을 때 사용합니다! 유료 ngrok 플랜에 가입하면 서브도메인을 예약하여 다른 사람이 사용하지 못하게 할 수 있습니다. 다음은 nogophersinmytunnel.ngrok.com에서 로컬호스트를 볼 수 있게 해줍니다:

ngrok http -subdomain nogophersinmytunnel 80

사용자 지정 도메인은 터널링된 프로젝트의 URL에 “ngrok”이 포함되지 않기를 원할 때 사용합니다. 유료 플랜을 통해 자신의 도메인을 사용할 수 있으므로 ngrok.com을 사용할 필요가 없습니다:

ngrok http -hostname="tunnel.yourdomain.com" 80

심지어 로컬 네트워크의 IP 주소에 터널링할 수도 있습니다. 그렇지 않으면 외부에서 액세스할 수 없습니다:

ngrok http 192.168.0.27:80

또는 다른 비HTTP 서비스에 대한 터널을 만들 수 있습니다:

ngrok tcp 22

다양한 기능들이 있습니다. 한 번에 여러 개의 터널을 실행하거나 설정을 저장할 수 있는 설정 파일을 만들어 나중에 사용할 수 있습니다.

가능한 모든 기능에 대해 자세히 알아보려면 ngrok의 문서를 참조하세요.

PageKite

PageKite는 파이썬 기반의 “동적 터널 기반 리버스 프록시”로, Windows, macOS, Linux 그리고 안드로이드 기기에서 작동합니다! ngrok과 매우 유사하지만 훨씬 오래된 제품이며, 다양한 용도에 대해 훨씬 더 많이 시험된 것으로 보입니다. 사용자가 로컬 머신에서 Minecraft 서버를 실행할 수 있도록 Minecraft 프로토콜과도 호환됩니다.

1개월 동안 무료 평가판을 이용할 수 있으며, 2.5GB의 전송 할당량이 제공됩니다. 그 이후에는 “원하는대로 지불” 시스템이 적용되며(최소 4달러 이상, 무료 오픈 소스 소프트웨어 작업 시 무료) 더 많이 지불할수록 더 많은 할당량, 더 긴 서비스 기간, 사용자 정의 서브도메인 등을 받게 됩니다.

PageKite는 ngrok과 달리 트래픽 검사기가 없지만, 내장된 방화벽과 같은 놀라운 기능을 갖추고 있어 /wp-admin, /xampp, phpMyAdmin 페이지 등과 같은 일반적인 공격 대상에 대한 액세스를 차단합니다. 이를 공개적으로 사용하고 싶다면 비활성화할 수 있습니다.

호주 시드니에 프론트엔드 릴레이 서버를 운영하고 있어 호주 개발자들에게 더 빠른 속도를 제공할 수 있습니다.

PageKite 사용 방법

PageKite.net에 방문하여 사용하는 OS에 맞는 버전을 다운로드하세요. Windows 사용자는 먼저 Python이 설치되어 있는지 확인해야 합니다. macOS와 Linux의 경우, 간단한 cURL 명령어를 사용하여 터미널에서 바로 설치할 수 있습니다.

다운로드한 후, 로컬 서버에 터널을 열기 위해 이 명령어를 실행하세요. 매번 사용하는 특정 서브도메인을 선택하는데, ngrok의 임의 할당 대신 여기서는 hurrygetintothefancytunnel을 선택했습니다:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

최근 맥에서 저는 python3로 시작해야 했으니, 위의 방법이 작동하지 않으면 이 방법을 시도해보세요:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

이 과정을 통해 이미 가입하지 않았다면 서비스에 가입하게 됩니다. 그러면 전 세계에서 로컬호스트를 사용할 수 있게 됩니다!

PageKite의 고급 기능

PageKite에는 더 인상적인 추가 기능들이 있습니다.

예를 들어, 웹 서버가 필요하지 않습니다. 서버가 실행되지 않은 경우, 내장된 웹 서버가 이러한 정적 파일을 실행할 수 있습니다:

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

ngrok과 마찬가지로 암호로 접근을 제한할 수 있습니다:

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

또는 IP 주소로 접근을 제한할 수 있습니다:

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

위에서 언급한 바와 같이, 이 모든 것을 휴대폰에서도 실행할 수 있습니다. 저는 Android 웹 서버인 kWS를 설치한 후 PageKite를 실행하여 웹에 노출시켰습니다:

매일 이런 일을 하진 않겠지만, 이런 것들이 이제 스마트폰 하나로 가능해졌다는 것을 보니 정말 멋진 일입니다!

마치 ngrok처럼, PageKite는 한 번에 여러 개의 터널을 만들 수 있으며, 자신만의 도메인을 가질 수 있고, 터널에 대한 설정 파일을 만들 수 있습니다. 자세한 내용은 그들의 빠른 시작 가이드와 보다 종합적인 방법 페이지를 확인하세요.

localtunnel

localtunnel은 초기에 Node로 구축되었지만 Go 기반 및 C#/.NET 클라이언트를 가진 터널링 서비스입니다.

localtunnel 사용 방법

대부분의 npm 패키지처럼 기기에 전역적으로 설치할 수 있습니다:

npm install -g localtunnel

로컬호스트의 포트 80에 터널을 시작하려면 다음 명령을 실행하세요:

lt --port 80

ngrok과 PageKite처럼 실행됩니다! 다음과 같은 서브도메인을 제공합니다: https://loud-ladybug-21.loca.lt.

localtunnel을 처음 실행할 때, 이 작업이 웹에 공개되는 자산을 만든다는 친절한 알림을 받게 됩니다. 그냥 계속하려면 클릭하세요를 누르세요.

localtunnel의 고급 기능

무료로 사용자 지정 서브도메인을 얻을 수 있습니다. 서브도메인이 사용되지 않았다면 말이죠. 사용자 지정 서브도메인을 사용하려면 --subdomain 매개변수로 실행하면 됩니다:

lt --port 80 --subdomain platypusestunneltoo

localtunnel이 제공하는 매우 유용한 기능 중 하나는 JavaScript를 사용하여 localtunnels을 생성하는 Node API로, 자동화된 테스트에서 사용할 수 있습니다:

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // Your tunnel URL will appear as tunnel.url

  tunnel.on('close', () => {
    // Do something once the tunnel is closed
  });
})();

boringproxy

boringproxy는 MIT 라이선스 하에 완전히 무료이며 오픈 소스인 최신 옵션입니다! 이 프로그램의 주요 목적은 사람들이 자신의 컴퓨터에서 웹 사이트를 직접 호스팅하는 것을 더 쉽게 만드는 것으로 보입니다. 서버와 클라이언트를 하나로 결합한 단일 실행 파일 형태로 제공됩니다. 다양한 Linux 시스템과 Windows용 실행 파일이 있으며, macOS는 “테스트되지 않음”으로 표시되어 있습니다. 저는 개인적으로 Mac에서 이것을 작동시키지 못했지만, Linux 박스나 Raspberry Pi에 접근할 수 있다면 이것이 당신에게 맞는 해결책일 수 있습니다. 모두 Go로 작성되어 있으며 기여자들을 환영합니다.

간단한 특징:

• MIT 라이선스 하에 100% 무료이고 오픈 소스
• 완전히 자체 호스팅 가능
• 내장된 리버스 프록시
• 사용자 정의 도메인/하위 도메인 지원

boringproxy 사용 방법

주요 단계는 boringproxy 문서에서 가장 쉽게 따를 수 있으며, 플랫폼에 따라 다릅니다.

전반적으로 다음을 포함합니다:

• 서버 인스턴스를 curl을 통해 다운로드하는 것 (예: curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmod 명령어로 다운로드한 실행 파일에 실행 권한을 부여합니다 (예: chmod +x boringproxy-linux-x86_64)
• 포트 80과 443에 바인딩을 설정합니다 (예: sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• 클라이언트에서도 실행 파일을 설정합니다

boringproxy 제작자가 제공하는 이 동영상에서 가장 좋은 방법을 설명합니다

boringproxy의 고급 기능

자동 HTTPS 인증서는 Let’s Encrypt를 통해 자동으로 관리됩니다. 테스트를 위해 인증서를 얻는 것에 대해 스트레스 받을 필요가 없습니다. 이는 배경에서 자동으로 발생합니다.

구성을 위한 웹 인터페이스는 사용자, 액세스 토큰 및 터널을 관리할 수 있도록 자동으로 설정됩니다.

쉽게 웹 애플리케이션을 터널링할 수 있습니다. 위의 동영상에서 보여준 Etherpad와 같은 웹 앱을 자체 호스팅하고, 자체 서브도메인을 부여한 다음 어디서든지 접근할 수 있습니다.

BrowserStack

BrowserStack는 웹 사이트를 다양한 기기와 브라우저에 대해 테스트하기 위한 자동화된 스크린샷과 가상 머신을 제공합니다. localhost에 접근하려는 이유가 테스트 목적이라면, BrowserStack가 관심을 가질 만한 서비스일 수 있습니다.

BrowserStack의 가상 머신에서 localhost 사이트를 테스트하는 데 위의 방법을 사용할 수 있지만, Chrome과 Firefox용 브라우저 확장 프로그램도 제공하여 로컬 호스트에 대한 접근을 그들의 서버로 제공합니다.

그러나 이 기능은 브라우저스택 서비스에만 적용되며 일반 대중에게는 접근이 불가능합니다. 브라우저스택은 무료 평가판을 제공하며, 이후에는 서비스 이용을 위해 매월 요금을 지불해야 합니다. 기기 테스트를 위한 유일한 목적으로 로컬호스트에 접근하려는 경우에 유용할 것입니다.

브라우저스택 사용 방법

무료 평가판을 신청하려면 BrowserStack.com에서 가입하세요. 그들은 실제로 로컬 테스트 과정을 꽤 잘 문서화해 놓았으니, 이 방법을 선택하고 싶으시다면 그 내용을 읽어보세요.

결국, 웹을 통해 실행되는 가상 머신에서 로컬호스트 사이트를 테스트할 수 있게 해줍니다.

개인 추천

이 모든 옵션을 사용해본 후, 저의 개인적인 선호는 ngrok과 PageKite입니다.

PageKite은 다양한 용도로 활용할 수 있는 가능성이 매우 큰 솔루션으로 보입니다. 수년에 걸쳐 다양한 용도에 맞춰 개발 및 확장되어 정말 인상적인 애플리케이션입니다!

ngrok도 간단함과 트래픽 검사기 덕분에 매우 훌륭합니다. 웹에서 자신의 로컬호스트에 접근하려는 대부분의 웹 개발자들에게는 충분한 기능을 제공합니다.

결론

인터넷에 연결된 컴퓨터로 작업 중이시라면, 이제 단 몇 분 만에 전 세계 어디서든지 자신의 로컬호스트에 접근할 수 있게 설정할 수 있습니다! 시작하기가 매우 간단하며, 여러분이 본 바와 같이, 해결책이 부족하지 않습니다!

당신은 이러한 서비스를 사용해보셨나요? 다른 선호하는 서비스가 있으신가요? 당신의 생각을 알고 싶습니다 트위터에서!

 

전 세계 어디서나 localhost에 접근하기 위한 FAQ