이번 글에서는 Amazon S3 를 활용하여 구성한 정적 웹 사이트를 AWS Amplify 를 통해 원하는 도메인과 연결할 수 있도록 배포하는 방법에 대해 알아보려고 합니다.
AWS 콘솔의 경우, 자주 업데이트를 하는 편이라 UI가 조금 달라질 수 있지만 내용은 동일한 점 참고 부탁드립니다.
1. 배포할 버킷 선택
🪣 1. AWS 콘솔 로그인 후, Amazon S3 콘솔을 열어 배포를 진행할 정적 웹 사이트 호스팅이 설정된 버킷을 선택합니다.
🪣 2. 버킷 내 속성(Properties) 탭 선택 후 페이지 하단의 [정적 웹 사이트 호스팅]에서 ‘Amplify 앱 생성’을 선택합니다.
2. Amplify 콘솔로 이동하여 배포 진행
🪣 1. Amplify 콘솔로 이동하여, ‘S3로 배포’ 페이지에서 아래와 같이 적절한 값을 입력한 후 ‘저장 및 배포’를 선택합니다.
- API 이름 : 앱 또는 웹 사이트의 이름을 입력합니다.
- 브랜치 이름 : 앱의 백엔드 이름을 입력합니다.
- 호스팅할 객체의 S3 위치 : S3 찾아보기를 선택하여 배포할 정적 웹 사이트 호스팅이 설정된 버킷을 찾아 선택합니다.
🪣 2. ‘저장 및 배포’ 를 선택하면 아래와 같이 배포 진행중 화면이 뜨게 됩니다.
🪣 3. 배포가 성공적으로 완료되면 아래와 같은 설정 화면이 출력됩니다.
3. Route 53 호스팅 영역 생성
⚠️ 아래 내용을 진행하기 전에 정적 웹 사이트와 연결할 도메인을 미리 DNS 사이트를 통해 구매하시는 사전 작업이 필요합니다.
🪣 1. Route 53 서비스 콘솔에 접속하여 ‘호스팅 영역(Hosted Zone)’ 메뉴 선택 후 ‘호스팅 영역 생성’을 선택합니다.
🪣 2. 구입한 도메인을 ‘도메인 이름’에 입력 후 ‘호스팅 영역 생성’을 선택합니다.
🪣 3. 정상적으로 원하는 도메인에 대해 Route 53에 호스팅 영역 생성이 완료되었습니다.
🪣 4. NS(네임서버) 레코드 값 4개에 대하여 도메인을 구입한 사이트에서 NS 레코드로 등록합니다.
4. 사용자 지정 도메인 설정
Route 53 에서 생성한 호스팅 영역 도메인과 S3 에서 만든 정적 웹 사이트를 Amplify 를 통해 연결해보도록 하겠습니다.
🪣 1. Amplify 앱 화면으로 돌아가 ‘사용자 지정 도메인 추가’ 를 선택합니다.
🪣 2. 사용자 지정 도메인 추가 화면에서 ‘도메인 추가’를 선택합니다.
🪣 3. Route 53 에서 설정한 도메인을 선택 후 ‘도메인 구성’을 선택합니다.
🪣 4. 다음 페이지에서 필요에 따라 ‘리디렉션 설정’ 선택 후 ‘도메인 추가’를 설정합니다.
사용자 지정 SSL 인증서의 경우, Amplify 관리형 인증서 또는 사용자 지정 SSL 인증서를 사용할 수 있습니다.
Amplify 관리형 인증서를 선택 시, 아래와 같이 SSL 생성 및 구성되는데 수 분이 소요됩니다.
4. 정적 웹 사이트 배포 확인
🪣 위 과정이 모두 진행이 완료된 이후에 정상적으로 정적 웹 사이트와 사용자 지정 도메인이 연결된 것을 확인할 수 있습니다.
5. 마무리
지난 ‘Amazon S3 를 활용한 정적 웹 사이트 구성하기 – 1’ 글에 이어 이번 ‘Amazon S3 를 활용한 정적 웹 사이트 구성하기 – 2’ 글에서는 호스팅한 정적 웹 사이트를 AWS Amplify 를 통해 배포하고 원하는 사용자 지정 도메인과 연결해보는 실습을 진행해보았습니다. 내용 중 궁금하신 사항이 있으실 경우 언제든지 댓글이나 메일로 연락 주시기 바랍니다.
DS는 많은 클라우드 경험을 통해 서비스 도입에 도움을 드릴 수 있습니다. 관련하여 문의 사항이나 기술 지원이 필요하신 경우 NDS Sales팀으로 연락주시길 바랍니다.
SA 김다연