pageservice.tistory.com

프론트엔드 개발 실무/React 기초부터 프로젝트까지

[ChatGPT 챗봇 실습 8강] 챗봇 배포 – Vercel과 Netlify로 실제 서비스 만들기

free21 2025. 6. 13. 22:50

이번 강의에서는 지금까지 개발한 챗봇을 누구나 접속할 수 있도록 Vercel 또는 Netlify를 활용해 실제 서비스로 배포하는 방법을 배웁니다.

용어 설명

  • Vercel, Netlify: 프론트엔드 중심의 정적 사이트 무료 배포 플랫폼
  • 환경변수: API 키나 설정값 등을 코드가 아닌 서버 설정으로 분리하여 보관하는 변수
  • 자동 배포: GitHub 저장소에 변경이 생기면 자동으로 다시 빌드 및 배포되는 기능

기본 개념

  • 개발이 완료된 챗봇 프로젝트를 GitHub에 업로드 후 Vercel 또는 Netlify에 연동
  • 환경변수를 설정하여 민감한 값(API 키 등)을 외부에 노출하지 않음
  • 정적 빌드 결과물 기반으로 빠르게 배포 가능

주요 사용 위치

  • 실습용 챗봇을 공개 시범용으로 배포할 때
  • 개인 포트폴리오나 클라이언트 테스트용 서비스 제공 시

구체적 배포 절차 (Vercel 기준)

  1. GitHub에 프로젝트 푸시
  2. vercel.com 회원가입 후 ‘New Project’ 클릭
  3. GitHub 저장소 선택 → 프레임워크 자동 인식 (React / Vite 등)
  4. 환경변수 탭에 VITE_API_URL, VITE_APP_ENV 등 설정
  5. ‘Deploy’ 버튼 클릭 → 수 분 내 배포 완료

Netlify도 거의 동일한 흐름이며 netlify.app 도메인을 기본 제공합니다.

환경변수 주의사항

  • .env 파일은 GitHub에 커밋하지 말고 .gitignore에 추가
  • Vercel이나 Netlify의 '환경변수 관리 화면'에 수동 입력해야 적용됨

핵심 요점 정리

  • GitHub에 올린 프로젝트를 Vercel이나 Netlify로 배포
  • 환경변수 등록 필수 → 보안 유지 및 설정 분리
  • 무료 플랜으로도 충분히 실습 및 공개용 운영 가능

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.

 

▲ TOP