매주 월요일 동행에서 열리는 AI 스터디

AI 활용법 영감 얻기

바이브코딩 공통

Vercel과 Github를 이용해 배포하기

Github에 소스코드를 올리고 Vercel로 배포하여 누구나 접속할 수 있는 웹서비스를 만드는 방법을 안내합니다.

  • 이 가이드에 적힌 내용은 AI를 쓰지 않고 모두 직접 진행합니다.

Github 개념 이해하기

  • Github란, 소스코드를 관리할 때 사용하는 파일 버전 관리 도구에요.
  • 내 컴퓨터에서 만든 파일을 Github에 올리는 걸 push한다고 표현합니다.
  • 내 컴퓨터에 바이브코딩으로 작업을 하다가 어느 정도 기능 구현이 마무리되면 Github로 push할거에요.
  • 그 후에 또 내 컴퓨터에서 추가적인 작업을 진행하면 Github에 곧장 반영되지 않아요. 내가 push 해야만 반영됩니다.
  • 즉, 내 컴퓨터에서 개발 작업을 진행하다가 구현이 완료돼서 '배포'하려면, 즉 서버에 올리려면 push한다고 이해하시면 됩니다!

Github 저장소 만들기

Github 저장소 만들기 화면
  • 저장소는 '폴더' 같은 개념이에요. 내 서비스를 저장할 저장소를 하나 만들어주세요.
  • repository name은 띄어쓰기 없이 영어로 적어주세요.
  • (중요!) Choose Visibility에서 "Private"을 선택해 주세요. "Public"은 완전히 인터넷 상에 내 소스코드를 공개한다는 뜻이에요.
  • 저장소를 생성하고 나면 화면에 다음과 같은 안내가 보일텐데 이걸 그대로 진행할거에요.
echo "# double-breathing" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/winter-blanket/double-breathing.git
git push -u origin main

Antigravity에서 터미널을 열고 다음 명령어를 순서대로 진행해주세요.

1. 다음 명령어 치고 엔터 누르기 (지금 폴더에서 Git을 사용한다는 뜻이에요.)

git init

2. 다음 명령어 치고 엔터 누르기 (지금 폴더에 있는 모든 파일을 Github로 올리겠다는 뜻이에요.)

git add .

3. 다음 명령어 치고 엔터 누르기

git commit -m "first commit"

4. 다음 명령어 치고 엔터 누르기

git remote add origin https://github.com/winter-blanket/double-breathing.git
  • (중요!) 위 명령어는 그대로 복붙하지 마시고, https:// 뒤에 오는 링크를 내 Github 저장소 주소로 변경해주세요.

5. 다음 명령어 치고 엔터 누르기

git push -u origin main

6. 그리고 Github 저장소를 브라우저에서 새로고침했을 때 새로운 파일이 올라가있다면 성공입니다!

Vercel 개념 이해하기

  • 이제 Github 저장소에 내 소스코드가 모두 올라갔다면 Vercel로 "배포"를 진행할거에요.
  • Github에 올라가는 것만으로는 내 서비스가 다른 사람도 접속할 수 있는 상태로 공개되지 않는데, 이걸 도와주는 서비스가 Vercel이고, Supabase와 마찬가지로 무료 계정이어도 충분히 모든 기능을 쓸 수 있어서 바이브코딩에서 가장 널리 이용되는 도구에요.

Vercel 계정 만들기

  • 이 링크에서 Vercel 계정을 만들어 주세요.
  • 이때 꼭 Continue with Github를 눌러서 Github 계정으로 회원가입해주세요.
  • Team을 만들라는 화면이 나올텐데 적당한 이름으로 Team을 하나 만들어 주세요. (예 : team-blanket)
  • Github 저장소는 Vercel에서 '프로젝트'로 관리되고 '프로젝트'를 모아두는게 'Team'입니다. Supabase의 Organization과 비슷한 개념이에요.

Vercel에서 Github 저장소 연결하기

  • Team 생성이 완료되면 화면 오른쪽 Add New 검은색 버튼을 누르고 Project를 선택해주세요.

1. Github 저장소 import 하기

Vercel에서 Github 저장소 연결하기
  • Github 계정이 잘 연결됐다면 위 스크린샷과 같이 내 Github 저장소 목록이 보일거에요.
  • 배포하려는 저장소 이름 옆의 'import' 버튼을 눌러주세요.

2. Next.js 선택하기

Application Preset에서 Next.js 확인
  • 그러면 위와 같은 화면이 보일텐데 여기서 Application Preset이 'Next.js'로 잘 들어가있는지 확인해주세요.

3. (Supabase를 사용한 경우만 진행하는 과정이에요) Environment Variables 입력하기

Vercel Environment Variables 설정
  • Environment Variables를 눌러서 위 스크린샷과 같이 설정 화면을 열어 주세요.
  • Add More 버튼을 두 번 누르고, 스크린샷과 같이 Key를 넣어주세요.
  • 여기서 적는 Key는 내 .env 파일에 적힌 이름과 완전히 동일해야 해요.
  • Value 칸에는 각 항목의 = 뒤에 적은 내용, 즉 Supabase Connect 버튼을 눌러서 복사했던 정보를 그대로 넣어주세요.
  • 그리고 Deploy 버튼을 눌러주세요.
Vercel 빌드 진행 중
  • 위와 같이 'build'를 진행하고 있다는 메시지가 뜨기 시작할거에요.
  • 'build'란 소스코드를 "배포할 수 있는" 상태로 변형하는 과정을 말합니다.
  • 모든 과정이 에러 없이 진행되면 배포가 완료됩니다.

배포가 완료되지 않고 에러가 발생했어요.

Vercel 배포 에러 화면
  • 'build' 도중에 에러가 발생하면 위와 같이 상세 에러 메시지를 볼 수 있어요.
  • 스크린샷에 빨간색 화살표로 표시해둔 '복사하기' 버튼을 눌러서 에러 메시지를 복사해주세요.
  • 그리고 AI 프롬프트 창에 다음과 같이 적어 주세요.
"Vercel로 배포하고 있던 중에 다음 에러가 발생했어 : {복사한 에러 메시지 붙여넣기}"
  • 그러면 AI가 에러 메시지를 분석해서 해결 방법을 알려줄 거에요.

배포 완료 후 배포된 페이지 접속하기

Vercel 배포 완료 축하 화면
  • 배포 성공했다면 위와 같은 화면이 보일거에요.
  • Continue to Dashboard 버튼을 눌러서 대시보드로 이동해주세요.
Vercel 대시보드에서 배포 URL 확인
  • Deployment 라는 글자 밑에 vercel.app 으로 끝나는 주소가 '배포된 접속 URL'입니다.
  • 이제 이 주소만 있으면 다른 사람도 내 서비스에 접속할 수 있어요!