KDT 유비온 코딩 강의 14일차 [버셀로 배포하]

KDT 유비온 코딩 강의 14일차 | 깃허브 푸시하기
KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다!

 

📌 도입

오늘은 드디어 만든 웹 명함을 실제 웹에 배포하는 작업을 진행했어요!
버셀(Vercel)이라는 플랫폼을 활용해서 깃허브와 연동하고 자동 배포 환경을 구성하는 과정이었는데요.

오늘 다룬 핵심 내용은 세 가지였어요.

• GitHub 계정과 Vercel 플랫폼 연동 및 자동 배포 환경 구성
• 수정된 코드 푸시 및 GitHub 배포 결과 확인 절차
• 초기 배포 과정과 동작 테스트 시 유의사항 학습

 

 

 

💡 버셀(Vercel)이란?

버셀을 통해서 배포하는 방법을 배웠는데요!
간단히 말하면 깃허브에 코드를 올리면 버셀이 자동으로 웹사이트를 만들어주는 플랫폼이에요.
무료로 웹 주소까지 제공해줘서 개인 프로젝트 배포에 정말 유용하답니다 😊

 

https://vercel.com/

Vercel: Build and deploy the best web experiences with the AI Cloud – Vercel

 

⚙️ STEP 1. 버셀 가입 및 깃허브 계정 연동

우선 버셀을 사용하기 위해 가입을 했습니다.
계정 연동 방법이 여러 가지가 있지만, 깃허브를 통해서 계정 연동을 진행했어요

 

 

깃허브 계정을 사용하는 이유는 깃허브에서 수정되는 내용이 있다면
버셀에서 자동으로 수정 배포가 되게 하기 위해서예요!

가입 순서를 정리하면 이렇습니다.

1. 버셀에 접속해서 회원가입하기 클릭
2. 깃허브로 계속 진행하세요 클릭
3. 개인 프로젝트 선택 후 이름 작성
4. 팀 URL 설정하여 가입 완료!

 

 

🔗 STEP 2. 깃허브 레파지토리 연동하기

가입 후 대시보드 화면으로 가서 프로젝트를 추가하고,
깃허브에 있는 레파지토리를 연동해서 자동으로 연결되는 웹 주소를 얻는 과정을 거쳤어요!

 

버셀 대시보드 화면 맨 오른쪽에서 새 항목 추가 → 프로젝트 생성하기를 눌러
새로운 프로젝트를 먼저 생성해 줍니다.

 

 

그 이후 Git 저장소 가져오기를 통해 깃허브 계속하기를 눌러서
가져올 계정에 GitHub 애플리케이션 설치까지 마무리해 줍니다.

 

그 다음 Import를 클릭해 줍니다. (화면에는 수입이라고 보여지지만 사실은 Import예요 😄)
그러면 버셀이 깃허브에 있는 소스를 자동으로 가져옵니다.

 

 

🚀 STEP 3. 프로젝트 설정 및 배포하기

새 프로젝트가 열리면 프로젝트 네임을 설정해주면 됩니다.
저는 HTML 소스 파일이라 애플리케이션 사전 설정 프레임워크 프리셋은 Other로 뒀어요.

 

 

프로젝트명, 애플리케이션 사전 설정이 모두 완료되었다면 맨 하단에 배포 버튼을 눌러줍니다.

 

 

그럼 이렇게 버셀을 통해서 웹 명함 카드 프로젝트가 자동 배포된 것을 확인할 수 있었습니다! 🎉
이후에 깃허브에서 변경되는 내용이 있으면 버셀에서 자동 배포를 해준다고 하네요.

 

 

 

🌐 STEP 4. 배포된 웹 명함 확인하기

대시보드에서 도메인 하단 주소를 누르면 제가 만든 웹 명함 카드 URL로 바로 연결되며,
아래 이미지와 같이 웹 명함 주소를 확인할 수 있었습니다!

 

 

혹시 궁금하실 분들을 위해서 제 웹 명항 링크도 남겨드려요!😊

https://webnamecard-mocha.vercel.app/

gang — 웹 명함

 

 

⚠️ 다음 글 예고

자동 배포가 되는지 확인 작업도 진행해야 했는데,
VSCode 설정 오류가 있어서 다음 글로 이어서 작성해 보도록 하겠습니다 ㅠ.......ㅠ

에러는 언제나 기다리고 있네요.. 그래도 하나씩 해결해 나가면서 성장하는 중입니다! 💪

 

 

📖 모르는 단어 찾아보기

오늘도 새로운 단어들이 나왔어요. 찾아보고 정리해봤습니다!

[Vercel (버셀)]
웹 애플리케이션을 빠르고 쉽게 배포할 수 있는 클라우드 플랫폼이에요. 깃허브와 연동하면 코드를 푸시할 때마다 자동으로 배포해줘요.

[배포 (Deploy)]
개발한 웹사이트나 앱을 실제 인터넷에 올려서 누구나 접속할 수 있게 만드는 과정이에요.

[레파지토리 (Repository)]
깃허브에서 코드를 저장하는 공간이에요. 줄여서 repo(레포)라고도 불러요.

[프레임워크 프리셋 (Framework Preset)]
버셀에서 어떤 종류의 프로젝트인지 설정하는 옵션이에요. HTML 단일 파일은 Other로 설정하면 돼요.

[자동 배포 (Auto Deploy)]
깃허브에 코드를 푸시하면 버셀이 자동으로 최신 버전을 배포해주는 기능이에요. 매번 수동으로 배포하지 않아도 돼서 매우 편리해요.

[도메인 (Domain)]
웹사이트 주소예요. 버셀은 무료로 vercel.app 형식의 도메인을 제공해줘요.

 

 

🙌 마무리

오늘은 처음으로 제가 만든 웹 명함이 실제 인터넷에 올라가는 것을 직접 눈으로 확인했어요.
단순히 파일로만 존재하던 것이 URL을 가진 실제 웹사이트가 된다는 게 생각보다 훨씬 감동적이었습니다 😊

다음 글에서는 자동 배포 확인과 VSCode 오류 해결 과정을 담아올게요!

앞으로도 강의 내용을 꾸준히 기록할 예정이니, 관심과 응원 부탁드립니다! 🙏