13강 Cloud Flare를 이용한 HTTPS 설치 및 최종 배포

※ 기존 소스코드의 문제점 확인 ※

  가장 먼저 리액트(React) 소스코드에서 API 경로를 AWS EC2의 경로로 바꾸어보도록 하겠습니다.

  이후에 기존에 존재하던 build 폴더를 제거한 뒤에 다시 yarn build 명령어를 수행합니다.

  그리고 firebase deploy 명령어를 입력하여 배포를 진행하도록 하겠습니다.

  이후에 배포된 경로로 접속하면 [워드 클라우드]를 생성하고자 할 때 다음과 같이 HTTPS 미설정 오류 메시지가 출력됩니다. 이러한 오류 메시지는 파이어베이스가 HTTPS를 지원하지만 우리의 API 서버는 HTTPS를 지원하지 않기 때문에 발생합니다. 따라서 우리의 플라스크(Flask) 웹 서버도 HTTPS를 지원하도록 처리해야 합니다.

※ FREENOM 서비스를 이용해 무료 도메인 사용하기 ※

  ▶ 프리넘 서비스: https://freenom.com

  프리넘 서비스는 무료로 도메인을 사용할 수 있도록 해줍니다. 결과적으로 우리가 HTTPS를 사용하기 위한 초석이 되어주므로 일단 도메인부터 구매해보도록 하겠습니다. 저는 회원가입 및 로그인 이후에 wordcloudpython라는 도메인을 사용하겠다고 검색해보도록 하겠습니다.

  이후에 다음과 같이 .tk 도메인을 채택하겠습니다.

  저는 다음과 같이 무료로 도메인을 사용해보도록 하겠습니다.

  구매 이후에는 다음과 같이 [My Domains] 탭에서 자신이 구매한 도메인을 관리할 수 있습니다.

  다음과 같이 타겟(Target) 주소로 우리의 AWS EC2 서버 주소를 입력해주시면 됩니다.

  이후에는 통상적으로 약 5분 뒤에 도메인 설정이 완료됩니다. 다음과 같이 해당 도메인으로 접속했을 때 플라스크 API가 동작합니다.

※ 도메인에 HTTPS를 적용하기 위해 Cloud Flare 사용하기 ※

  ▶ Cloud Flare 가입: https://dash.cloudflare.com/sign-up

  클라우드 플레어에 가입한 이후에 HTTPS를 적용할 수 있습니다.

  이후에 다음과 같이 우리가 사용하게 된 무료 도메인을 사이트(Site)로 추가하시면 됩니다.

  이후에 클라우드 플레어가 자동으로 DNS 레코드를 얻어오게 됩니다. [Next] 버튼을 눌러주세요.

  이후에 무료로 서비스를 이용하기 위해 무료 플랜(FREE PLAN)을 설정해주겠습니다.

  이후에 다음과 같이 wordcloudpython.tk라는 우리의 도메인을 52.79.163.195라는 AWS EC2 IP 주소로 연결해주었습니다. 이로써 결과적으로 Cloud Flare의 DNS 서버에 wordcloudpython.tk라는 쿼리가 들어오면 52.79.163.195로 연결을 진행해주는 것입니다.

  이후에 다음과 같이 기존의 네임 서버(Name Server)를 바꾸어주라는 메시지가 나오게 됩니다. 다음의 그림에서 요구하는 대로 FREENOM 서비스의 네임 서버를 매핑해주시면 됩니다.

  따라서 다음과 같이 [Nameservers] 탭에서 커스텀 네임 서버(Custom Name Server)로 클라우드 플레어의 DNS 주소를 넣어주시면 됩니다.

  이후에 Cloud Flare에서 DNS 설정이 완료될 때까지 기다리시면 됩니다. [Re-check now] 버튼을 누른 뒤에 약간의 시간을 기다리시면 됩니다.

  결과적으로 다음과 같이 설정이 완료되면 이메일로 설정 완료 메시지가 나온다고 하네요. 일반적으로 1시간 안에 설정이 완료됩니다.

  결과적으로 잠시 후에 Cloud Flare에서 새로고침을 해보시면 설정이 완료되어 정상적으로 동작하고 있다는 것을 확인할 수 있습니다.

  기본적으로 Cloud Flare는 HTTPS로 요청(Request)을 받아서 우리의 AWS EC2 서버의 80번 포트로 패킷을 전달해주게 됩니다. 따라서 이제 우리는 플라스크(Flask) 웹 서버를 80번 포트로 열어야 합니다. 그러므로 보안 그룹에서 80번 포트를 허용해주시면 됩니다.

  당연히 플라스크의 소스코드도 80번 포트를 이용하도록 수정하셔야 해요.

  결과적으로 다음과 같이 80번 포트로 동작하도록 서버를 구동시키면 됩니다.

※ HTTPS 접속 확인 ※

  결과적으로 다음과 같이 HTTPS로 접속을 해보시면 성공적으로 플라스크 서버가 동작하는 것을 확인할 수 있습니다.

  따라서 이제 API 서버의 URL을 새로운 경로로 바꾸어 다시 배포해주시면 됩니다.

  최종적으로 AWS EC2에서 플라스크 웹 서버를 다시 구동시켜주도록 하겠습니다.

  이후에 다음과 같이 성공적으로 호스팅된 파이어베이스 서버에서 API가 정상적으로 동작하는 것을 확인할 수 있습니다.