외부 클라우드 Vercel(포트 HTTPS)에 배포되어 있는 프론트엔드가 내 노트북(localhost 8000포트)에 가동되고 있는 AI FastAPI 백엔드와 안전하게 교류할 수 있도록 zrok 터널을 개방해 통신을 완성합니다.
DAY 2 · 16교시 · 60분
로컬↔배포 연결: zrok 터널링 및 통합 시연
➔
➔
📚1단계: 주요 개념 설명
이번 단원의 목표
zrok 네트워크 터널을 열어 배포된 Vercel 사이트와 로컬 AI 서버를 통합 연동하여 최종 시연한다.
🗂️강의 슬라이드
슬라이드 1 / 10
zrok 로컬 포트 터널링 기술 개요
- 웹서버 배포지(Vercel HTTPS)에서 내 컴퓨터의 로컬 백엔드(localhost:8000)를 직접 접근할 수는 없습니다.
- 학교 보안 방화벽이나 집 내부 인터넷 가상 주소 장벽을 무너뜨리지 않고, zrok P2P 암호 터널을 연계하여 임시 외부 접근 가능 공인 도메인을 확보합니다.
🛠️2단계: 따라하기 실습
🛠 따라 만들기 · AI 바이브 코딩
zrok로 배포 화면과 로컬 서버 연결 (통합 시연)14교시에서 로컬(localhost:8000)로 돌린 AI_BASE_URL을, 이번엔 배포된 Vercel 사이트에서도 쓰도록 zrok 공개 주소로 바꿉니다. 즉 '배포된 클라우드 사이트가 내 노트북의 로컬 모델로' 실행되는 마지막 단계입니다.
🎯 완성 결과: 인터넷 화면 → zrok → 내 로컬 AI 파이프라인 → 최종 영상까지 한 번에 도는 통합 시스템 (AI_BASE_URL만 zrok 주소로 교체)
1zrok로 로컬 포트 열기
내 8000포트를 외부 공개 주소로 연결합니다.
💡 핵심 코드 설명
- zrok가 방화벽 안 localhost:8000을 외부에서 접근 가능한 공개 https 주소로 연결해 줍니다.
- 출력된 https 주소를 복사해 둡니다. 프로세스가 꺼지면 주소도 사라집니다.
2Vercel 환경변수(AI_BASE_URL) 연결하기
배포 화면이 내 로컬 서버(zrok 주소)를 바라보게 합니다.
🤖 AI에게 이렇게 시켜보세요
Vercel 프로젝트 설정에서 AI_BASE_URL 환경변수를 zrok가 준 https 주소로 설정하고 재배포하는 방법을 알려줘.
💡 핵심 코드 설명
- 14교시에서 localhost:8000이던 그 AI_BASE_URL을, 배포 환경에선 zrok 공개 주소로만 바꾸면 됩니다 — 같은 스왑입니다.
- 이제 배포된 사이트에서 주제를 넣으면 내 로컬 모델이 대본·음성·이미지를 만들어 돌려줍니다. zrok 주소가 바뀌면 환경변수도 다시 갱신하세요.
3통합 시연하기
전체 파이프라인이 한 번에 도는지 확인합니다.
💡 핵심 코드 설명
- 배포 화면에서 주제를 입력하면 → 내 로컬 백엔드가 대본→음성→이미지→영상까지 만들어 되돌려줍니다.
- 4대 생성기술과 통합 조각이 하나로 연결되는 순간입니다. 짝과 서로의 주소로 교차 테스트해 보세요.
✓실습 미션 체크리스트
우측 최종 통합 듀얼 엔진 실습 콘솔에서 기획 폼 데이터를 발송해 보며, 로컬 백엔드가 moviepy 렌더링을 끝마치고 최종 생성된 비디오 파일을 브라우저로 리턴받아 내려받는 통합 쇼츠 극장을 구동해 보세요.
zrok 로컬 포트 공유 명령어
# 내 컴퓨터의 FastAPI 중계 포트를 공인 인터넷 주소로 연계 zrok share public http://localhost:8000 # Vercel 환경변수 설정 화면에 공유된 zrok URL 등록 AI_BASE_URL=https://xxxx.share.zrok.io
💡 코딩 중 막히나요? 모범 솔루션 코드
🧩3단계: 개념 검증 퀴즈
검증 챌린지 미션
웹 브라우저 대시보드 화면에 최종 비디오 파일 재생 목록이 열리고 재생 및 MP4 다운로드가 활성화되는지 종합 점검합니다.
📝 객관식 개념 확인 (2문항)
Q1. 배포된 Vercel 사이트가 내 노트북의 localhost:8000 백엔드에 접근하게 해주는 것은?
Q2. zrok로 받은 임시 주소는 어디에 등록해 프론트엔드-백엔드를 연결하나?
🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요