Mixed Content 에러...
프론트를 https로 배포 후 http로 서버와 통신하려하면 발생하는 문제다.
이 문제를 해결하기 위해서는 백엔드에서 http -> https로 접근할 수 있게 설정을 해줘야한다.
필자는 Spring Boot로 api를 개발하여 AWS EC2에 배포한 상황이였고 https로 설정하기 위해 찾아본 방법 중 간단하고 저렴한 방법에는 아래와 같은 방법들이 있었다.
1. AWS CloudFront
먼저 AWS의 CloudFront를 활용한 방법이다.
클라이언트가 https로 CloudFront와 통신을 하고 CloudFront와 api를 제공하는 주체는 http로 통신하는 것이다.
ACM을 사용하면 ssl 인증서를 공짜로 이용할 수 있다.
후술하겠지만 CloudFront는 CDN서비스기에 붙이면 무조건 좋다. 아래 Cloudflare CDN 방식과 유사하다고 생각하면 된다.
2. AWS LoadBalancer
다음으로 대부분 많이 사용하는 로드밸런서를 이용한 방식이다.
이것도 마찬가지로 클라이언트가 로드밸런서와 통신할 때는 https로 통신하고 로드밸런서와 ec2는 http로 통신한다.
위 방식과 더불어 https 통신을 origin(웹서버)에서 설정할 필요 없이 인프라 레벨에서 해결할 수 있다는 것이 큰 장점이다.
3. Cloudflare CDN
마지막으로 Cloudflare CDN을 사용한 방식이다.
AWS CloudFront와 같이 CDN 서비스기에 방식이 유사하다. Cloudflare를 서버 앞단에 붙이고 클라이언트는 Cloudflare에 요청을 보내게 하는 것이다. 이를 통해 클라이언트는 https로 통신하게 하고 Cloudflare와 서버는 http로 통신을 유지할 수 있다.
이 포스팅에선 위 세 가지 방식 중 Cloudflare를 통해 무료로 https 설정하는 방법을 소개하고자 한다.
아직 CDN에 대해 잘 모른다면 아래 포스팅을 보고 오는 것을 추천한다! 위 과정을 이해하는데 도움이 될 것이다.
CDN이란? (What is Content Delivery Network?)
CDN, CDN 자주 들어봤는데 간단하게만 이해하고 명확히 그 개념을 알지 못했다. 이번 포스팅을 통해 CDN에 대해 자세히 알아보도록 하겠다! CDN (Content Delivery Network) CDN은 Content Delivery Network의 준말로
kbwplace.tistory.com
Cloudflare는 R2 덕에 매우 뜨게 된 CDN 업체로, R2는 AWS의 S3와 유사하게 정적 파일을 저장하는 서비스로 생각하면 된다.
R2는 비용면에서 무척 합리적인 선택인데, 우선 AWS의 S3와 비교할 때 파일 저장 시 드는 비용은 크게 차이가 없다. 하지만 S3는 저장한 파일을 읽는데 드는 비용이 꽤 큰데 반해 R2는 비용을 받지 않는다. 이 부분에서 경쟁력이 생겼다.
실제로 인스타 같은 곳에서 어떤 콘텐츠가 히트쳐서 100만명이 조회하여 S3에서 파일을 100만번 불러올 경우 약 54000불이 나간다. (한국돈으로 약 6500만원...😮)
이에 반해 R2는 0원이기에 비용면에서 어마어마한 절감효과를 누릴 수 있다. (R2 출시 후 주가가 많이 올랐다는 사실..)
이제 이 Cloudflare를 활용해 https로 설정하는 방법에 대해 소개하겠다.
1. (무료) 도메인 발급
Cloudflare에서 https를 설정하기에 앞서 클라이언트에서 Cloudflare에 접근하기 위한 도메인이 필요하다.
보통 도메인은 유료로 구입해야하나, 아래 사이트에서 무료로 도메인을 발급받을 수 있다.
Freenom - A Name for Everyone
Sorry, is not available. IMPORTANT NOTICE: Because of technical issues the Freenom application for new registrations is temporarily out-of-order. Please accept our apologies for the inconvenience. We are working on a solution and hope to resume operations
www.freenom.com
단, 무료이기에 안정성은 조금 떨어진다고 한다.
실 사례로 사용중에 다른 사람에게 도메인을 뺏긴 사례도 있다고 한다. 많이 발생하는 문제는 아니나 실제 서비스할 예정이라면 가비아나 godaddy 같은 곳에서 api 통신용 도메인을 구매하는게 좋을 것 같다.
할인 받으면 몇천원, 심지어 500원에도 살 수 있다.
필자는 가비아에서 3000원에 api 통신용 도메인을 구입해주었다.
2. Cloudflare 설정
Cloudflare 홈페이지
Cloudflare의 CDN, DNS, DDoS 보호 및 네트워크 보안으로 안전한 인터넷 환경을 구축하세요.
www.cloudflare.com
Cloudflare에 접속해 로그인하면 아래와 같은 화면이 나온다.
여기서 Add a Site를 눌러 새 사이트를 추가해준다.
새 사이트를 추가하고나면,
요금제가 나오는데 무료를 선택해준다.
무료버전도 Global CDN을 지원하며, SSL을 지원한다.
Continue를 누르면 해당 DNS record를 스캔한다.
그리고 위와 같이 자동으로 DNS Record를 불러온다.
만약 content에 ec2의 public ip가 제대로 들어가지 않았다면 직접 붙여넣으면 된다.
Continue를 누르면 위와 같이 뜨는데 하라는대로 순서대로 하면 된다.
도메인을 구입한 곳에 간 뒤, 도메인 관리에서 3번에 적혀있는 네임서버들을 지우고 4번에서 안내하는 cloudflare의 네임서버를 붙여넣기 하면 된다.
필자는 가비아에서 도메인을 구입했기에 가비아의 DNS 관리 페이지에서 네임서버를 설정해줬다.
이제 완료되었다. 도메인을 구입한 곳에서 네임서버를 설정해줬다면 위 이름 서버 확인 버튼을 눌러 알려주자.
DNS가 업데이트되는데 시간이 걸리기에 조금 시간이 많이 걸린다. (도메인 구입 사이트에 따라 조금씩 다름. 가비아의 경우 최대 48시간)
하지만 보통 30분~1시간 이내에는 되는 것 같다.
시간이 지나고 DNS가 업데이트 되면 위와 같이 활성표시가 된다.
이제 https로 접근할 수 있게 되었다.