로컬 LLM + RAG 기반 AI 채팅봇 만들기6.3 배포 후 점검 사항이제 Ktor 백엔드와 SvelteKit 프론트엔드를 배포 완료했습니다.이번 단계에서는 배포된 서비스의 정상 동작 여부를 확인하고, 모니터링 및 에러 대응 전략을 구축하겠습니다.1) 배포 후 확인해야 할 사항✅ ① 프론트엔드와 백엔드 연결 확인브라우저에서 배포된 프론트엔드 URL에 접속AI 챗봇과 대화 시도API 호출이 정상적으로 동작하는지 개발자 도구(DevTools)에서 확인fetch("https://backend-url.com/api/chat/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({..
로컬 LLM + RAG 기반 AI 채팅봇 만들기6.2 프론트엔드 배포 (Vercel)이제 SvelteKit으로 개발한 프론트엔드를 배포하여어디서나 AI 챗봇을 사용할 수 있도록 Vercel을 활용하여 배포하겠습니다.1) Vercel을 사용하는 이유✅ Vercel의 장점손쉬운 배포 → GitHub와 연동하여 자동 배포 가능서버리스(Serverless) 환경 지원 → API 호출만으로 백엔드와 통신 가능빠른 글로벌 배포 → CDN(Content Delivery Network) 적용2) Vercel 가입 및 환경 설정✅ ① Vercel 가입 및 프로젝트 생성Vercel 공식 사이트에 접속GitHub 계정과 연결"New Project" 버튼 클릭SvelteKit 프로젝트 선택 후 Import배포 설정 페이지에서..
로컬 LLM + RAG 기반 AI 채팅봇 만들기6.1 백엔드 Docker 컨테이너화 및 배포이제 Ktor 기반의 백엔드 서버를 Docker 컨테이너로 패키징하여 배포 가능하도록 설정합니다.Docker를 활용하면 환경에 관계없이 쉽게 배포하고, 운영 중인 서버를 일관성 있게 유지할 수 있습니다.1) Docker를 사용하는 이유✅ Docker 배포의 장점환경 일관성 유지 → 운영 체제(OS)와 관계없이 동일한 환경에서 실행 가능간편한 배포 → 컨테이너 이미지를 사용하면 배포가 용이확장성 향상 → 여러 컨테이너를 병렬 실행하여 성능 확장 가능2) Docker 설치 및 기본 설정✅ ① Docker 설치Windows / Mac: Docker 공식 사이트에서 설치Linux (Ubuntu):sudo apt updat..
로컬 LLM + RAG 기반 AI 채팅봇 만들기5.1 챗봇 API 설계이제 백엔드와 프론트엔드가 WebSocket을 통해 실시간으로 통신할 수 있도록 구현했습니다.이번 단계에서는 RESTful API를 활용하여 챗봇 기능을 확장하고, API 문서화를 진행하겠습니다.1) 챗봇 API 설계 개요✅ 왜 REST API를 추가해야 하는가?WebSocket은 실시간 메시지 전송에 적합하지만 대화 이력 조회 및 관리 기능이 부족RESTful API를 통해 대화 이력을 저장하고, 특정 세션의 대화를 불러오는 기능 추가API 문서화를 진행하여 프론트엔드 및 외부 시스템과의 연동을 쉽게 지원2) API 엔드포인트 설계📌 챗봇 관련 API 엔드포인트HTTP 메서드 엔드포인트 설명POST/api/chat/send메시지 전..
로컬 LLM + RAG 기반 AI 채팅봇 만들기4.3 WebSocket을 활용한 실시간 채팅 기능 구현이제 프론트엔드에서 사용자가 입력한 메시지를 WebSocket을 통해 백엔드(Ktor)로 전송하고,AI 챗봇의 응답을 받아 실시간으로 화면에 표시하는 기능을 구현하겠습니다.1) WebSocket을 활용한 실시간 채팅 흐름1️⃣ [사용자] 웹 UI에서 메시지를 입력 2️⃣ [프론트엔드] WebSocket을 통해 메시지를 백엔드(Ktor)로 전송 3️⃣ [백엔드] AI 챗봇이 메시지를 받아 LLM 모델에 요청 4️⃣ [백엔드] LLM 응답을 받아 WebSocket을 통해 클라이언트로 전송 5️⃣ [프론트엔드] AI 응답을 받아 채팅 UI에 표시 2) WebSocket을 통한 메시지 전송 및 응답 처..
로컬 LLM + RAG 기반 AI 채팅봇 만들기4.2 챗봇 UI 설계 및 Tailwind CSS 적용이제 SvelteKit을 활용하여 사용자가 AI 챗봇과 직접 상호작용할 수 있는 UI를 설계하고 구현합니다.이번 단계에서는 채팅 인터페이스의 디자인을 정의하고, Tailwind CSS를 적용하여 스타일을 구성합니다.1) 챗봇 UI 설계 개요✅ 요구사항 정의1️⃣ 실시간 채팅 인터페이스 구현2️⃣ 사용자가 입력한 메시지를 WebSocket을 통해 서버로 전송3️⃣ 서버에서 AI 응답을 받아 채팅 화면에 표시4️⃣ Tailwind CSS를 활용하여 UI 스타일링✅ 챗봇 UI 와이어프레임┌──────────────────────────┐│ AI Chatbot │├──────────────..
로컬 LLM + RAG 기반 AI 채팅봇 만들기4.1 SvelteKit 소개 및 환경 설정이제 백엔드 구현을 완료했으므로,프론트엔드에서 사용자가 직접 AI 챗봇과 상호작용할 수 있도록 UI를 구축해야 합니다.이번 단계에서는 SvelteKit을 활용한 프론트엔드 환경 설정을 진행하겠습니다.1) SvelteKit이란?✅ SvelteKit 개요SvelteKit은 Svelte 기반의 풀스택 프레임워크로,빠른 성능과 간단한 코드 구조를 제공하여 인터랙티브 웹 애플리케이션을 쉽게 개발할 수 있도록 지원합니다.✅ 왜 SvelteKit을 선택했는가?컴파일 기반 프레임워크 → 실행 속도가 빠르고, 성능 최적화가 쉬움반응형(Reactivity) 지원 → 상태 관리가 간편하며, 사용하기 쉬움SSR(Server-Side Re..
- Total
- Today
- Yesterday
- nextJS
- Webpack
- Next.js
- 백엔드개발
- Python
- 백엔드
- Docker
- Project
- 로컬LLM
- babel
- AI챗봇
- kotlin
- til
- 프론트엔드
- Page
- fastapi
- 챗봇개발
- PostgreSQL
- Ktor
- github
- 리액트
- rag
- llm
- 웹개발
- 페이지
- nodejs
- 개발블로그
- REACT
- LangChain
- 관리자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |