localhost에서 Webhook를 테스트하는 방법

웹후크 호출을 애플리케이션으로 보낼 수 있는 Stripe , Paypal , Hubspot 등과 같은 타사 앱으로 작업해야 하는 경우가 있습니다. 이러한 웹후크 호출을 수신하려면 애플리케이션 URL을 제공하고 웹후크 섹션에서 설정해야 합니다.

localhost에서 애플리케이션을 개발하는 경우 URL은 다음과 같을 수 있습니다.

http://127.0.0.1:80

http://sample-app.test

이러한 URL은 localhost에서만 작동하고 외부 세계에 노출될 수 없기 때문에 이러한 URL을 웹후크 설정에 사용할 수 없습니다.

로컬 호스트에서 웹후크 호출을 수신하려면 애플리케이션을 외부에 노출하고 유사하게 외부로부터의 요청도 수신하기 위해 터널을 생성해야 합니다.

이를 달성하기 위해 ngrok 또는 expose과 같이 도움이 되는 여러 도구가 있습니다.

이 자습서에서는 ngrok을 사용하여 터널을 설정하고 http://sample-app.test를 예제 localhost 응용 프로그램으로 사용합니다.

다음 단계는 다음과 같습니다.

ngrok 에이전트 설치

맥OS의 경우:

brew install ngrok/ngrok/ngrok

리눅스의 경우:

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의 경우 Chocolatey를 사용합니다.

choco install ngrok

ngrok 에이전트를 직접 설치하려면 ngrok Download page을 방문하여 지침과 링크를 확인하십시오.

설치 후 다음 명령을 통해 설치를 확인할 수 있습니다.

ngrok

다음을 확인해야 합니다.

NAME:
   ngrok - tunnel local ports to public URLs and inspect traffic

DESCRIPTION:
    ngrok exposes local networked services behinds NATs and firewalls to the
    public internet over a secure tunnel. Share local websites, build/test
    webhook consumers and self-host personal services.
    Detailed help for each command is available with 'ngrok help <command>'.
    Open http://localhost:4040 for ngrok's web interface to inspect traffic.

EXAMPLES:
    ngrok http 80                    # secure public URL for port 80 web server
    ngrok http -subdomain=baz 8080   # port 8080 available at baz.ngrok.io
    ngrok http foo.dev:80            # tunnel to host:port instead of localhost
    ngrok http https://localhost     # expose a local https server
    ngrok tcp 22                     # tunnel arbitrary TCP traffic to port 22
    ngrok tls -hostname=foo.com 443  # TLS traffic for foo.com to port 443
    ngrok start foo bar baz          # start tunnels from the configuration file

VERSION:
   2.3.40

AUTHOR:
  inconshreveable - <[email protected]>

COMMANDS:
   authtoken    save authtoken to configuration file
   credits  prints author and licensing information
   http     start an HTTP tunnel
   start    start tunnels by name from the configuration file
   tcp      start a TCP tunnel
   tls      start a TLS tunnel
   update   update ngrok to the latest version
   version  print the version string
   help     Shows a list of commands or help for one command

ngrok 시작

이제 sample-app.test를 통해 로컬 호스트ngrok에 대한 터널을 만들 수 있습니다. 다음 명령을 사용하십시오.

ngrok http 127.0.0.1:80 -host-header=sample-app.test

다음이 표시되어야 합니다.

ngrok                                                                                                                                                                                                

Session Status                online
Account                       inconshreveable (Plan: Free)
Version                       3.0.0
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://3795-124-182-24-15.ngrok.io -> http://127.0.0.1:80
Forwarding                    https://3795-124-182-24-15.ngrok.io -> http://127.0.0.1:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

이제 http ( http://3795-124-182-24-15.ngrok.io ) 또는 https ( https://3795-124-182-24-15.ngrok.io ) 버전의 ngrok URL을 사용할 수 있어야 합니다. 이 URL은 현재 localhost sample-app.test 를 가리키고 있습니다. 이를 통해 localhost 애플리케이션을 외부 세계와 공유하거나 호출을 수신하도록 웹후크를 구성할 수 있습니다.

다음 URLhttp://127.0.0.1:4040을 사용하여 애플리케이션에 대한 수신 호출을 확인하십시오. 또한 요청 호출을 재생하고 해당 정보도 볼 수 있습니다.

즐거운 코딩하세요!