Azure Web PubSub 로컬 터널 도구

아티클
12/04/2024

Web PubSub 로컬 터널은 고객이 로컬 개발 환경을 개선할 수 있는 로컬 개발 환경을 제공합니다. 타사 도구를 사용하여 더 이상 로컬 포트를 노출할 필요가 없으며, Web PubSub 로컬 터널을 Web PubSub 서비스와 로컬 서버 사이의 터널로 사용하여 로컬 개발 환경을 안전하게 유지합니다.

Web PubSub 로컬 터널은 다음을 제공합니다.

Web PubSub에서 로컬 서버로 트래픽을 터널링하는 방법
터널을 통해 클라이언트에서 Web PubSub로, 로컬 서버로의 엔드투엔드 데이터 흐름을 보는 방법
시작하기 위한 포함된 업스트림 서버를 제공합니다.
서버 개발을 시작하기 위한 간단한 클라이언트를 제공합니다.

혜택:

로컬 보호: 로컬 서버를 퍼블릭에 노출할 필요가 없음
연결 보호: Microsoft Entra ID 및 Web PubSub 액세스 정책을 사용하여 연결
간단한 구성: URL 템플릿을 tunnel:///<your_server_path>로 설정
데이터 검사: 데이터 및 워크플로의 명확한 보기

전제 조건

Node.js 버전 16 이상

설치

npm install -g @azure/web-pubsub-tunnel-tool

사용

Usage: awps-tunnel [options] [command]

A local tool to help tunnel Azure Web PubSub traffic to local web app and provide a vivid view to the end to end workflow.

Options:
  -v, --version   Show the version number.
  -h, --help      Show help details.

Commands:
  status          Show the current configuration status.
  bind [options]  Bind configurations to the tool so that you don't need to specify them every time running the tool.
  run [options]   Run the tool.
  help [command]  Display help details for subcommand.

You could also set WebPubSubConnectionString environment variable if you don't want to configure endpoint.

자격 증명 준비

연결 문자열과 Microsoft Entra ID가 모두 지원됩니다.

연결 문자열 사용

Web PubSub 서비스 포털에서 Web PubSub 서비스 포털의 연결 문자열을 복사합니다.
연결 문자열을 로컬 환경 변수로 설정하고 awps-tunnel을 시작합니다.

Linux 또는 macOS
Windows

export WebPubSubConnectionString="<your connection string>"

SET WebPubSubConnectionString=<your connection string>

Azure ID 사용

Web PubSub 서비스 포털에서 액세스 제어 탭으로 이동하여 ID에 Web PubSub Service Owner 역할을 추가합니다.
로컬 터미널에서 Azure CLI az login 를 사용하여 ID에 로그인합니다.
또는 정의된 환경 변수를 통해 계정 정보를 설정하거나 지원되는 Azure 서비스에 대해 직접 관리 ID 인증을 사용할 수 있습니다.

실행

Web PubSub 서비스 포털에서 설정 탭으로 이동하고, 이벤트 처리기 URL 템플릿을 지정하여 tunnel:///을 시작하고 터널 연결을 허용합니다.
이전에 설정한 허브를 사용하여 도구를 실행합니다. 예를 들어 허브 chat을 사용하여 엔드포인트 https://<awps-host-name>.webpubsub.azure.com에 연결합니다.
```
awps-tunnel run --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com
```
awps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com을 사용하여 구성을 저장한 다음, awps-tunnel run을 저장할 수도 있습니다.
Open webview at: http://127.0.0.1:4000과 같은 출력이 표시되면 브라우저에서 링크를 열고 터널 상태 및 워크플로를 볼 수 있습니다.
이제 서버 탭으로 전환하고 기본 제공 Echo Server를 선택하여 아래에 표시된 샘플 코드와 유사한 코드로 기본 제공 업스트림 서버를 시작합니다.
또는 http://localhost:3000.에서 고유한 업스트림 서버를 시작할 수 있습니다. awps-tunnel run 또는 awps-tunnel bind일 때 --upstream http://localhost:<custom-port> 옵션을 지정하여 사용자 지정 포트에서 사용자 고유의 업스트림 서버를 구성할 수도 있습니다. 예를 들어 아래 코드를 실행하여 이 샘플 업스트림 서버를 시작합니다. 시작되면 업스트림은 http://localhost:3000/eventhandler/.에 요청을 제공합니다.
```
git clone https://github.com/Azure/azure-webpubsub.git
cd tools/awps-tunnel/server/samples/upstream
npm install
npm start
```
이제 클라이언트 탭으로 전환하고 Connect를 선택하여 Azure Web PubSub 서비스에 대한 테스트 WebSocket 연결을 시작합니다. 트래픽이 Web PubSub를 통해 로컬 터널로 이동하고 마지막으로 업스트림 서버에 도달하는 것을 볼 수 있습니다. 터널 탭은 요청 및 응답의 세부 정보를 제공하며 어디에서 업스트림 서버를 요청하는지와 업스트림 서버가 어떻게 응답하는지를 명확하게 표시합니다.

기본적인 이해

터널 도구는 어떻게 작동하나요? 내부적으로 Web PubSub 서비스에 대한 터널 연결을 시작합니다. 터널 연결은 엔드포인트에 연결하는 /server/tunnel 영구 연결(WebSocket)이며 서버 연결의 한 종류로 간주됩니다. 서비스에서 ACL 규칙을 사용하여 이러한 연결이 연결하지 않도록 설정할 수도 있습니다.

다음을 통해 공유