[Django] Connecting Frontend and Backend and Distribution 백엔드와 프런트엔드의 연결과 배포

Frontend와 Backend를 어떻게 연결하는지, 어떻게 배포로 연결되는지 궁금했다. 보통 프런트엔드와 백엔드를 구현하게 되면 runserver를 할 경우 다음의 url 로 연결해서 서버를 확인할 수 있게된다.

프런트엔드: http://127.0.0.1:5500

백엔드: http://127.0.0.1:8000

이번에 프로젝트는 AWS 배포까지 하려고 해보았는데, 그 과정에서 프런트와 백엔드 url의 간단한 연결의 과정들을 알게 된 것을 정리한다.

Frontend folder

프런트엔드 api.js 에 위와 같이 url 설정을 해준다. 그럼 frontend runserver를 돌렸을때에는 위의 링크로 들어가면 frontend로 구현해놓은 페이지가 보이게 된다. 그럼 그 프런트엔드와 연결된 백엔드의 작업물들과는 아래 백엔드 링크로 연결된다. 아래 백엔드 url은 AWS에서 생성한 링크이다. 그래서 이 경우에는 백엔드 서버는 AWS와 연결된 서버로 돌아가게 되는것! 따라서 이 경우에는 프런트엔드의 vscode는 로컬에서 틀어놓고, 백엔드 코드는 로컬에서 live로 열어놓지 않아도 배포된 백엔드와 연결된다.

 

그러나... 결국 우리는 전체배포에 성공하지 못했는데, 그 이유와 해결할 수 있는 방법은....

다음 포스트에 쓸 수 있기를😂