vgrok - 터널링의 핵심은 역방향 영속 연결

localhost는 inbound 연결을 못 받는다(NAT/방화벽 뒤). 터널링의 원리는 공개 머신에서 로컬로 향하는 영속 연결을 미리 깔아두고, 외부 요청을 그 연결 위로 거꾸로 흘려보내는 것.

vgrok에서 그 영속 연결은 WebSocket이다. local → sandbox 방향으로 한 번 열어두면, sandbox로 들어온 HTTP 요청을 같은 소켓에 실어 local로 되돌릴 수 있다.

외부 요청 ──HTTP──▶ [공개 머신] server.js ──┐
                                          │ WebSocket (local이 미리 연결해둠)
                          localhost ◀──HTTP── [local] client.js ◀──┘

요청/응답 매칭

WebSocket은 하나인데 동시 요청은 여럿. 그래서 요청마다 UUID를 붙이고, 공개 머신 쪽에서 Map<id, res>로 응답 객체를 들고 있다가 돌아온 메시지의 id로 짝을 찾는다.

// [server] 외부 요청 수신 → 보류 + 전달
const id = randomUUID()
responses.set(id, res)
client.send(JSON.stringify({ id, method, url, headers, body }))

// [server] WS로 응답 돌아오면 id로 원래 res 복원
const { id, statusCode, headers, body } = JSON.parse(msg)
responses
  .get(id)
  .writeHead(statusCode, headers)
  .end(Buffer.from(body, 'base64url'))

body는 base64url — 이미지·파일 같은 바이너리를 JSON에 안전하게 싣기 위함.

Sandbox는 “터널 머신”의 일회용 대체재

여기서 신선한 점: 보통 터널링은 ngrok처럼 전용 공개 서버가 필요한데, vgrok은 Vercel Sandbox를 그 자리에 끼워넣는다. Sandbox가 마침 두 가지를 다 주기 때문:

  • sandbox.domain(port) → 즉시 공개 HTTPS URL (도메인/인증서 설정 0)
  • 임의 코드 실행 → WebSocket 프록시(server.js)를 그 위에 배포
const sandbox = await Sandbox.create({ runtime: 'node22', ports: [3000] })
const url = sandbox.domain(3000) // 외부 진입점
await sandbox.writeFiles([{ path: 'server.js', content }])
await sandbox.runCommand({ cmd: 'node', args: ['server.js'], detached: true })

즉 “공개 URL + 코드 실행”이 되는 임시 컴퓨팅이라면 무엇이든 터널 머신이 될 수 있고, Sandbox는 그걸 가장 싸게 얻는 한 수단일 뿐.

한계

  • Hobby 45분 타임아웃, HTTP만(TCP 터널 X), 단일 클라이언트
  • 핵심 코드 ~220줄 — 네트워킹/보안/HTTPS/DNS를 Sandbox가 다 추상화해서 가능

#552