[Route 53 + ALB활용] http 프로토콜 사용으로 인한 HTML5 Geolocation API 제한 트러블 슈팅 (만남의 광장)

- 문제상황

1. 서비스 프로젝트상, 이용자의 위도,경도 데이터를 바탕으로 서비스가 전개되기 때문에 사용자 로그인 시도 시 HTML5 Gelocation을 활용하여 위치 권한정보를 요청한 후, 허용할 시 메인화면으로 넘어가게 세팅해놓았음

 

2. localhost 단계에서는 로그인 시도 시 위치정보 허용기능이 이상없이 작동했으나 AWS 서버를 통해 배포한 후에는 작동하지 않아 메인화면으로 넘어가는 과정이 불가능해짐

 

 

- 이유

1. HTML5 Geolocatino API는 http 프로토콜에서 사용이 제한되어있었음

-> https와 같이 보안설정이 된 사이트가 아닌 경우, getCurrentPosition()과 watchPosition()과 같은 HTML5 Geolocation api를 사용하지 못하게 세팅되어 있었음.

 

참조링크

https://medium.com/witinweb/http-%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C-%EC%82%AC%EC%9A%A9%EC%8B%9C-html5-geolocation-api-%EB%93%B1-%EC%9C%84%EC%B9%98%EC%A0%95%EB%B3%B4-%EC%82%AC%EC%9A%A9%EC%A0%9C%ED%95%9C%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-e024772cc280

 

 

- 해결법

1. http 배포환경을 https로 변경!!

-> 이를 위해 SSL 인증서를 발급받은 도메인을 활용해야할 것으로 판단

 

준비물

1. SSL인증서를 발급받은 도메인

-> AWS에서 지원하는 도메인을 쓰려했으나 금액적인 부담이 있어서, 이전에 가비아에서 구매했던 도메인을 AWS에 연동하여 사용하고자 함.

적용방법

1. AWS Route 53 -> 호스팅 영역 생성클릭 -> 가비아에서 구매한 도메인 이름으로 아래 빈칸 채움

 

2. 이후 레코드 유형 NS, SOA로 생성이 된 것을 확인.

 

3. 가비아로 넘어가 해당 도메인의 네임 서버 설정에서 NS유형의 4개 값을 1,2,3,4 차에 넣어줌

(NS 유형의 값을 넣을 때, 마지막 부분의 . 는 제외하고 넣어줘야함)

 

4. 네임서버 등록 후 AWS의 ACM 서비스 클릭

(웹사이트에서 사용하는 SSL/TSL 인증서를 발급 및 관리해주는 서비스)

 

5. 퍼블릭 인증서 선택 후 다음 클릭

 

6. 구매한 도메인 이름 적은 후 DNS 검증 선택

(ex. 인증서에 다른 이름 추가를 클릭하여 productworld.kr 과 *.productworld.kr 모두 적어도됨

*.productworld.kr이면 api.productworld.kr, web.productworld.kr등등 어떤 문자열도 받을 수 있는 서브도메인으로 인증서를 발급해준다)

 

(DNS 검증을 선택할경우 ACM에서 CNAME을 발급해줌)

 

7. 요청 진행 후 아래와 같이 검증 대기 중인 인증서 확인가능. 검증 완료시키기 위해 위에 언급한 CNAME 등록 절차가 필요함

 

8. 인증서 들어가서 아래와 같은 CNAME정보 확인 가능함. 해당 페이지에서 Route 53에서 레코드 생성을 클릭

 

9. 레코드를 생성해준뒤 Route53으로 이동하면 CNAME이 등록된 것을 확인할 수 있음

 

10. AWS ALB 로드밸런싱 생성클릭

• ALB : HTTP/HTTPS 트래픽 로드 밸런싱
• NLB : TLS/UDP/TCP 트래픽 로드 밸런싱
• GLB : GENEVE를 지원하는Third-pary applliance 로드 밸런싱

 

11. 이름 설정 및 가용영역 설정

 

12. 보안그룹 및 리스너 및 라우팅 설정

Listener에서 특정 포트를 리스닝하며 원하는 곳으로 라우팅되도록 설정진행

이때 타겟그룹을 생성하여 리스닝할 인스턴스 그룹을 생성해야함

(보안그룹은 443 port에 대한 접근이 인바운드에 허용된 것으로 설정해야함)

 

13. Create target group 을 선택해 대상그룹을 생성

 

14. Protocol은 HTTP로 설정해서 사용

Protocol은 로드밸런서가 대상 그룹에 트래픽을 전달할 때 어떤 포트로 전달할 것인지를 선택하는 것임

(필자는 80포트를 사용 중이니 80포트로 전달할 것임)

 

15. 생성한 타겟그룹으로 대상 그룹을 지정한 뒤, AWS Certificate Manager에서 만든 인증서를 선택 후 로드밸런서 생성

 

16. Route 53으로 이동 후 레도크 생성 진행 (DNS 설정)

 

17. 아래와 같이 설정 후 이전에 만든 로드 밸런서를 선택하여 레코드 생성

해당 도메인은 레코드 이름에 있는 IP주소를 바라보고 있으며, 트래픽은 라우팅 대상은 이전에 만든 로드밸런서이다.

 

18. 레코드 생성 후 이전에 만들었던 대상그룹 들어가보면, 상태체크가 Healthy한 것을 확인가능할 것임.

(만약 Unhealthy라면 무언가 잘못된 것이니 원인 파악을 해야함)

 

- 해결 결과

1. https로 연결완료!

2. HTML5 Geolocation API사용 가능해짐!

- 번외 해결법

혹여나 https 설정을 했는데도 스크립트가 정상 작동하지 않을 경우 아래와 같은 상황인지 체크해야함.

 

1. HTTPS로 보호된 사이트에서 HTTP로 요청된 스크립트가 포함되어 있다면 아래 정보에 따라 수정 필요함

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

위와 같이 되어있다면 아래와 같이 수정해야함

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 

이유

> HTTPS는 인터넷을 통해 전송되는 데이터를 암호화하는 보안 프로토콜인데 비해 HTTP는 보안되지 않은 프로토콜이므로 HTTPS에서는 HTTP 요청이 차단됨. 그러니 HTTPS 사이트에서는 HTTPS를 사용하는 스크립트를 사용해야함

 

 

참고링크

https://haksae.tistory.com/m/198

[AWS로 HTTPS 설정]

https://hannut91.github.io/blogs/route53/gabia

가비아에서 구매한 도메인을 AWS Route53에서 호스팅하기 – Yunseok's Dev Blog