본문 바로가기
Font-End

vercel 로 손쉽게 배포하기 + 도메인 주소 사서 연결하기

by Junmannn 2025. 2. 3.
반응형

10년 전 대학생 때에 여러 프로젝트 배포하면서 이런 저런 어려움도 겪었던  것 같은데, 그 때에는 빠르게 웹 주소로 배포하려면 firebase 외엔 답이 없는 줄만 알고 있었다. 요즘에는 너무나도 많은 기능들이 손쉬운 배포, 백엔드 연결까지도 손쉬워졌다

 

firebase의 대체 기술로 auth 까지 지원하는 supabase 도 있고, 호스팅을 위해 vercel 을 사용해 볼 수도 있다. 오늘은 일단 간단한 도메인으로 띄우기만 먼저 해볼 예정

 

1. 원하는 프레임워크나 여러 방법으로 화면 코드를 넣을 프로젝트를 생성한다

2. https://vercel.com/ 에 들어간다.

3. 회원가입을 진행하면서 깃헙이나 깃랩을 연결한다

4. 왼쪽 상단 로고를 눌러 홈으로 가서 Add New를 눌러 프로젝트를 연결한다

 

5. Import Git Repository를 눌러서 내가 가지고 있는 repository중에서 배포할 프로젝트를 선택하면 deploy를 자동으로 준비한다.

6. 도메인을 구매할 때에는 가격을 따져보고 본인이 원하는 플랫폼에서 구매하면 된다. 평소 사용하던 Hostingkr 에서 구매 진행함. 사용하고싶은 도메인이 있는지 검색하고, 얼마인지 나올테니 그때 장바구니에 담고 결제를 진행.

혹시나 시간 지나서 자동으로 잘못되고 싶지 않으면 예치금 넣고 자동 연장 하는걸 추천

7. 도메인 구매 후 나의 서비스 - 도메인 관리로 이동

 

8. 다시 vercel 에서 내 프로젝트 - Settings - Demain에 내가 구매한 주소 넣고 add

 

9. 8을 하고 나면 에러가 뜨게 됨. 두 에러 값을 호스팅 업체에 입력해줘야함

 

10. 호스팅 kr에 방금 두 값을 넣고 확인

 

11. 다시 vercel 에서 Nameservers 를 눌러주고 enable을 시켜준다. 그러면 2개의 주소가 나온다

12. 호스팅 kr 에서 네임서버에 있는 값들을 전부 지우고 저 위의 2개를 넣는다

이렇게 나오는게 맞다. 잘 하고 있으니 당황하지 말고

 

13. vercel 로 돌아오면 잘 연결된걸 확인 가능함

반응형