[AWS] EC2로 배포한 서버를 HTTPS로 연결하기

 

❗️어떤 문제가 발생했을까

Mixed Content: The page at 'https://yeshyun-git-master-shgus1224.vercel.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://~~’. This request has been blocked; the content must be served over HTTPS.

포트폴리오 사이트 만들고 AWS에 서버를 배포한 이후 에러가 발생했다.

 

이전

 

이후

 

클라이언트단에서 사진을 불러오는 방법으로 간단히 해결하면 되지만

나름 서버공부를 해보겠다고 자신감 있게 서버를 구축하고 배포했는데 에러가 발생했다.

분명 로컬에서는 잘 작동했는데!!

 

Vercel에 배포된 클라이언트와 AWS에 배포한 node 서버 사이 소통이 잘 안되는 문제였다.

 

Mixed Content: The page at 'https://yeshyun-git-master-shgus1224.vercel.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://~~’. This request has been blocked; the content must be served over HTTPS.

 

❓ 왜 오류가 발생했을까

이 에러는 암호화되지 않은 HTTP 서버에 암호화된 HTTPS 페이지를 요청할 때 발생한다.

참고로 Vercel로 배포한 클라이언트는 HTTPS, API는 HTTP다.

 

해당 경고를 제거하기 위해서는 html 파일에 아래 메타 태그를 추가하면 된다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 

하지만 여전히 사진을 불러오지 못하고 다른 에러가 발생했다.

net::R_SSL_PROTOCOL_ERROR

 

이 오류를 해결하기 위해서는 배포한 서버가 http로 설정되어 있어서, 이를 https로 수정해야된다.

이를 위해서는 도메인을 사서 AWS 로드밸런서를 이용해야한다.

 

💻 어떻게 해결할까

 

1. 가비아에서 도메인 구매

https://www.gabia.com/

웹을 넘어 클라우드로. 가비아

API 주소는 외부로 노출되지 않고 학생이어서 저렴하고 무난한 .shop 도메인을 구매했다.

 

2. Route 53에 접속하여 호스팅 영역생성

https://aws.amazon.com/ko/route53/

Amazon Route 53 | DNS 서비스 | AWS

AWS Route 53에 접속하여 '호스팅 영역 생성'을 클릭한다.

 

'도메인 이름'란에 구매한 도메인 이름 입력 및 '퍼블릭 호스팅 영역'을 클릭한다.

3. 레코드 생성

호스팅 영역에서 자신이 입력한 도메인을 클릭하면 다음과 같은 페이지에 들어갈 수 있고 '레코드 생성' 버튼을 클릭한다.

값 부분에 자신이 생성한 'EC2 PUBILC IP'값을 기재한다.

 

그 후 레코드 생성 버튼 클릭한다.

 

4. 가비아에서 구매한 도메인과 연결

NS 유형에 나와있는 4개의 값들을 가비아 도메인 네임서버에 붙여넣으면 된다.

 

가비아 네임서버 목록은 아래와 같이

'My 가비아 -> 본인이 구매한 도메인의 관리버튼 -> 네임서버 설정' 목록 에서 확인할 수 있다.

5. AWS Certificate manager 인증서 요청

AWS Certificate manager 인증서 요청인증서 요청하고 기본설정대로 다음을 선택하면 도메인 이름을 기재하는 창이 나온다.

 

아까 가비아에서 구매한 도메인 명을 입력한다.

그 후 다른 설정은 건드리지 않고 다음으로 넘어간다.

그러면 다음과 같이 '검증대기 중' 상태를 확인할 수 있다.

인증서 아이디를 클릭하면 ‘Route 53에서 레코드 생성’ 버튼을 확인할 수 있고 이를 클릭한다.

그럼 자동으로 Route 53에서 설정한 도메인을 인식하여 인증이 진행된다!

 

6. Target Group 인증서 요청

로드 밸런서에 적용하기 위한 Target Group을 만들어줘야한다.

EC2 페이지에서 왼쪽 하단의 로드 밸런싱 부분에 대상 그룹을 선택한다.

여기서 Create target group 버튼을 눌러준다.

Choose a target type에서 instances를 선택한다.

 

여기서 주의할 점!

포트 번호는 직접 실행할 서비스의 포트번호이다.  

즉 본인이 서버의 포트를 8080번을 사용한다면 80번이아닌 8080번을 넣어야 한다.

 

 

적용할 인스턴스를 체크하고 아래의 Include as pending below 버튼을 눌러준다.

그 후 Create target group 버튼을 눌러 target group을 생성해준다.

 

7.로드밸런서

ec2-로드 밸런서에 들어와서 로드 밸런서 생성 버튼을 눌러준다.

맨 왼쪽의 'Application Load Balancer'를 클릭한다.

그 후 원하는 'Load balancer name'을 입력한다.

 

이 부분에서 주의할 점이 있다.

가용영역을 선택하는 부분인데 본인의 인스턴스의 가용영역이 반드시 포함되어야 한다.

가용영역은 ec2의 인스턴스에서 확인이 가능하다.

보안 그룹은 본인의 인스턴스와 같은 보안 그룹을 사용하면 된다.

여기서 또다른 주의사항은 보안 규칙에 https이 등록되어 있어야한다.

Listeners and routing 가장 핵심인 부분이다. 

 

HTTP, HTTPS 프로토콜 리스너에 위에서 만든 'Target Group'을 선택해준다.

 

그 후 앞서 받은 인증서를 등록을 해줍니다. 필자는 인증서 등록에 시간이 걸려서 여기서 조금 지체되었다. (약 3시간)

인증서 발급 상태가 발급됨으로 변경되었으면 다시 이어서 진행하면된다.

인증서를 선택하고 다음을 클릭하면

드디어 로드밸런스 생성이 완료된다.

 

8. 도메인 설정

Route53으로 돌아가서 도메인 이름을 눌러준다.

 

그럼 다음과 같은 화면이 나올텐데 '레코드 생성 버튼'을 클릭한다.

 

필자는 백엔드 도메인을 위해 앞에 api를 입력했다.

 

레코드 유형은 그대로 A로 두면되고

별칭 버튼을 눌러서 위와같이 선택한 후 3번째 줄에 아까 만들어놓은 로드 밸런서를 등록한다.

 

여기서 서울로 지정하고 로드밸런서를 선택하려고 했는데, 목록이 나오지 않는 문제가 있었다.

여러가지를 시도했는데.. 결론은 필자의 인스턴스 리전은 유럽(스톡홀름)이었다(!)

리전 수정 후 다시 시도하니 목록이 잘 나오는 것을 확인할 수 있었다.

 

마지막으로 맽 밑 다음을 클릭하면 끝이났다.

 

👍 결과

 

그 후 포스트맨을 이용하여 테스트를 진행해보았는데 문제가 해결되지 않았다.

서칭 결과 보안그룹에서 https랑 http를 열어주지 않아서 발생한 문제였고 보안그룹 목록에 들어가 수정만 해주면 해결된다.

 

 

 

다음과 같이 잘 나오는 것을 확인할 수 있다!

 

지금은 포트폴리오 사이트를 재개편 하면서 서버를 사용하지 않지만, AWS를 이용해서 로드밸러서 기능을 사용해볼 수 있는 좋은 기회였다.

HTTP/HTTPS 네트워크 관련해서 공부를 많이 해봐야겠다