https ssl인증서 추가, http -> https 리다이렉트

서브 도메인을 추가하기 위해서 가비아에 있는 회사의 기존 도메인에 A 레코드를 추가하고.. 이것저것 다해봤는데 연결이 안되었다. 심지어 @ 로도 연결된 주소가 없어서 뭔가 이상하다는 생각이 들었다...

 

그러다 문득 AWS에 Route53과 뭔가 연관이 있진 않을까? 라는 생각에 들어가 보았더니 여기서 잔뜩 설정이 되어 있었다. 가비아에서 도메인을 사고 그 도메인을 AWS에서 사용한 것인가..? 근데 그게 가능한가? 아무튼 여기서 레코드를 추가해주었더니 바로 해결 되었다. 

 

먼저 호스팅 영역 클릭 > 도메인 클릭 > 레코드 생성 을 누른 뒤 아래와 같이 해주면

접속이 가능하다!!!!

 

근데 이건 http://로 연결이 되어있어 찜찜하다.. 사내용으로 사용할 것이지만 그래도 뭔가 찜찜하다.. 

그래서 https로 바꾸는 방법을 알아보자!!!

 

결론부터 말하면 https로 바꾸기 위해선 SSL 인증서가 필요하다고 한다.

 

Secure Socket Layer의 약자로 SSL 프로토콜은

간단하게 웹서버와 브라우저 사이의 보안을 위해 만들어졌다.

 

대칭키를 이용하여 암호화 통신을 한다!

HTTP에 SSL 적용을 하여 Https 통신을 하게된다!

따라서 SSL 인증서가 필요한 것이다.

 

원래 좀 복잡한데 AWS에서 간단히 할 수 있다.

 

ACM이라고 치고 들어가서 인증서 요청을 클릭해보자

아까 Route53에서 등록한 도메인 주소를 입력해보자. 나는 서브도메인을 만들고 그 주소를 적었었고, 잘 생성이 되었다.

그냥 도메인이 아니더라도 상관 없나보다!!

지금 생성한 is.correct는 도메인이 없다. 그냥 내가 임의로 만들었다. 생성버튼을 눌러보자

 

없는 도메인이므로 바로 실패가 뜬 것을 확인할 수 있다.  정확히 도메인 이름을 적어주어야한다.!!

잘 생성이 되었다면 클릭하고 route 53에서 레코드 생성 버튼을 눌러보자

제대로 입력했다면 그 다음 화면에서 생성버튼이 활성화 되어있을 것이다. 그 버튼을 누르고나서

 

다시 Route53에 들어가보면 아래와 같이 하나 더 생성이 된 것을 확인할 수가 있다. 

이렇게 생성을 하고 나면 다시 ACM에가면 발급이 완료 된 것을 확인할 수 있다. route 53에서 레코드 생성하지 않으면 아마도 발급이 완료가 안될 것이다. 제대로 그 도메인에 레코드가 생성이 된 것을 확인하고 나서야 발급완료를 해주는 구조 같다.

 

 

그런데 나는 여기서 인스턴스 하나로만 생성했었다.

근데 로드 밸런서를 생성하고 로드 밸런서에다가 http와 https를 설정해보려고 한다.

로드 밸런서의 역할은 많은 요청이 들어왔을 때 적절히 대상그룹에 있는 각 인스턴스들에게 골고루 요청을 분산시켜주는 역할을 하는 것이다.

 

먼저 로드 밸런서를 만들기 위해선 요청을 분산시켜 줄 대상그룹이 필요하다. 물론 대상그룹에 인스턴스가 하나만 있어도 상관은 없다.

 

 

로드 밸런서 생성을 누르고 application load balancer를 선택하자

지그재그로 설정

포트 번호를 일단 80으로 연결해두자. 옆에 대상그룹을 지정해주는 공간이다.

create target group을 눌러보자

 

인스턴스를 선택하고

그룹 이름을 정하고 포트번호를 적어주어야하는데, 여기서 나는 서버에 3000번 포트로 열어두었기 때문에 3000을 적었다. 각각 설정해둔 포트번호를 제대로 적어주어야 한다!!

path에 / 를 적어주자. 이건 서버가 살아있는지 확인하기 위한 것이다. 나는 /로 들어오면 login으로 리다이렉트를 시켜두었다. 그래서 /를 적어도 가능한건가?? 만약 / route에 아무 설정도 안해두어도 health check가 되는 지 잘 모르겠다..

아마 될 것 같긴 한데..

 

미리 생성해둔 인스턴스들을 클릭하고 아까 적어둔 3000번 포트와 아래 버튼을 눌르면 아래로 타겟이 이동된다.

인스턴스들이 미리 생성이 되어있어야 한다!!

그리고 아래 버튼을 누르면 대상그룹이 생성이 된다.

아까 로드밸런스 화면으로 다시 돌아와서 방금 만든 대상그룹을 선택한 뒤 로드 밸런서를 만들어 주자.

로드 밸런서를 누르고 아래 dns에 있는 주소를 url에 적으면 인스턴스에 바로 접속이 가능하다

이제부터 로드밸런서에 80번 포트 http로 접속이 되고있는데 이걸 443포트 http로 접속되도록 해볼 것이다.

방금 만든 로드 밸런서에 들어가서 리스너 추가 클릭

 

포트번호 443 아까 만들어둔 ACM을 적용해줍시다.

 

이렇게 설정했고 이제 https://를 붙여서 들어가보자@@@~~~~

 

어 ?? 설정까지 했는데 왜 안되는거지? https는 해당 도메인에만 해당된다. 

처음에 만들어 두었던 도메인에만 해당이되고 로드 밸런서에는 해당이 되지 않는다.

 

route53에 들어가서 

아까 우리가 맨 처음에 만들어 두었던 레코드를 편집해주자. 별칭을 누르고, 로드밸런스 선택, 아까 만든 로드밸런스를 눌러주자 그럼 저 도메인으로 들어왔을 때 바로 로드밸런스로 연결해준다.

자 한번 도메인 주소로 들어가보자!!! 이젠 잘 https가 적용이 된 것을 확인할 수 있을 것이다!!!!

그런데 하나 문제가 있다. http로 들어가도 접속이 된다. 이럼 http로 들어온 경우 보안에 문제가 생겨버릴 수 있다.

따라서 마지막으로 해주어야할 것이 http로 접속했을 때 https로 리다이렉트 시켜주는 것이다.

 

다시 로드밸런스로 넘어가보자 리스너에 80번 포트를 편집해주고

기존에 있던 걸 remove로 지워준 뒤에 redirect를 선택 후 아래와 같이 설정해주자

그럼 리스너가 아래와 같이 바뀌어 있을 것이다.

이제 http로 접근해보고 https로 접근해보자 둘다 https로 잘 접속이 되는 것을 확인할 수가 있을 것이다.

 

나는 인스턴스 하나로 node express를 돌리면서 거기에 build된 vue.js파일을 두고 돌리는 방식을 사용했다.

인스턴스에서 80번 포트로 들어오면 3000번 포트로 돌려버리는 명령어를 실행시켜두었다.

 

여기서 vue.js에서 api를 보내는 주소는 우리가 설정해둔 https://도메인 으로 변경시켜주어야한다.

만약 api 서버 주소를 http로 설정해두었다면 mixin error? 가 발생할 것이다.

 

먼저 이를 해결하기 위해 index.html에 아래와 같이 추가한 뒤, vue에도 새로 변경한 https주소를 적어주자

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

 

그럼 api가  도메인 주소 -> 로드밸런스 주소 -> 인스턴스 이렇게 들어와서 잘 실행이 되는 것 같다. ( 내생각 )