Vercel과 Render를 활용한 풀스택 프로젝트 배포 자동화하기
중급45분2026-04-16
Slack 채널의 특정 키워드를 실시간으로 감지하는 백엔드 서버와 이를 시각화하는 프론트엔드 대시보드를 구축합니다. Vercel과 Render 서비스를 통해 각각 배포하여 실제 인터넷 주소로 접속 가능한 풀스택 모니터링 웹페이지를 만듭니다.
이 코칭은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- 프론트엔드(Vercel)와 백엔드(Render)를 분리하여 배포할 수 있습니다.
- 환경 변수를 사용하여 API 키와 서비스 URL을 안전하게 관리할 수 있습니다.
- CORS 정책을 이해하고 서버에 올바르게 설정할 수 있습니다.
- 외부 API(Slack)를 연동하는 백엔드 서비스를 구축할 수 있습니다.
어떻게 진행해요
1. 백엔드 서버 초기 설정하기
2. CORS 설정 및 API 엔드포인트 구현하기
3. 프론트엔드 대시보드 초기 설정하기
4. 환경 변수 설정 및 데이터 연동하기
5. 백엔드 서버를 Render에 배포하기
6. 프론트엔드를 Vercel에 배포하고 연결하기
7. 최종 배포 확인 및 모니터링
AI 튜터가 각 단계를 하나씩 안내해줄 거예요