nginx를 통한 로컬환경과 운영환경의 차이

흔히 개발을 할 때 개발용으로 쓰는 로컬과
실제로 배포되어있는 운영환경이 같이 존재한다

이 둘의 차이점은
로컬환경은 프론트와 백이 각각 다른 2개의 서버가 있다는것이고
운영환경은 하나의 서버이다.

둘의 차이점을 더 자세히 알아보았다

로컬환경

백엔드에서는 기본적으로 다른 서버로의 접속을 차단한다
따라서 로컬에서는 프론트와 백의 서버가 다르기때문에
차단된다

이를 임시적으로 막아주기 위해서 CORS 을 통해 프론트 서버의 접근을 허용해주는것이다.

이로써 빌드 없이 즉시 병렬적으로
화면과 api쪽을 빠르게 수정하고 테스트하며 개발할 수있다

운영환경

오늘의 핵심인 운영환경이다

운영환경은 아까 말했듯이 하나의 서버가 존재한다.

개발서버처럼 두개의 서버로 하면 빠르고 간단하지않나 라고 생각해보기도했었는데

그럴경우의 단점은
사용자입장에서 프론트주소? 백주소 ? 어디로 검색해야할지 모르며
기본적으로 서버의 내부 주소는 외부에 노출되면 안된다

개발 환경같은 경우 예를 들어 백엔드 url이 localhost 8080 이다 치면

프론트에서 바로 다이렉트로 localhost8080으로 요청합니다 라고 보내는거니까

외부에서 대놓고 노출되는꼴이 된다

이럴경우에는 공격자가 서버 내부에 엔트포인트를 직접 호출하거나 등등 보안적인 이슈가 생기기때문에

모든 요청은 문지기인 nginx를 통해 허용된 포트 (443,80) 으로만 들어오게 해야한다.

그러면 다시 돌아가서 운영환경에서의 작동 순서를 살펴보면

우선 방금 말했듯이 허용된 포트로만 들어오게 하는데
그 서버 이름을 대충 hello라고 지어보자

hello:0702 로 요청을 했다

그러면 어찌됐던 hello:0702 === 443 인거다
따라서 nginx가 진입을 허용해주게 된다

그다음엔 어떤 웹을 띄울거냐 이다

원래 였다면
관리자페이지 (서버 하나 5173)
리더보드 (서버 하나 5174) 이런식으로 프론트 프로젝트 하나당 서버가 있더고했지만 운영환경에서는

각 프론트 프로젝트에서 빌드하여 정적문서를 뽑아내서
하나로 운영되고있는 서버에서 관리하는것이다

쉽게 말하면 어찌됐던 두개의 서버인것을 하나로 운영한다는건 즉 프론트랑 백이 합쳐진다는건데

프론트가 정적문서 형태로 변환되서 합쳐져있다고 보면 될거같다

그렇게 각 웹들의 정적 문서들은 서버에 보관되게 된다

리더보드
    ㄴ index.html
관리자 페이지
    ㄴ index.html

그러면 지금 hello를 통해서 들어오긴했는데 여기서 내가
리더보드를 열것이냐 관리자페이지를 열것이냐
이것을 구분하는것이 바로 hello뒤에붙은 0702인것이다

서버에서는 또 각각의 conf 파일들이 존재한다

0702로 들어왔네 ? 그럼 리더보드 정적문서를 줄게

만약 0703이면
0703로 들어왔네 ? 그럼 관리자 페이지 정적문서를 줄게

해서 설정파일에 따라 정적문서를 가져온다

그 후 정적문서를 가지고 돌아온 뒤에는 정적문서의 스크립트가 동작을 하게 된다.

이때 운영환경이냐? 로컬이냐 ? 구분하여 baseURL을 설정되도록 하였었다

만약 로컬환경이다 라고하면 그냥 아까 말했듯이 다이렉트로 백 서버로 요청 날리는거다
localhost:8080
즉 외부에서의 요청

하지만 운영환경은 외부에서의 요청은 안된다고했다
그러면 어쨋든 다시 허용되는 443으로 들어가야한다는건데

이걸 위해서 baseURL을 설정해둔것이다

조건문을 통해 여기가 baseURL이다?
싶으면 localhost8080이 아닌 /api 로 바뀌게끔한다

브라우저는 기본적으로 현재 도메인+포트를 자동으로 채워주기때문에

처음에 요청했던 hello:0702/api 로 붙게된다

그럼 브라우저입장에서는 이게 또 허용된 443이네?
들어가 ~ 하고 자연스럽게 다시 서버 내부로 진입된다

그럼 여기서 또 문제는 결국은 백 서버는 localhost:8080이다

그런데 지금 아직도 hello:0702인것이다.

그럼 결국 브라우저는 속여서 어찌저찌 서버 내부로 들어오긴 왔는데

여기에서 api를 호출하기 위해서는 url을 바꿔줄 무언가가 필요하다

그게 바로 nginx에 프록시이다

프록시도 아까 말한 conf에 설정되어있는데

각 포트마다 설정이 되어있다

/api로 들어왔어? 그럼 localhost:8080으로 바꿔줄게~
해서 바꿔들어가게 되는것이다

결론은
원하는 웹에 접근하기 위해서
해당 웹의 포트번호를 통해서 정적문서를 받고

그 정적문서에서 api호출을 하기 위해 백 서버로 접근해야하는데 진입을 허용하기 위해서

일단 임시로 443 즉 hello:0702에 /api만 붙여서 진입

진입했으면 그 안에서 프록시 친구가
/api 네? 백url로 바꿔줌

이런식으로 운영되는거같다