[%] 아니 시발 https 통신 이거 존나 어려운데 어카냐

[익명(175.198)]

도커 위에서 vuejs를 프론트 django를 api 백엔드로 쓰고 있는데 ssl 인증하려고 엔진엑스를 적용함

그래서 프론트로 https 통신은 잘 되는데 문제는 이렇게 되면 프론트가 장고에 axios로 요청할 때 http로 요청하면 안 된다네??

장고로 요청할 때도 https로 요청해야함? 이러면 시발 어떻게 해야하냐..
진짜 쌩초보라 존나 어렵네 이거때문에 이틀넘게 부여잡고 있는데 ㅈ같아서 여기서라도 글 쓴다...

[익명(220.118)]

방법은 여러가지 있는데 쉬운 방법은 프론트 서버를 만드는 거임

[익명(175.198)]

서버 사이드 렌더링을 하라는 건가 근데 이러면 vuejs를 사용한 이유가 좀 퇴색되지 않음?

[익명(220.118)]

ㄴㄴ SSR을 하라는 건 아님 프론트 서버 만들고 그 서버에 SSL 인증을 받으라는 거임 그럼 FE <-> BE 간 인증 문제가 없어지니까

[익명(175.198)]

그건 이미 내가 nginx를 적용해서 한 거 아님? 말하다시피 외부에서 https 통신은 가능한데 문제는 vuejs가 백엔드에서 데이터를 못 가져옴.. 초보라 잘 모르겠음 양해좀..

[익명(220.118)]

아 그럼 그냥 프론트 dev server에서 https 설정해주면 되겠네 vue dev server https로 검색해보셈

[익명(175.198)]

오키 한번 알아볼게 도움 줘서 고마워

[dd(180.66)]

vue ---> nginx ---> django 이렇게 레이어를 쌓아야겠지

[익명(175.198)]

흠 아예 처음부터 다시 생각해봐야 하나 엔진엑스랑 장고도 https로 통신해야함?

[익명(110.13)]

장고 앞에 nginx 하나 끼워 넣어주면 백엔드 손 안대고 https 적용가능

[익명(175.198)]

그러면 프론트용 nginx 하나, 장고용 nginx하나 이렇게 해서 2개를 돌려야 하는거임?

[익명(39.7)]

tcp /ip 로 소켓통신하라고하면 울겠네

[익명(175.198)]

지금도 울기 일보직전임.. 하..

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[익명(175.198)]

아 aws를 쓸 건 아니고 그냥 내 pc에서 서버를 굴리고 싶은거임 로컬 환경은 맞음 nginx를 이용해서 vuejs를 https로 띄우긴 했는데 이렇게 되면 문제는 기존에 http를 사용할 때는 80포트에서 프론트를 가져오고 8000번 포트에서 백엔드 데이터를 가져왔는데 https로 프론트 통신을 바꾸니까 http로 백엔드에서 데이터를 못 가져온다는 거임 혼합 콘텐츠였나 뭐시기로.. ㅇㅇ 그래서 생각해본게 백엔드에서 https 통신이 가능하게 하던가, 아니면 vuejs에서 nginx로 보낸 다음 거기서 localhost로 백엔드에 요청을 하는거임. 질문은 내가 위에 말한 방법 2개가 적합한 방법인지를 잘 모르겠음.. 혹시 더 좋은 방법이 있을까?

[익명(125.143)]

약간 전제가 잘못된듯 로컬 환경에서 https는 적용하는 경우를 한번도 못봄, 보통 실제 배포 했을때 https 적용하지

[익명(125.143)]

약간 잘못 이해하고 있는거같은데 nginx는 니 컴퓨터에 오는 요청을 우회해서 다른 포트에 꼽아주는거임 (리버스 프록시)
그래서 니 컴퓨터 안에서 할때는 http로 그냥 프론트 백엔드 소통하게하고
그걸 배포했을때 nginx로
https://service.com이면
프론트 포트 80으로해서 정적 파일 뿌려주고
만약
https://api.service.com
이면 백엔드 포트 3000번으로 해서 api요청 해결하고 이러는거

[익명(125.143)]

클라이언트가 니 컴퓨터에 접속했을때 nginx를 통해서 가게하는거지 니 컴퓨터 안에서 nginx 사이로 소통하게 하는게 아님

[익명(125.143)]

적다보니까 나도 너 뭔말하는지 이해간듯, 그니까 nginx 뒤에 백엔드도 둬야한다는게 결론임, 니가 마지막에 한 말이 맞음
https://service.com
=> localhost:프론트엔드포트
https://api.service.com
=> localhost:백엔드포트

[익명(175.198)]

아 그러면 api url을 따로 지정해서 장고에다 요청을 해야겠구나 진짜 쉽지않네.. 답변해줘서 고마워

[익명(125.143)]

ㄴㄴ따로지정 안해도됨
http://service.com
=> 프론트포트
http://service.com/api
=> 백엔드포트 nginx 지정하고
프론트에서 fetch할때는 그냥 "/api/..."하면 됨

[익명(125.143)]

적다보니 맞나 나도 헷갈리네, 프론트 백 나눈 프로젝트를 해본지 오래되서, 그냥 헤딩하면서 해보셈 금방 해결할듯

[익명(175.198)]

와.. 해결했어 진짜진짜 고마워 근 사흘간 계속 머리 썩히고 있었는데.. 진짜 고맙다..

[익명(pilone)]

https가 http 위에있는거아님? - dc App

[익명(175.198)]

이게 https랑 http 2개를 동시에 사용하면 안 되나봐

[익명(pilone)]

그 두개가 다른게아닐텐데 - dc App

[야딩조무사(cir6174)]

그거 엔진엑스를 게이트웨이로 맨 앞에 두고 거기에 https 물린다음 전부 안에둬야함 - dc App

[익명(175.198)]

내가 엔진엑스를 완전히 잘못 이해하고 있었던 듯.. 오늘 크게 한번 알아감

[choi4624(choi4624)]

이거맞다. 뷰를 가장 앞으로 두면 뷰에 ssl 인증서 넣은거 아닌이상 http / https 혼합 콘텐츠 이슈생김.

[choi4624(choi4624)]

HSTS 환경이 아니라는 전제하에. (이건 nginx랑 그 뒷 서버도 SSL이 이론상 필요함) 계층도는 nginx / (그 외 나머지) 를 서로 프록싱 하는거고. 프록싱을 타 도메인으로 넘기는 경우 nginx와 타 도메인간 https통신 필요함.