작성한 질문수 3

2

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

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

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

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

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

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

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

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

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

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

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

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

0

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

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

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

0

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

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

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

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

2. localhost 통신:

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

3. NGINX와 리버스 프록시:

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

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

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

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

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