Https 적용하기 (AWS ELB, Nginx)
개인프로젝트 중 https 를 적용하기로 했다.
경고문구보다는 자물쇠가 이쁘긴하니까..
우선 현재 프로젝트 구조는 이렇게 되있다.
1. 처음 클라이언트가 연결하면 react 가 랜딩화면을 보여준다
2. 유저가 검색하면 api 를 통해 data 를 요청하고, 받은 데이터를 react 가 보여준다.
이 상태에서 https 를 AWS ELB 를 통해서 https 요청을 받도록 하였다. 내부는 http
처음 랜딩페이지는 https 로 잘 접속이 된다. 근데 유저를 검색하려고 요청을 하면 요청을 할 수가 없었다.
block mixed content 라는 에러와 함께 보낼 수 없었다.
아래는 mixed content 에 관한 글이다. 짧게 요약하자면 보안때문에 https 에서 http 를 요청할 수 없는 것이다.
혼합 콘텐츠 방지 | Web | Google Developers
혼합 콘텐츠를 찾아 수정하는 것은 중요한 작업이지만 많은 시간이 소요될 수 있습니다. 이 가이드에서는 해당 프로세스를 지원하는 데 사용할 수 있는 몇몇 도구에 대해 설명합니다.
developers.google.com
그래서 처음에는 api 서버 또한 인증서를 받아서, 클라이언트가 https 로 연결하도록 할려고 했다.
근데 뭔가 방법이 이상한거 같아서 검색하다가 좋은 글을 찾았다. 역시 누군가 질문을 했다. 😊
https://xetown.com/questions/780401
웹앱이 https이면 api서버와 소켓 서버도 https로 이루어져야 하나요?
안녕하세요. 개인적으로 프로젝트 때문에 react를 이용한 SPA를 제작중인데, SSL을 이용해서 react 웹앱을 https 환경에서 제공해주려고 바꿨습니다. 여기서 Mix content 문제나 소켓 연결이 안되는 많은
xetown.com
백엔드 서버는 전혀 건드릴 필요가 없습니다. 인증서 두 군데에서 관리하려면 귀찮잖아요.
브라우저나 어플에서는 백엔드 서버의 존재 자체를 알 필요가 없도록 구성하세요.
이게 정답이 아닐지는 몰라도 현재는 정답인거 같다.. 허헣
그래서 AWS 에 Nginx 를 두어 80번 포트로 들어오는 모든 요청을 Nginx 를 거쳐 들어오게 설정했다.
https 로 들어와도 ELB 가 알아서 http 로 바꿔서 준다. 👍
요청이 들어오면 Nginx 는 주소를 보고 파악한다
API 요청인가 아니면 프론트를 요청하는건가 (프론트 요청을 뭐라고 해야되는지 모르겠네요)
그 다음 proxy_pass 를 활용하여 방향을 슬쩍 바꿔주면 끝!
위의 사진이 현재 구성된 상태이다. https 도 잘되고 http 도 잘된다. 😃