• 카테고리

    질문 & 답변
  • 세부 분야

    데브옵스 · 인프라

  • 해결 여부

    미해결

Nginx의 Proxy를 이용한 설계 관련해서 질문있습니다

22.09.10 12:32 작성 조회수 453

0

안녕하세요! 좋은 내용으로 강의해주셔서 정말 감사드립니다.

질문이 하나 있습니다.

리액트에서 axois.get("/api/values") 이런식으로 요청해서 백엔드에서 응답을 받아오는데, 그 부분이 위의 사진에서 노란색 부분인가요?

리액트에서 요청하면 다시 엔진엑스를 거쳐서 /api가 있으니까 백엔드 가서 응답을 받아오는건가요, 아니면 프론트에서 백엔드로 바로 요청을(? 어떻게 하는지는 모르겠지만..) 해서 응답을 받아오는 건가요?

저 노란색 과정이 잘 이해가 안가서 조금 더 상세하게 설명해주실 수 있나요?

감사합니다. 추석 잘 보내세요!

답변 1

답변을 작성해보세요.

0

안녕하세요

좋은 질문 감사합니다!

제가 봐도 헷갈리는 부분이네요!

저희가 소스 코드를 작성하는 부분은 프런트엔드 부분입니다.

그래서 axois.get("/api/values") 이런 식으로 프런트엔드에 작성을 하고

만약 저 요청이 이루어지면 브라우저에 콘솔 창에 Network 탭에 보면 요청 백엔드 서버로 이루어진 것을 상세하게 볼 수 있습니다.

이러한 것을 보면 먼저 프런트엔드에서 요청을 보내지만 그 요청이 브라우저로 간 후에 백엔드로 가는 것을 볼 수 있습니다(실제로 요청이 이루어지는 것은 브라우저입니다). 그것을 프런트엔드에서 백엔드로 요청이 이루어졌다고 해놓은 것입니다.

아무래도 저 노란색 부분을 빼는 게 더 안 헷갈릴 수 있었던 거 같네요 ^^

좋은 질문 감사합니다.

asdf5184님의 프로필

asdf5184

질문자

2022.09.10

추석에 상세하게 답변해주셔서 정말 감사드립니다^^! 명절 잘 보내세요!

답변해주신 내용을 보고 궁금한 것이 더 생겨서 문의 드립니다!

  1. 그렇다면 axois.get("/api/values")가 브라우저를 다시 타고 -> NGINX -> 백엔드로 갔다고 이해할 수 있을까요? 그럼 그 응답은 다시 브라우저 -> 리액트로 가는 것인가요?

  2. axois.get("/api/values")면 앞에 url이 없는데 서버를 어떻게 알고 찾아가나요!? axois.get("http://~~~~~/api/values")와 어떻게 다르게 동작하는지 궁금합니다!

감사합니다!!

 

  1. 응답은 백엔드에서 다시 브라우저로 갔다고 보시면 됩니다. 그리고 그 브라우저에 있는 값을 리액트에서도 알고 있다고 생각을 해주시면 됩니다.

    host 이름과 포트를 지정해주지 않아도 되는 이유는 Nginx 기능을 이용해서 처리를 해줘서 그렇습니다. 그 부분은 nginx를 위한 도커 파일 만들기를 봐주시면 더욱 상세하게 설명이 되어있습니다.

    /api/values 이든 http:// ~ 이렇게 요청 경로를 해주든 브라우저에서는 똑같이 http://~ 이런 식의 경로로 요청을 보냅니다. 그 이유는 nginx의 설정을 그렇게 해줘서입니다 ~

    감사합니다.