NGINX: 웹서버이자 리버스 프록시 서버 ..... 라는데 뭐라는지 모르겠다.... ㅜㅜ
클라이언트 요청을 받아서 뒤의 실제 application server 로 전달
역할
1. 외부 요청을 내부 백엔드로 전달
2. react 빌드 결과물 같은 정적 파일을 직접 응답 (백엔드까지 가지 않음)
3. LB (로드밸런싱) : backend instance 가 여러개일때 분산시킴
proxy-pass : 이 위치로 들어온 요청을 내가 지정한 다른 주소로 그대로 넘겨줘!! 라는 의미
location /api/ {
proxy_pass http://localhost:8000;
}이렇게 적혀있으면 /api/ 로 시작하는 요청이 들어오면 localhost:8000 으로 전달해주라는 의미
(1) client가 배포_URL/api/xxx 로 요청을 보내면
-> (2) nginx 가 받아서 localhost:8000/api/xxx 로 다시 요청을 보냄 (서버 내부 상황)
-> (3) 백엔드가 응답하면
-> (4) nginx 가 다시 client 한테 돌려줌
이 때 client 는 1, 3만 알고 f12 개발자 도구를 봐도 (2), (3) 은 알 수 없음
react build 같은 정적 파일을 직접 응답
빌드 전에는 이런식의 .tsx, .jsx 같은 형태의 파일들로 작성됨
-> 얘는 브라우저, nginx 둘 다 못 읽기 때문에 컴파일이 필요
npm run build같은 프론트엔드 실행 코드를 쓰면 Vite 가 모든 코드를 순수 JS 로 변환 -> 파일을 묶거나 압축해서
dist/
index.html
assets/index-a1b2c3.js # 순수 JavaScript
assets/index-a1b2c3.css # 순수 CSS요런 파일로 뱉어냄 (이 시점에ㅓㅅ react 라는건 파일상으로 존재 X - 복잡한 부분들은 빌드할때 다 처리됨 )
NGINX 는 dist/ 폴더를 보고
/요청이 왔으니까 index.html 파일 내용을 복사해서 응답 보내기
/assets/contents.js 요청이 오니까 그 파일 내용 복사해서 응답 보내기... 등등을 함
location / {
root /path/to/front/dist;
try_files $uri /index.html;
}
화면을 그린다는건 브라우저 안에서 일어나는 일
브라우저가 NGINX 가 던져줘서 다운로드 한 JS 코드를 실행 -> 화면에 컴포넌트가 그려지고 ... 이벤트가 붙고... 라우팅 됨
그러니까 렌더링이라는 실제 작업은 사용자 브라우저의 컴퓨터에서 일어남
결론! NGINX 가 정적파일을 직접 응답한다는 말은 파일을 나눠주는 분배자 느낌이라고 보면 됨
로드밸런싱은 말 그대로... 요청이 들어오면 나눠져있는 여러 백엔드 인스턴스에게 값을 분배해주는거
설정 구조
server {
listen 80;
server_name temp.serverurl.co.kr;
location / {
root /path/to/front/dist; # 정적 파일
try_files $uri /index.html; # SPA 라우팅 대응
}
location /api/ {
proxy_pass http://localhost:8000; # 백엔드로 전달
}
}location: URL 경로별로 다르게 처리하겠다는 규칙
proxy_pass: 이 경로는 다른 서버로 넘김
try-files: 파일 없으면 이거 시도하기 -> 404 방지
nginx.conf 는 관심사 분리 기준으로 두기~~
nginx 가 프론트 서빙용이라면 front repo 에 둬도 되고 (nginx.conf 가 프론트 docker image 안에 포함되는 상황)
여러 서비스를 총괄하는 진입점이면 별도 infra repo 에 두는게 좋음
추가
설정 파일을 수정하고 nginx 를 그냥 재시작하면 문법 오류 있을 때 서비스가 통째로 다운될 수 있음
sudo nginx -t # 문법 검사만, 실제 반영 안 함
sudo nginx -s reload # 무중단으로 설정만 다시 읽음 (재시작 X)이 순서로 확인해주는 습관이 국룰이다
오류가생겼는데 backend log 가 텅 비었을 때 : nginx 선에서 막혔을 가능성을 고려해서 nginx error log 를 확인해주자!
/var/log/nginx/access.log # 어떤 요청이 들어왔는지
/var/log/nginx/error.log # nginx 레벨에서 뭔가 실패했을 때 (백엔드 연결 실패 등)