토이 프로젝트 진행 도중 프론트는 netlify 배포, 백엔드는 AWS Elastic Beanstalk로 배포하다 보니 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 오류가 발생하였다.
프론트 서버에서는 HTTPS를 지원하고 백엔드는 HTTP만 지원하는 환경이다 보니 프론트에서 백엔드로부터 API를 받을 수가 없었다.
* 최신 브라우저들에서는 보안을 위해 https 에서 http로 요청한 리소스에 대해서는 차단한다.
HTTPS를 적용하기 위해 가비아에서 .store 도메인 구입하고 처음에는 Route53 DNS를 통해 인증서를 발급받았으나, AWS 비용이 발생해서 가비아 DNS로 설정하였다.
AWS Elastic Beanstalk에 HTTPS 적용하는 방법을 알아보자
1.
AWS Certificate Manager(ACM) 접속 후 로그인, 인증서 요청으로 이동한다.

퍼블릭 인증서 요청을 한다.

자신이 소유한 도메인을 입력한다. (ex: *.example.store)
검증 방법은 원하는 방식으로 선택하면 되는데 DNS 검증 방식으로 진행한다.

인증서 나열에서 자신이 신청한 인증서 ID 클릭한다.

도메인에 CNAME 이름, CNAME 값이 정상적으로 나오면 1단계는 완료.

2.
도메인 DNS 설정을 하러 도메인을 구매한 사이트로 이동한다.
가비아에서 구매한 도메인이기 때문에 가비아-My가비아-서비스 관리로 이동한다.

DNS 정보로 이동한다.

DNS 관리로 이동한다.

DNS 설정으로 이동한다.

타입은 CNAME, 호스트 이름은 AWS Certificate Manager(ACM)에서 발급받은 CNAME 이름, 값/위치는 CNAME 값을 입력하고 확인, 저장한다.
* AWS Certificate Manager(ACM)에서 발급받은 CNAME 이름은 _12312312312123.example.store 구성되어 있는데 도메인은 제거하고 _12312312312123만 가비아 호스트에 입력한다. CNAME 값은 동일하게 입력하면 된다.

AWS Certificate Manager(ACM)에서 인증서 상태가 검증 대기 중에서 발급됨으로 바뀌면 정상적으로 인증서가 발급되었다.
* 10~30분 정도 지나면 자동으로 변경된다.


DNS 설정에서 추가적으로 타입 CNAME, 호스트 이름은 원하는 이름, 값/위치는 Elastic Beanstalk 배포한 도메인 주소를 입력하고 확인 후 저장한다.
* 호스트 이름을 test로 한다면 test.자신의.도메인 접속하면 Elastic Beanstalk 배포한 도메인 주소로 연결된다.

3.
Elastic Beanstalk 접속 후 환경으로 이동한다.

자신이 설정한 환경 이름을 통해 이동한다.

구성에서 인스턴스 트래픽 및 조정 편집으로 이동한다.

리스너에서 리스너 추가로 이동한다.

리스너 포트는 443, 프로토콜은 HTTPS, SSL 인증서는 AWS Certificate Manager(ACM) 발급받은 인증서 선택, SSL 정책 선택 후 저장한다.

맨 아래 하단에서 적용한다.

위의 과정 모두 정상적으로 진행 후 가비아 DNS에서 설정한 호스트 이름으로 접속하면 Elastic Beanstalk 배포한 환경에 HTTPS 적용되어 접속된다. (ex: https://test.자신의.도메인)
* Route 53를 이용한 방법
* 호스팅 영역 및 레코드, 쿼리 비용 발생
Route 53 접속 후 호스팅 영역으로 이동한다.

호스팅 영역 생성으로 이동한다.

자신의 도메인을 입력 후에 호스팅 영역을 생성한다.

값 / 트래픽 라우팅 대상에 있는 주소 4개를 가비아 네임서버 설정 호스트명에 입력 후 저장하고 레코드 생성으로 이동한다.


레코드 이름에 원하는 이름을 설정, 별칭을 활성화한다.
Elastic Beanstalk 환경에 대한 별칭, 아시아 태평양 서울, Elastic Beanstalk 도메인 주소를 선택하고 레코드 생성한다.

글 상단 1. AWS Certificate Manager(ACM) 설명에 따라 인증서를 요청하고 Certificate Manager에서 인증서를 나열하고 인증서 ID로 이동해 Route53에서 레코드 생성을 선택한다.


레코드를 선택하고 레코드 생성을 선택한다.

AWS Certificate Manager(ACM)에서 인증서 상태가 검증 대기 중에서 발급됨으로 바뀌면 정상적으로 인증서가 발급되었다.
글 상단 3. Elastic Beanstalk을 따라 하면 Elastic Beanstalk 배포한 환경에 HTTPS 적용되어 접속된다.
'개발 > 기타' 카테고리의 다른 글
| Github으로 따라 하는 버전 관리 메모 (0) | 2023.05.26 |
|---|---|
| AWS 프리 티어 한도 초과로 Koyeb으로 배포하기 (0) | 2023.05.24 |
| 스파르타코딩클럽 웹개발 종합반 5주차 - AWS (0) | 2023.05.12 |
| 스파르타코딩클럽 웹개발 종합반 4주차 - Flask, GET, POST (0) | 2023.05.11 |
| 스파르타코딩클럽 웹개발 종합반 3주차 - Python, 크롤링, mongoDB (0) | 2023.05.10 |