기타 도구

ngrok 사용하기

ngrok은 로컬 프로젝트를 테스트하거나 클라이언트 또는 팀원과 리뷰를 위해 작업을 공유할 때 사용할 수 있는 퍼블릭 URL과 함께 로컬 머신에 보안 터널을 생성해 주는 사용하기 쉬운 도구입니다. HTTP나 HTTPS를 설정할 수 있으며, 이 도구는 인기가 많아서 문제가 발생하더라도 해결 방법을 설명하는 수많은 게시글을 찾을 수 있습니다. 이 문서에서는 ngrok을 설치하는 몇 가지 간단한 방법과 웹 애플리케이션이 ngrok과 통신할 수 없는 경우의 해결 방법을 다룹니다.

ngrok

ngrok 팀에서 ngrok을 통한 Frame.io 웹훅 지원에 관한 훌륭한 문서를 작성했습니다. 여기에서 확인해 보세요.

ngrok 설치

몇 가지 다른 방법으로 ngrok을 사용할 수 있습니다.

ngrok 설치 관리자를 통한 설치

  1. ngrok 웹 사이트로 이동하여 다음 지침을 따릅니다. https://ngrok.com/download
  2. 계정을 연결하여 제공되는 기능을 원한다면 다음 지침에 따라 계정과 토큰을 받아야 합니다.

계정을 만들거나 토큰을 추가할 필요는 없지만, 다운로드 페이지를 확인하여 본인에게 필요한 기능이 있는지 확인해 보는 것이 좋습니다.

참고:

이 방법을 사용하는 경우 시스템 전역에서 사용할 수 있도록 설정하지 않는 한 ngrok은 저장된 위치에서 실행됩니다.

Homebrew로 설치

이 방법은 제가 가장 선호하는 ngrok 설치 방법입니다. Homebrew가 설치되어 있다면 homebrew cask install ngrok를 입력하기만 하면 됩니다. ngrok이 설치되면 어디서든 사용할 수 있습니다! 무엇보다도 각 명령의 시작 부분에 있는 터미널에 ./ngrok을 입력할 필요 없이 그냥 ngrok이라고만 입력하면 됩니다. 이 옵션에 대한 자세한 내용은 여기에서 읽을 수 있습니다.

ngrok 사용

ngrok을 설정한 후 3000과 같은 포트를 선택하고 ngrok http 3000 명령을 사용하여 터미널 명령줄에서 실행합니다. 반드시 3000 포트를 사용해야 하는 것은 아니지만, 설정 시 일반적으로 선택하는 포트입니다. 특정 폴더에서 실행되도록 ngrok을 설정한 경우, ngrok이 있는 폴더에서 ./ngrok http 3000 명령을 사용해야 합니다.

프로젝트용 서버를 시작하여 동일한 포트에서 수신 대기하게 하면 ngrok에서 제공하는 퍼블릭 주소를 사용하여 작업에 액세스할 수 있습니다.

웹 앱에서 ngrok 문제 해결 - 끝 슬래시

ngrok에서 겪을 수 있는 한 가지 문제는 웹 앱에서 사용할 ngrok URL을 설정할 때 서버에 연결할 수 없다는 것입니다. 이 문제의 답답한 점은 ngrok이 사용자가 전송한 어떤 것도 등록하지 않는다는 것입니다. localhost:4040을 열어 상황을 파악하려 해도 아무것도 표시되지 않습니다. (localhost:4040은 서버로 들어오는 모든 요청을 모니터링할 수 있도록 ngrok에서 제공합니다.) ngrok은 주소를 (/.)가 아닌 /(.)와 일치시키는 것으로 보이므로, 주소 끝에 슬래시를 포함하지 않았고 ngrok 모니터링 도구에 아무것도 표시되지 않는다면 ngrok이 나열된 주소와 일치하는 항목을 찾지 못하기 때문입니다.

다음은 끝 슬래시를 추가한 예시입니다. http://something.ngrok.io/ 슬래시가 포함된 엔드포인트를 확인하도록 샘플 애플리케이션을 작성할 수도 있습니다. 단, 샘플 앱이 /actions 엔드포인트를 사용하는 경우 Frame.io 앱이 서버에 도달하려면 ngrok 주소 끝에 /actions 엔드포인트를 추가해야 한다는 점을 기억하세요. 예를 들어 ngrok 주소가 http://something.ngrok.io인 경우 Custom Action 설정에 http://something.ngrok.io/actions로 제공해야 합니다. 이는 다른 웹 애플리케이션마다 다를 수 있으므로 바로 작동하지 않는다면 ngrok 주소의 끝부분을 여러 가지로 변경해 보세요.

ngrok 외에 다른 도구를 사용할 수 있나요? Glitch를 시도해 보세요!

Glitch는 ngrok의 훌륭한 대안이며 설정이 더 빠릅니다. Glitch를 사용하면 계정을 만든 다음 퍼블릭 액세스가 가능한 URL과 함께 해당 서버를 사용하여 자체 앱을 구축할 수 있습니다. 다른 사람과 협업하고, 코드를 공개 또는 비공개로 설정하고, 다양한 언어와 플랫폼 중에서 선택할 수 있습니다. 사용 가능한 옵션을 확인하려면 https://glitch.com/create를 방문하세요. Glitch에 프로젝트를 설정할 때 일부 웹 애플리케이션의 경우 끝 슬래시 문제가 적용됩니다. Frame.io의 경우 developer.frame.io에서 Custom Action을 설정할 때 Glitch에서 제공한 URL의 끝에 슬래시를 포함해야 합니다. /actions 엔드포인트에 대해서도 다른 것을 추가할 필요가 없습니다.

지금 바로 시도해 볼 수 있는 설정이 있나요?

예.ngrok을 사용하거나 자체 Glitch 프로젝트를 만들고 싶지 않다면 다음에서 테스트해 볼 수 있는 샘플 애플리케이션을 설정해 두었습니다: https://frameio-custom-action.glitch.me. developer.frame.io의 Custom Actions 영역에 이 주소를 추가할 때는 반드시 끝 슬래시를 포함하세요.

리소스

이 섹션에는 문서 전체에 언급된 리소스가 나열되어 있습니다.