커서 AI 로 "스터디 플래너" 웹 사이트 만들어보기3

소개

커서 AI 로 "스터디 플래너" 웹 사이트 만들어보기3 - Vercel 과 깃허브 연동하기

이 사례글에서는 커서 AI로 스터디 플래너를 만들어보는 과정을 사례글로 공유하고자 합니다.

깃허브에 배포를 했다면 이제 vercel 에 회원가입을 하고 깃허브를 vercel 과 연동만 하면 깃허브의 수정사항을 실시간으로 감지하고 배포를 자동으로 해줍니다.

<관련 이전 사례글>

1) 만들어보기1

2) 만들어보기2

커서 AI 사용, 깃허브, Vercel 사용

1) Vercel 에 회원가입을 합니다.

https://vercel.com/

sign up을 눌러서 가입을 합니다.

맨 처음에 저는 hobby 계정으로 가입했는데 쓰다가 유료로 전환했습니다.

2) 로그인 후 깃허브와 연동을 합니다.

깃허브 아이디 비번을 치고 로그인하면 아래와 같이 import 할 수 있는 것들이 나오고 클릭하게 되면 프로젝트가 만들어집니다.

import 를 누르고 나면

project name 등을 필요하면 수정해주고

Build and Output Setting 이나 Environment Variables(환경 변수 설정) 등을 미리 할 수 있으니 필요하시면 수정하셔도 됩니다. 저는 아무 작업도 안하고 바로 Deploy를 눌렀습니다.

그리고 잠시 기다리면 이렇게 성공했다는 메시지와 함께 인터넷 상에서 배포를 성공하게 됩니다.

그럼 다른 사람들이 나의 사이트에 접속할 수 있습니다. 더이상 로컬에만 머무르는 것이 아닙니다.

Vercel을 깃허브와 연동하면 배포를 쉽게할 수 있다.
Vercel의 회원가입은 무료/유료가 가능하다. 다만 상업적 이용, 원활한 사용 등을 위해서는 유료로 전환해야 하는 것 같다. 개인적인 목적이라면 무료로 사용하다가 필요시 전환을 하면 될 것 같다.
깃허브에 수정하면 알아서 vercel이 이것을 인식해서 자동으로 다시 재배포를 해준다.
만약 로컬에서 .env를 통해서 중요한 변수등을 관리했다면 vercel에서 환경 변수 등의 설정이 필요하다. 이건 조금 어려운 내용일 수 있어서 다음 편에서 다루고자 합니다.

현재 개발 중인 사이트 링크: https://studyplan-drab.vercel.app/

17기 웹앱 스터디