브라우저 화면(포트 3000)에서 전송한 기획 요소를 받아, 내 컴퓨터 로컬에 띄워둔 Ollama(11434), FLUX, Qwen TTS로 전달 및 지휘하는 파이썬 중계 서버를 작성합니다.
DAY 2 · 10교시 · 60분
Python FastAPI 백엔드 중계 서버 구축
➔
➔
📚1단계: 주요 개념 설명
이번 단원의 목표
Python FastAPI를 사용해 프론트엔드와 로컬 AI 모델들을 통신 중계하는 백엔드 서버를 연동 코딩한다.
🗂️강의 슬라이드
슬라이드 1 / 10
파이썬 FastAPI 중계 라우터 개요
- 웹 브라우저 대시보드 화면(3000포트)과 로컬에 흩어진 AI 모듈들(Ollama, TTS, FLUX) 간의 데이터를 교통정리해 주는 백엔드 Uvicorn API 서버를 구축합니다.
- 구문이 간결하고 성능이 우수한 파이썬 표준 라이브러리인 FastAPI 기반을 학습합니다.
🛠️2단계: 따라하기 실습
✓실습 미션 체크리스트
우측 CORS 연동 샌드박스에서 'CORS Middleware 허용'을 껐을 때와 켰을 때 각각 테스트 요청을 보내 보세요. 미들웨어가 없으면 브라우저가 요청을 차단(빨간 자물쇠)하고, 허용하면 3000↔8000 포트 간 통신이 열려 200 OK가 돌아오는 차이를 직접 확인합니다.
FastAPI 중계 라우터 뼈대
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["*"])
@app.post("/api/generate-shorts")
def generate(data: dict):
# Ollama 호출 및 결과 JSON 리턴 중계
return {"status": "success", "data": data}💡 코딩 중 막히나요? 모범 솔루션 코드
🧩3단계: 개념 검증 퀴즈
검증 챌린지 미션
FastAPI 서버에 탑재한 CORS 활성화 기능이 정상 작동하고 교차 출처 테스트를 통과하는지 검증합니다.
📝 객관식 개념 확인 (2문항)
Q1. 브라우저(3000)에서 FastAPI(8000)로 요청할 때 CORS 설정이 없으면?
Q2. CORS 문제를 해결하는 올바른 위치는?
🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요
CORS 정책이 켜져 있어야 브라우저가 FastAPI 백엔드(8000포트)로부터 데이터를 정상 수신할 수 있습니다.
💻 3000포트 (UI)⚙️ 8000포트 (API)
🔒