[AWS/nginx/react/Gunicorn/django]신입 개발자의 django 프로젝트 배포 삽질_2(해결)

 

 

 

두번째  아키텍처

정말ㅜ 눈물난다,,,배포란 이런것인가,,,, 

인스턴스는 1개 WSGI(gunicorn) 도입

 

 

1. Mixed Content 문제 발생

 

Mixed Content: The page at 'https://도메인/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://도메인/'. This request has been blocked; the content must be served over HTTPS.

- Mixed content는 request가 https인데 end point는 http라 브라우저에서 막는 것이다. 

- 우리는 nginx에만 SSL을 적용하였다. 

- nginx에서 react로 https로 요청하고 react에서 gunicorn으로 보낼때 http를 보냈다.(django는 https를 지원하지 않는다고 해서,,)

- 그리고 django까지 ssl을 적용하면 속도가 느려져 성능이슈가 생길 것 같았고 

- 우리는 브라우저를 속여 https 사용하는 척 속이고 싶었다.

 

(접어놓았다. 궁금하신 분들은 보세요,,우리의 삽질)

1. nginx에서 react 요청할때는 https로 요청하고 react에서 base URL을 http로 시도

 

2. 포트번호로 시도해보고 소켓으로도 시도 

 

3. 우리와 비슷한 문제를 겪고 계신 분이 작성한 글을 참고

https://xetown.com/questions/780401

 

이분은 백엔드 서버 앞에 nginx에 ssl을 적용하여 https를 구현 시도

백엔드 서버는 건드릴 필요가 없다고,,,적혀 있어 시도해봤으나 실패,,,,

지금 생각해보니 지금 우리와 다르다  링크의 글은 back앞에 webserver를 두어 거기에 ssl을 적용한 것이고

우리는 nginx에서 react를 띄워 react에서 back을 호출하는 것이므로

 

4. django settions에 SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') 추가

 

5. AWS ELB 부분을 https로 받고 nginx에서 부터 http로 하려고 했으나 범위를 넓히지말라는 조언을 들어서 시도해 보지 않았고 Mixed Content알아보며 블로그들을 봤을때 이런식으로 접근해도 Mixed content가 발생하는 글들도 보게 됨

 

이것저것 다하다가 결국 다 실패,,,, 그냥 back에도 ssl을 적용하자

 

2. django에 ssl 적용

 

- 접어놓은 곳에 첨부한 링크를 보면 이런 글이 작성 되어 있다.

메인 웹페이지 자체가 https라면 모든 api요청, 이미지 로딩, 웹소켓 등에도 동일하게 SSL이 적용되어야 한다.
웹소켓은 wss, 다른 모든 요청은 https
api 요청이나 웹소켓에 http를 사용한다면 거기에 접속할 때 세션, 쿠키나 토큰이 노출 되어
https를 쓰는 의미가 사라진다.
그래서 브라우저에서 Mixed content 발생시 접속 시도조차 하지 않는다.

- django에 sslserver를 INSTALLED_APPS에 추가하여 ssl 적용

- Mixed content 문제는 발생하지 않고 정상적으로 작동

 

 

3. nginx에서 django admin css(static)적용 안됨

 

- Mixed content를 해결하기 위해 admin페이지는 고려하지 않고 일단 admin 페이지 location부분은  

- admin페이지는 user가 보는 페이지와 다르게 react에서 django를 거쳐서 가는게 아니다.

- admin페이지는 nginx에서 static file을 잡아주고 proxy_pass로 바로 django를 호출한다.

- nginx에서 location /static에 root로 static 경로를 잡아 주었으나 실패

 

- react 파일과 admin css 파일을 static 한 폴더에 있었다. 

- react 파일과 같이 있어 admin폴더를 찾지 못하는거 같았다.

- admin static 파일들을 statics로 파일을 만들어 옮겨준다.

 

django의 config폴더의 settings.py

django의 static 폴더 경로를 찾을 수 있도록 작성

nginx .conf

 

 

 

결론

앞단에서 https를 사용하면 뒷단에서도 SSL을 적용해야한다.django의 admin페이지를 사용하기 위해 react 파일과 admin static파일을 한 폴더에 저장해 놓으면 안된다.

꼭 경험을 해봐야 아는,,우리 였다