로컬 LLM + RAG 기반 AI 채팅봇 만들기 # 40 - 프론트엔드 배포 (Vercel)

로컬 LLM + RAG 기반 AI 채팅봇 만들기

6.2 프론트엔드 배포 (Vercel)

이제 SvelteKit으로 개발한 프론트엔드를 배포하여
어디서나 AI 챗봇을 사용할 수 있도록 Vercel을 활용하여 배포하겠습니다.

---

1) Vercel을 사용하는 이유

✅ Vercel의 장점

• 손쉬운 배포 → GitHub와 연동하여 자동 배포 가능
• 서버리스(Serverless) 환경 지원 → API 호출만으로 백엔드와 통신 가능
• 빠른 글로벌 배포 → CDN(Content Delivery Network) 적용

---

2) Vercel 가입 및 환경 설정

✅ ① Vercel 가입 및 프로젝트 생성

1. Vercel 공식 사이트에 접속
2. GitHub 계정과 연결
3. "New Project" 버튼 클릭
4. SvelteKit 프로젝트 선택 후 Import
5. 배포 설정 페이지에서 자동 설정 적용

---

3) 프로젝트 빌드 및 배포

✅ ① Vercel CLI 설치

npm install -g vercel

✅ ② 프로젝트 초기화

vercel init

✅ ③ 환경 변수 설정

Vercel에서 환경 변수를 설정해야 백엔드 API를 올바르게 호출할 수 있습니다.

vercel env add VITE_API_BASE_URL http://backend-url.com

✅ ④ SvelteKit 프로젝트 빌드

npm run build

✅ ⑤ Vercel을 통한 배포

vercel deploy --prod

📌 예상 결과

✅ 배포 성공! 프로젝트 URL: https://svelte-chatbot.vercel.app

---

4) 배포 후 점검 사항

✅ ① API 연결 확인

배포된 사이트에서 백엔드 API가 정상적으로 호출되는지 확인

fetch("https://backend-url.com/api/chat/send")
  .then(res => res.json())
  .then(data => console.log(data));

---

✅ ② CORS 설정 (백엔드 수정 필요 시)

Vercel에서 실행되는 프론트엔드가 백엔드 API를 호출할 수 있도록
Ktor 서버에서 CORS 설정을 추가합니다.

install(CORS) {
    anyHost()
    allowMethod(HttpMethod.Get)
    allowMethod(HttpMethod.Post)
}

---

✅ ③ 배포 후 UI 테스트

1. 배포된 URL에 접속
2. AI 챗봇과 대화 시도
3. 메시지가 정상적으로 주고받아지는지 확인

---

5) Vercel 배포 요약

단계 실행 명령어

Vercel CLI 설치	npm install -g vercel
환경 변수 설정	vercel env add VITE_API_BASE_URL
프로젝트 빌드	npm run build
Vercel 배포 실행	vercel deploy --prod

---

6) 다음 단계

이제 SvelteKit 프론트엔드를 Vercel에 배포 완료했습니다.
다음으로 6.3 배포 후 점검 사항을 진행하여
모니터링, 로깅, 에러 대응 전략을 구축하겠습니다! 🚀