인프런 커뮤니티 질문&답변

안녕하세요 상학님! 강의 잘 봐주셔서 감사합니다:D

강의 내용을 잘 이해하셨기에 할 수 있는 질문을 해주셨네요~!!

아래 AI가 잘 답변해준 것 같은데, 이 내용을 조금 더 풀어서 설명드려볼게요!

여러분의 Vue.js로 작성된 프론트엔드 애플리케이션은 클라이언트 사이드에서 실행됩니다. 즉, 사용자의 브라우저에서 실행되기 때문에 “localhost”는 해당 사용자의 로컬 시스템을 응답합니다. 이 때 백엔드는 외부 세계에 서비스되고 있어서, 두 시스템이 동일한 네트워크 내에 있는 경우에만 localhost를 통해 백엔드에 접근하게 됩니다.

웹 프론트엔드 프로젝트를 도커 컨테이너를 기반으로 실행시켰습니다.

하지만 정적 파일로 구성된 웹 프론트엔드 프로젝트의 특성상

정적 파일이 브라우저로 전송된 다음에 브라우저 자체에서 웹 프론트엔드가 실행됩니다.

즉, 웹 프론트엔드 프로젝트가 컨테이너 내부에서 실행되지 않고,

호스트 컴퓨터에 설치된 브라우저에서 실행된다는 뜻입니다.

따라서 localhost를 사용하더라도 호스트 컴퓨터의 localhost를 가리키고 있기 때문에

localhost로 백엔드 컨테이너와 통신이 가능한 것입니다!

위 설명을 보시고 이해 안 되시는 점 있으시면 추가로 댓글 남겨주세요:D

감사합니다. 혹시 제가 잘 이해한 게 맞나 잘 모르겠는데

브라우저에서 get 요청을 하면 nginx가 정적파일을 브라우저에게 던져주고, 이 파일을 브라우저에서 실행.

그렇기 때문에 spring boot와의 연결은 nginx 컨테이너가 아닌 브라우저와 통신하기 때문에 서비스 이름이 아닌, IP로 통신하는 거라고 생각해도 될까요?

안녕하세요, 인프런 AI 인턴입니다. 이상학님.

프론트엔드와 백엔드의 통신 방식에 대해 궁금하신 부분에 대해 설명드리겠습니다.

1. 서비스 이름을 통한 통신:

   • Docker Compose를 사용하면 동일한 Docker 네트워크 내에서는 컨테이너 간에 서비스 이름을 통해 서로의 서비스를 찾을 수 있습니다. 그래서 MySQL이나 Redis 같은 백엔드 서비스는 service 이름을 통해 연결합니다.
     

2. localhost 통신:

   • 여러분의 Vue.js로 작성된 프론트엔드 애플리케이션은 클라이언트 사이드에서 실행됩니다. 즉, 사용자의 브라우저에서 실행되기 때문에 “localhost”는 해당 사용자의 로컬 시스템을 응답합니다. 이 때 백엔드는 외부 세계에 서비스되고 있어서, 두 시스템이 동일한 네트워크 내에 있는 경우에만 localhost를 통해 백엔드에 접근하게 됩니다.
     

3. NGINX와 리버스 프록시:

   • NGINX가 리버스 프록시로 설정되어 있는 경우, 프론트엔드에서 “localhost”로 서버에 요청을 보내면, NGINX가 그 요청을 적절한 백엔드 서비스로 전달할 수 있습니다. 이 때문에 프론트엔드 쪽에서는 localhost를 통해 연결한다고 느낄 수 있는 것입니다.
     

이러한 구조에서는 Docker의 네트워크 기능을 이용해 컨테이너 간의 직접적인 연결을 진행할 수 있지만, 프론트엔드는 클라이언트 측 웹페이지로 실행되므로 이러한 방식이 조금 달라 보일 수 있습니다.

유사한 사례에 대해 자세히 다루고 있는 게시글을 아래에 첨부해 드립니다:

• Docker에서 다중 서비스 지원 전략 - Docker Compose를 활용하여 여러 서비스를 연결하는 방법에 대해 안내하고 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.