이번 강의에서는 지금까지 개발한 챗봇을 누구나 접속할 수 있도록 Vercel 또는 Netlify를 활용해 실제 서비스로 배포하는 방법을 배웁니다.
용어 설명
- Vercel, Netlify: 프론트엔드 중심의 정적 사이트 무료 배포 플랫폼
- 환경변수: API 키나 설정값 등을 코드가 아닌 서버 설정으로 분리하여 보관하는 변수
- 자동 배포: GitHub 저장소에 변경이 생기면 자동으로 다시 빌드 및 배포되는 기능
기본 개념
- 개발이 완료된 챗봇 프로젝트를 GitHub에 업로드 후 Vercel 또는 Netlify에 연동
- 환경변수를 설정하여 민감한 값(API 키 등)을 외부에 노출하지 않음
- 정적 빌드 결과물 기반으로 빠르게 배포 가능
주요 사용 위치
- 실습용 챗봇을 공개 시범용으로 배포할 때
- 개인 포트폴리오나 클라이언트 테스트용 서비스 제공 시
구체적 배포 절차 (Vercel 기준)
- GitHub에 프로젝트 푸시
- vercel.com 회원가입 후 ‘New Project’ 클릭
- GitHub 저장소 선택 → 프레임워크 자동 인식 (React / Vite 등)
- 환경변수 탭에 VITE_API_URL, VITE_APP_ENV 등 설정
- ‘Deploy’ 버튼 클릭 → 수 분 내 배포 완료
Netlify도 거의 동일한 흐름이며 netlify.app 도메인을 기본 제공합니다.
환경변수 주의사항
- .env 파일은 GitHub에 커밋하지 말고 .gitignore에 추가
- Vercel이나 Netlify의 '환경변수 관리 화면'에 수동 입력해야 적용됨
핵심 요점 정리
- GitHub에 올린 프로젝트를 Vercel이나 Netlify로 배포
- 환경변수 등록 필수 → 보안 유지 및 설정 분리
- 무료 플랜으로도 충분히 실습 및 공개용 운영 가능
💬 댓글
이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.
'프론트엔드 개발 실무 > React 기초부터 프로젝트까지' 카테고리의 다른 글
[ChatGPT 챗봇 실습 10강] 상태 관리 도입 – useContext와 useReducer로 구조화 (0) | 2025.06.13 |
---|---|
[ChatGPT 챗봇 실습 9강] 반응형 UI, 다크모드, 입력 UX 개선 (0) | 2025.06.13 |
[ChatGPT 챗봇 실습 7강] OpenAI 과금 구조 이해와 사용량 모니터링 (0) | 2025.06.13 |
[ChatGPT 챗봇 실습 6강] 대화 저장 기능 – localStorage로 유지되는 챗봇 만들기 (0) | 2025.06.13 |
[ChatGPT 챗봇 실습 5강] 챗봇 UI 개선 – 스크롤, 로딩 상태, 메시지 스타일링 (0) | 2025.06.13 |