Azure Web PubSub 로컬 터널 도구

아티클
03/05/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 CLIaz login를 사용하여 ID에 로그인합니다.
또는 정의된 환경 변수를 통해 계정 정보를 설정하거나 지원되는 Azure 서비스에 대해 관리 ID 인증 을 직접 사용할 수 있습니다.

실행

Web PubSub 서비스 포털에서 설정 탭으로 tunnel:/// 이동하여 터널 연결을 허용하도록 시작할 이벤트 처리기 URL 템플릿을 지정합니다.
이전에 설정한 허브를 사용하여 도구를 실행합니다. 예를 들어 허브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를 검사 아래에 표시된 샘플 코드와 유사한 코드로 기본 제공 업스트림 서버를 시작합니다.
또는 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
```
이제 클라이언트 탭으로 전환하고 Azure Web PubSub 서비스에 대한 테스트 WebSocket 연결을 시작하도록 선택합니다Connect. 트래픽이 Web PubSub를 통해 로컬 터널로 이동하고 마지막으로 업스트림 서버에 도달하는 것을 볼 수 있습니다. 터널 탭은 요청 및 응답의 세부 정보를 제공하여 업스트림 서버를 요청하는 내용과 업스트림 서버에서 다시 실행되는 항목을 생생하게 볼 수 있습니다.

기본적인 이해

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

Share via