Amplify Console의 Preview URL을 Custom Domain으로 사용하는 방법

Amplify Console을 통해서 웹 어플리케이션의 Hosting을 한지 어언 2년 반이 지났습니다.

아주 만족하면서 사용하고 있는데, 그 중에서 Amplify의 가장 큰 장점을 말해보라고하면 저는 Preview 기능을 선택할 것입니다.

 

Preview 기능은 PR 단위로 환경을 만들어주기 때문에, 여러 작업을 동시에 진행하여 PR을 각각 올렸을 때 모든 작업을 분리된 환경에서 개별적으로 테스트 할 수 있게 합니다.

처음 Amplify Console을 도입할 때 제 상황이 딱 여러 작업의 테스트를 동시에 하면 좋은 상황이었기에 너무 만족스럽게 Preview 기능을 활용하고 있었습니다.

 

그런데, Preview 기능으로 만들어진 환경은 기본적으로 amplify 도메인으로 호스팅 됩니다.

Preview는 보통 개발환경으로 사용하고 있어서 도메인이 무엇이든 크게 영향을 받는 일은 없습니다. 그러나 소유하고 있지 않은 도메인을 사용하는 것은 어딘가 조금은 불편함을 줍니다.

예를 들면, API 서버에 요청을 보내면 막힐 수 있습니다. API 서버는 보안상 허가된 도메인으로부터 요청이 왔을 때만 응답을 하기도 합니다. 그런데 Amplify 도메인으로 호스팅 되는 Preview 환경의 URL은 API 서버가 모를 가능성이 무척 높아서 API 요청을 허용하지 않을 수 있습니다.

혹시 Amplify 웹앱에 부여받은 전용 Amplify 도메인을 API 서버에서 허용 도메인에 넣더라도 조금은 불편합니다. API 서버를 관리하는 입장에서는 무엇인지 알 수 없는 도메인이 허용 리스트에 있을텐데, 그냥 봐서는 어떤 서비스인지 파악하기 어렵습니다.

 

이런 불편함들을 없애기 위해서는 Preview 환경도 내가 소유하고 있는 커스텀 도메인을 이용하면 좋습니다.

 

Amplify App에 이미 Custom Domain이 적용되어 있다면 Preview 환경에도 적용시키는 것은 아주 쉽습니다.

(주의! Preview 환경에 custom Domain을 적용하려면 Amplify App에 루트 도메인이 적용되어 있어야 합니다.)

 

Amplify Console에서 '도메인 관리' 페이지로 들어갑니다.

해당 페이지에서 '하위 도메인 관리' 버튼을 누르면 하위 도메인을 설정할 수 있는 페이지가 나오고 하단에 '패턴과 일치하는 브랜치 이름에 대한 하위 도메인을 자동으로 생성' 체크박스가 있습니다. 이 버튼을 클릭하면 패턴을 입력하는 텍스트 필드가 나오는데 기본값이 이미 입력되어 있습니다. 이를 수정없이 그대로 두고 '업데이트' 버튼을 누르면 설정은 끝입니다.

 

이후로 Preview 환경을 만들면 커스텀 도메인이 적용된 Preview URL을 볼 수 있습니다. 아래 이미지에서 pr-24는 하위 도메인 설정 전이고, pr-28은 하위 도메인 설정 후 입니다. 역시 알 수 없는 Amplify App ID(가려 놓은 부분)가 붙은 URL보다는 내가 가진 도메인을 보았을 때 어떤 서비스인지 바로 인지됩니다.

 

참고자료

- 첫 Amplify Console 소개 포스팅

  - https://walkinpcm.tistory.com/11

- Amplify Console을 이용해서 개발환경을 개선한 경험을 공유한 사내 블로그 포스팅

  - http://blog.hwahae.co.kr/all/tech/tech-tech/3848/

- Preview 주소를 Custom Domain으로 이용하는 방법을 안내하는 공식 문서

  - https://docs.aws.amazon.com/amplify/latest/userguide/to-set-up-automatic-subdomains-for-a-Route-53-custom-domain.html