이 글은 공부를 하면서 알게 된 내용들을 기록하는 글 입니다. 오류나 고쳐야 할 사항들이 있다면 지적 부탁드립니다!
✅ 목표
GitGet 서비스를 개발하고, 프론트과 백이 각자 배포를 진행했다.
백엔드는 AWS를 활용하여 배포를 진행했고, 프론트는 Vercel을 이용하여 배포를 진행했다.
Vercel에서는 `vercel.app` 형태로 기본 도메인을 제공하는데, Gabia에서 gitget.co.kr로 도메인을 구매했고 이를 적용하기로 했다.
AWS의 Route53 서비스를 통해 프론트의 배포 주소를 연결하는 방법을 알아보도록 하자.
✅ Vercel에서 도메인 등록 및 A 레코드의 Value 복사
먼저 Vercel 서비스에 접속 한 후, Domains를 찾아 들어간다.
제일 위에 Domain을 작성할 수 있는 란이 있다.
해당 란에 프론트 배포물과 연결할 도메인(우리가 구매한 도메인)을 작성하고, 오른쪽에 `Add` 버튼을 누른다.
나는 구매한 도메인(`gitget.co.kr`)를 프론트쪽과 연결하고, `api.gitget.co.kr`을 백엔드와 연결할 목적으로
gitget.co.kr을 적고 Add 버튼을 눌렀다.
추가한 직후에는 `Invalid Configuration`이라고 뜰 것이다.
하단에 Value라는 곳에 IPv4 형식의 IP 주소가 나타난다. 이를 복사하자.
✅ Route53에서 레코드 정의
AWS의 Route53 서비스에 접속하자.
만일 Route53에 호스팅 영역이 없다면, 먼저 `gitget.co.kr`로 호스팅 영역을 생성하자.
호스팅 영역 생성은 도메인 이름에는 구매한 도메인 이름을, 유형은 퍼블릭 호스팅 영역으로 설정한 후 생성하면 된다.
호스팅 영역을 생성한 이후에는 `레코드 생성`을 선택한다.
`단순 라우팅`을 선택 → `다음` → `단순 레코드 정의`을 누르면 밑과 같은 화면이 나온다.
subdomain 영역에는 공란으로 두고,
레코드 유형에는 A-IPv4 주소 및 일부 AWS 리소스로 트래픽 라우팅
값/트래픽 라우팅 대상에 `Vercel에서 복사한 IP 주소`를 입력 후, 단순 레코드 정의를 눌러준다.
이후 Vercel에 접속하여 Refresh를 한 번 눌러주면,
밑과 같이 Valid Configuration이라는 체크 표시와 함께 해당 주소에 접속하면 프론트의 배포물을 확인할 수 있다.
✅ 참고 자료 & 링크
route53 을 이용하여 vercel 도메인 변경
nextjs 로 만든 프로젝트를 배포할 때 vercel 만큼 유용한 것이 없다. vercel 로 배포를 할 경우 ssr 을 지원해주며 CI/CD 또한 지원되어 repository 에 push 가 일어날 때 마다 자동으로 배포를 해줘 매우 편
velog.io
