Intro..

이번 포스팅에서는 Vercel 에 간단하게 배포했던 과정을 남겨놓겠습니다.
도메인은 AWS Route 53 에서 발급받은 도메인을 사용할 예정이고 해당 도메인에 배포된 IP 를 레코드로 등록하여 도메인 접근 시 프로덕션에 리다이렉트 될 수 있도록 구성했습니다.

Vercel

Vercel 은 호스팅을 간단하게 해주는 PaaS 플랫폼으로 너무너무 간단하게 개발한 사이트를 호스팅 할 수 있고 CI/CD 까지 자동으로 해줍니다.

과정

먼저 깃허브에 올라와있는 레포지토리를 Import 해옵니다.

Import 를 해오면 프로젝트를 설정하는 폼이 나옵니다.
프로젝트 이름을 설정해주고, Root Directory 를 설정해줍니다. 기본값은 './' 입니다.
설정을 해주면 Deploy 를 눌러서 배포합니다.

배포에 성공한다면 이런 화면을 마주칠 수 있습니다.
클릭 세번으로 배포를 성공했습니다!
물론 여러가지 설정이 더해진다면 조금은 복잡해질수도 있겠지만, 정말 쉽게 배포가 됩니다..

그럼 이제 도메인을 설정하겠습니다.
Settings > Domains 을 클릭합니다.

Default 로 설정된 도메인을 Edit 하여 발급받은 도메인을 넣어줍니다.
Add 를 통해 새로 입력해도 됩니다.
추가를 하면 아래와 같은 화면이 나옵니다.
등록된 도메인에 A 타입 혹은 CNAME 으로 레코드를 생성해줄 수 있습니다.
저는 간단하게 A 타입으로 레코드를 생성하여 등록할 예정입니다.
아래의 Value 를 복사합니다.

AWS 의 Route 53 서비스로 가봅시다!
등록된 도메인을 클릭한 후 레코드를 생성해야 합니다.

레코드를 생성해줍니다. 레코드 유형은 A, 값에는 복사해온 IP 주소를 넣어줍니다.
레코드 이름은 루트 도메인으로 할 것이기 때문에 넣지 않았습니다.

저는 두 개의 A 레코드를 생성했습니다. 하나는 루트 도메인을 가진 A 타입의 레코드이고, 하나는 www 를 이름으로 가진 A 타입의 레코드 입니다.

그렇게 도메인이 연결이 되면 도메인 아래에 확인 표시가 뜹니다!

Outro..

정말 간단하게 프론트엔드 프로젝트를 배포했고, 도메인도 간편하게 레코드로 등록해줬습니다.

Vercel 에 호스팅을 했기 때문에 main 브랜치에 머지가 되면 저절로 배포까지 실행되는 구조입니다.

앞으로도 공수가 부족한 상황이라면 Vercel 을 사용해 배포를 할 예정입니다.

DNS 레코드 종류에 대해서 궁금하시다면 아래 포스팅을 참고해주세요!
https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-DNS-%EB%A0%88%EC%BD%94%EB%93%9C-%EC%A2%85%EB%A5%98-%E2%98%85-%EC%95%8C%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC#a_%EB%A0%88%EC%BD%94%EB%93%9C_vs_cname_%EC%9E%A5%EB%8B%A8%EC%A0%90