DAY 2 · 12교시 · 60분

zrok 로컬 터널링 및 쇼츠 시연회

➔
➔

📚1단계: 주요 개념 설명

이번 단원의 목표

zrok 네트워크 터널을 열어 배포된 Vercel 사이트와 로컬 AI 서버를 통합 연동하여 최종 시연한다.

🗂️강의 슬라이드
슬라이드 1 / 10

zrok 로컬 포트 터널링 기술 개요

▲ Vercel공인 HTTPS🐍 로컬 백엔드localhost:8000zrok 🚇방화벽 안 로컬 포트를 외부에서 접근 가능하게
  • 웹서버 배포지(Vercel HTTPS)에서 내 컴퓨터의 로컬 백엔드(localhost:8000)를 직접 접근할 수는 없습니다.
  • 학교 보안 방화벽이나 집 내부 인터넷 가상 주소 장벽을 무너뜨리지 않고, zrok P2P 암호 터널을 연계하여 임시 외부 접근 가능 공인 도메인을 확보합니다.

🛠️2단계: 따라하기 실습

✓실습 미션 체크리스트
1개념 직관

외부 클라우드 Vercel(포트 HTTPS)에 배포되어 있는 프론트엔드가 내 노트북(localhost 8000포트)에 가동되고 있는 AI FastAPI 백엔드와 안전하게 교류할 수 있도록 zrok 터널을 개방해 통신을 완성합니다.

2실습 미션

우측 최종 통합 듀얼 엔진 실습 콘솔에서 기획 폼 데이터를 발송해 보며, 로컬 백엔드가 moviepy 렌더링을 끝마치고 최종 생성된 비디오 파일을 브라우저로 리턴받아 내려받는 통합 쇼츠 극장을 구동해 보세요.

zrok 로컬 포트 공유 명령어
# 내 컴퓨터의 FastAPI 중계 포트를 공인 인터넷 주소로 연계
zrok share public http://localhost:8000

# Vercel 환경변수 설정 화면에 공유된 zrok URL 등록
NEXT_PUBLIC_API_BASE_URL=https://xxxx.share.zrok.io

💡 코딩 중 막히나요? 모범 솔루션 코드

🧩3단계: 개념 검증 퀴즈

검증 챌린지 미션

웹 브라우저 대시보드 화면에 최종 비디오 파일 재생 목록이 열리고 재생 및 MP4 다운로드가 활성화되는지 종합 점검합니다.

📝 객관식 개념 확인 (2문항)

Q1. 배포된 Vercel 사이트가 내 노트북의 localhost:8000 백엔드에 접근하게 해주는 것은?

Q2. zrok로 받은 임시 주소는 어디에 등록해 프론트엔드-백엔드를 연결하나?

🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요
🎉 축하합니다! 12시간의 모든 온프레미스 AI 쇼츠 자동 생성기 개발 과정을 마쳤습니다!