프론트 프로젝트 배포에 성공하여 안도하던 찰나, 큰일이 발생하였다.
우리는 사용자의 목소리를 분석하여 노래를 추천해주는 서비스를 구현해 보았는데, 이를 위해서는 목소리 녹음 기능이 필수적이였다.
우리는 사용자 PC에서 미디어의 스트림을 얻어내는 MediaStream의 API인 getUserMedia를 사용하였다.
문제는 이 기능이 로컬에서는 잘 동작하였는데, http로 배포한 주소에서는 오류가 발생하였다.
원인을 찾아보니 getUserMedia는 https에서만 동작한다는 설명이 있었다.
이를 해결하기 위해 백 프론트 모두 인스턴스에 https를 적용하기로 하였다.
HTTP
HTTP (HyperText Transfer Protocol)는 텍스트 기반의 통신 규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. HTTP 프로토콜은 정보를 텍스트로 주고받기 때문에 누군가 전송 신호를 인터셉트한다면 데이터 유출로 이어질 수 있다는 점에서 보안이 취약하다.
HTTPS
프로토콜의 동작 방식은 HTTP와 거의 유사하지만 데이터 통신 과정에서 보안요소가 추가되었다는 차이점이 있다. SSL(Secure Sockets Layer)이라는 보안계층이 전송계층 위에 올라가게 되면서 서버와 클라이언트 사이에서 일어나는 통신들이 모두 암호화되게 된다!!
(더 자세한 정보 -> https://rachel-kwak.github.io/2021/03/08/HTTPS.html)
HTTPS란? (동작방식, 장단점)
몇 년 전만 해도 전자 상거래 페이지가 있는 웹사이트에서만 HTTPS를 사용하고 있었다. 그러나 2014년, 구글에서 HTTPS를 사용하는 웹사이트에 대해서 검색 순위 결과에 약간의 가산점을 주겠다고
rachel-kwak.github.io
그럼 이제 녹음 기능을 활용하기 위해 인스턴스에 https를 적용하러 가보자~~
우선 도메인 연결을 위해 무료 도메인을 얻거나 구매하자. 우리는 가비아에서 싼 도메인을 구입하였다.
이제 해당 도메인이 인스턴스에 연결될 수 있는지에 대한 인증 과정이 필요하다.
Route53을 검색 후 위의 Route 53을 클릭하여 들어가준다.
그 후 사이드바의 호스팅 영역을 클릭한 후 호스팅 영역 생성을 눌러준다.
얻은 도메인만 도메인 이름 입력 칸에다 넣어준 후 호스팅 영역 생성을 눌러준다.
그러면 위와 같은 창이 뜨는데 레코드 생성 버튼을 클릭해준다. 레코드 생성 단계에서는 특정 도메인과 그 하위 도메인의 트래픽을 어떻게 라우팅 할지를 지정해주게 된다.
위와 같은 창에서 레코드를 생성하게 된다.
구입한 도메인이 예를들어 example.com 이라 하자. 만약 www.example.com 이라는 하위 도메인에 대한 트래픽을 라우팅하고 싶다면 레코드 이름 란에 www를 입력하면 된다. 우리는 루트 도메인에 대한 레코드를 생성할 것이므로 비워두었다.
값에 해당 인스턴스의 public IP를 입력해준 후 레코드 생성 버튼을 눌러준다.
위의 과정까지 하고 나면 여러 유형의 레코드가 생성된 것을 확인할 수 있다.
간단히 말하자면 NS(네임서버) 레코드를 통해 사용자가 요청을 보내면 A(Address)유형 레코드 정보에 있는 public IP 정보를 반환해주는 식으로 작동된다.
각자 구입한 도메인 정보에서 네임서버를 확인해보자.
가비아 같은 경우 위와 같이 네임서버가 1~4차까지 있다.
이 값을 위의 레코드 생성 결과 나온 레코드에서, NS 유형에 있는 값 4개를 차례대로 넣어줘야 한다.
다 넣어줬다면 AWS 사이트에서 Certificate Manager를 검색해보자.
AWS Certificate Manager(ACM)는 AWS 서비스 및 연결된 내부 리소스에 사용할 공인 및 사설 SSL/TLS(Secure Sockets Layer/전송 계층 보안) 인증서를 손쉽게 프로비저닝, 관리 및 배포할 수 있도록 지원하는 서비스라고 한다.
검색 후 위의 Certificate Manager에 들어가준다.
인증서 요청 버튼을 눌러준다.
따로 건들일 필요 없이 다음 버튼을 눌러주자.
완전히 정규화된 도메인 이름 입력 칸에 구매한 도메인을 입력해준다.
www.도메인, images.도메인과 같이 모든 하위 도메인에 대한 인증서를 요청하고 싶다면 *.도메인의 형식으로 입력해주면 된다.
우리는 레코드 생성 때 하위 도메인에 대한 트래픽을 설정하지 않았으므로 그냥 도메인 이름만 써주었다.
도메인만 입력해주고 요청버튼을 클릭해주자.
Target Group
로드밸런서에 적용하기 위한 Target Group을 지정해줘야 한다. 이에 대한 설명은 뒤에서 짧게...
왼쪽 하단 사이드바에서 대상 그룹을 클릭한다.
그 다음 대상 그룹 생성을 클릭해주자.
대상 유형은 인스턴스로 그대로 냅두고
대상 그룹 이름도 작성해주자.
프로토콜 포트 번호는 실행할 서비스의 포트번호를 말한다!! 우리는 3000으로 설정했으므로 여기서도 3000으로 설정해주었다.
상태 검사는 설정한 경로로 주기적으로 요청을 보내어 상태 테스트를 할 수 있도록 제공하는 것이다. 우리는 우선 pass....
다음을 눌러준 뒤
대상 그룹에 해당되는 인스턴스를 체크해준 뒤, [아래에 보류 중인 것으로 포함] 버튼을 눌러준다.
그 뒤 맨 밑에 대상 그룹 생성 버튼을 클릭해주자.
Load Balancer
다음으로 사이바에 밑에 있는 로드 밸런서를 클릭한 후 로드 밸런서 생성 버튼을 클릭해준다.
맨 왼쪽의 Application Load Balancer 생성 버튼을 클릭한다.
로드 밸런서 이름을 작성해준다. 형식에서만 벗어나지 않으면 자유롭게 지정해도 된다!!
그 다음 가용 영역을 선택해준다. 반드시 해당 인스턴스의 가용 영역이 포함되어야 한다. 가용 영역을 2개 이상 선택하는 것을 권장한다고 한다. 그냥 다 체크해줘도 문제없다!
그런 다음 보안 그룹을 선택해준다. 해당 인스턴스에 적용되어 있는 보안 그룹을 선택해주면 된다.
해당 인스턴스의 인바운드 규칙에 반드시 https 설정이 포함되어 있어야 한다!!
리스너 및 라우팅 설정도 해줘야 한다.
HTTP, HTTPS 프로토콜 리스너에 위에서 만들었던 대상 그룹을 할당해주면 된다.
이처럼 HTTPS를 적용하려면 로드밸런서를 생성해줘야 한다.
로드 밸런서는 서버에 트래픽이 과도하게 몰려 죽는 경우를 대비하여 사용되는 기술이다. 백엔드측에서 매우 효과적으로 사용되지만 프론트에서도 로드밸런싱을 잘 활용해야 하는 경우가 있을까 아직은 잘 모르겠다.
위에서 프로토콜, 포트에따라 지금은 같은 대상 그룹을 지정해 주어서 트래픽 분산 효과는 없지만 만약 각각 다른 대상 그룹을 지정해 준다면 트래픽 분산 효과를 기대할 수 있을 것이다.
아무튼 아까 발급 받은 인증서를 등록해줘야 한다.
인증서에서 아까 발급받은 인증서를 선택해준 뒤 로드밸런서 생성 버튼을 눌러주자.
이제 드디어 마지막 단계이다!!
Route 53으로 돌아가서 도메인 이름을 눌러준다.
그리고 레코드 생성 버튼을 눌러준 뒤
위에서 설명한 바와 같이 레코드 이름을 선택적으로 작성해준다.
그 다음 별칭 토글 버튼을 클릭해보자.
토글이 되면 위와 같이 세팅해주고 세번째에서 아까 만든 로드 밸런서를 선택해준다.
드디어 마지막 클릭이다. 레코드 생성 버튼을 눌러준다.
이때 만약 우리처럼 하위 도메인 지정을 따로 안했다면 레코드 타입이 겹치는 에러가 뜰 것이다.
그런 경우에는 레코드 생성을 하지 말고 public IP가 지정되어있는 A 유형의 레코드를 클릭해준 뒤 편집을 클릭하고 위 버튼 토글 과정부터 그대로 수정해주면 된다!!
이제 결과를 확인해보자.
HTTPS 적용이 잘 된것을 확인할 수 있다!!
물론 로드 밸런서 리스너 생성 시 http로 접근 시에도 같은 대상 그룹을 지정해 줬으므로 접속이 잘 되는 것을 확인할 수 있다.
정말 긴 단계였지만 보안은 매우 중요한 요소이고 https 설정하는 방법은 꼭 알아두면 유용할 것 같다 ㅎㅎ
'FrontEnd > React' 카테고리의 다른 글
Vite + Yarn Berry 구축기 - 2 (4) | 2023.12.07 |
---|---|
Vite + Yarn Berry 구축기 - 1 (4) | 2023.12.06 |
배포 과정 Github Actions 로 자동화하기 (0) | 2023.11.27 |
Docker + AWS EC2 로 프론트 배포하기(2) (4) | 2023.11.26 |
Docker + AWS EC2 로 프론트 배포하기(1) (2) | 2023.11.26 |