[Jquery] 외부에서 서버로 요청하기(?)

저번 글에 이어서, Frontend에서 backend로 요청하다가 생각난 부분인데, 이걸 따로 어떻게 이름을 지어야 할 지 몰라서, 대충 지어뒀다.

설명을 하자면, frontend에서 하드코딩으로 backend에다 요청을 한다면, 그 주소밖에 사용을 할 수 없을 것이다.

그것이 프로덕션에서 고정적으로 사용하는 도메인이 있다면, 그냥 하드코딩을 해도 좋지만, 내 경우는 도커에서 돌아가기에, 그 도커 웹서버의 IP가 달라 질 수 있으며, 도메인을 연결한다면? 골치가 아파지는것이다.

또한, 내 경우는 jquery Ajax로 url을 하드코딩 하였다가, 로컬 개발환경에선 멀쩡이 동작하지만 다른 호스트에서 접속을 진행하게 되면 localhost로 접속을 하니 당연히(!) 외부 클라이언트에서는 서버가 돌아가지 않으니 접속이 안된다. (초보적인 실수다!)

그래서 바로 전 글과 같이 nginx Reverse Proxy를 사용하여, 같은 호스트에서 따로 처리를 할 수있게 되었다.

원래는

backend:7000/api

였지만, reverse proxy를 사용하여

webserver/api

로 보낼 수 있게 되었다.

그러므로, 밖에서 볼때는 backend와 frontend가 같은 서버에서 동작하는 것 처럼 보이기에,

jquery로 Ajax를 사용할 때, webserver와 같은곳으로 Request를 보내면 되는 것이다.

윗부분이 이해가 잘 되지 않는다면, 이렇게 보자

ajax url -> http://backend:7000/api

로 되어있던 부분이 proxymanger를 통해서, frontend와 같은서버 처럼 보이니,

ajax url -> http://frontend/api 로 바꿀 수 있다.

그래서, 어떻게 하냐?

let address = $(location).attr('host');


$.ajax({
    url: `http://${address}/api/login`

이런식으로, address 변수에 값을 host로 넣고,
같은 곳으로 requst를 보내면 되기에, address뒤에 api/login으로 보낼 수 있는것이다.

정신없이 쓴 글이라 나도 잘 이해가 안된다 ㅋㅋㅋㅋㅋ