Route53
Route53은 하나의 도메인으로 다양한 서비스를 통합 관리하고 연결하는 역할을 한다.
나는 프론트엔드와 백엔드에 하나의 도메인을 연결하기 위해 사용하게 됐는데,
프론트엔드는 Amplify에서 기본으로 제공되는 도메인을 사용했었고 백엔드에는 가비아에서 구매한 도메인을 연결했었다. 여기서 가비아에서 구매한 도메인을 프론트엔드에 연결하고 도메인 앞에 api를 붙인 서브도메인을 백엔드에 연결하도록 변경했다.
1.호스팅 영역 생성
우선 Route53의 호스팅 영역 메뉴로 이동해서 우측 상단에 보면 호스팅 영역 생성 버튼이 있다. 이 버튼을 눌러 호스팅 영역을 생성해준다.
도메인 이름에 사용할 도메인을 입력해주고 생성 버튼을 누른다.
생성된 호스팅 영역으로 들어가면 레코드 이름에 도메인이 입력돼있고 값/트래픽 라우팅 대상에 4개의 값이 표시된다. ns-xxxx.com,ns-xxxx.net 과 같은 형식으로 표시되는데 이를 도메인 관리 페이지에서 네임서버 부분에 4개의 값을 모두 입력해줘야 한다
2.AWS Amplify에 사용자 지정 도메인 추가
Amplify 앱에 들어가 메뉴에서 사용자 지정 도메인을 클릭하고 도메인 추가 버튼을 누른다.
그리고 검색창에 설정하려는 도메인을 입력하고 도메인 가용성 확인 버튼을 누르면 앞서 route53을 통해 네임서버를 만들고 지정했기 때문에 도메인 구성이 가능한 것을 볼 수 있다.
도메인을 연결하고 Route53으로 돌아가면 이렇게 레코드가 추가된 것을 확인할 수 있고 도메인으로 접속하면 정상적으로 Amplify App에 접속되는 것을 볼 수 있다.
3.EC2에 도메인 연결
Route53에 백엔드에 접속할 때 사용할 서브 도메인의 레코드를 생성한다. 레코드 목록에서 레코드 생성 버튼을 누르면 위와 같이 레코드 생성 창이 표시되는데 여기에 서브도메인을 레코드 이름 앞에 붙여주고 값에는 EC2의 IP주소를 입력해서 생성한다.
그리고 nginx에서 포워딩할 주소를 변경하고 SSL을 다시 발급하면 된다.
