Reverse-Proxy란?
Proxy는 Client를 숨기고, Reverse-Proxy는 Server를 숨기는 것
Proxy란 대리자를 의미한다. 일반적으로 Proxy는 Server로부터 Clinet를 숨겨 정보를 알 수 없도록(그림1) 하는 역할이다.
Reverse-Proxy는 그 반대다. Client로부터 Server를 숨겨주는 것(그림2)이다.
Nginx 에서 React 배포시 Reverse-Proxy 설정 방법
React는 SPA(Single Page Application)이므로 Build 결과로 생성되는 html은 index.html 하나 뿐이다.
따라서 Nginx는 정적 페이지인 index.html만 응답하고, 그 외 데이터 요청은 API 서버에게 한다.
1) 최초 웹페이지 도메인 진입 (http://ip:port/)
→ Nginx가 직접 index.html 응답
2) 그 외 웹 페이지에서 서버에 요청
→ Reverse-Proxy를 이용해 API 서버에 요청 pass
nginx.conf
구체적으로 아래와 같이 URI에 따라 Reverse-Proxy 설정을 한다
- location / {...}
- root: 도메인(/)로 접속했을 때 response할 index.html 등 정적 파일이 모여있는 root 디렉토리
- index: 도메인으로 접속했을 때 Nginx가 응답할 파일. index.html, index.htm을 root에서 순차적으로 찾는다
- try_files
$uri, $uri/ 경로가 root에 존재하면 해당 경로를 그려주고, 존재하지 않으면 /index.html을 rewrite한다.
는 index.html 한 개만 response하는 SPA이므로 react-router를 이용해 내부적으로 URI를 변경하고,
주소창을 수정만 해준다.
즉, react-router를 이용해 /movie라는 경로로 이동했을 때 movie 페이지를 보여주도록 만든다면, 브라우저의 주소창은http://localhost/movie으로 변경될 것이다. 하지만, 아래의 설정을 보면 /movie로 접속했을 때 response하는 정보는 없다. 따라서 /movie 주소에서 새로고침하면 404 에러가 발생할 것이다. 이를 위해 현재 주소창에 입력된 uri가 없다면($uri, $uri/) 현재 유저가 보고있는 index.html을 rewrite하도록 하는 것이다.
- location /api { ... } : /api로 요청이 올 때: proxy_pass에 작성된 URL에 요청을 pass함
http {
...
server {
listen 80;
server_name localhost;
# 도메인(/)으로 접속: Nginx에서 react로 빌드 된 index.html response
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# /api 경로로 요청이 올 경우: API Server IP로 proxy pass
location /api {
proxy_pass http://[API Server IP]:[PORT];
}
}
}
정리하며 생긴 의문점과 답
Q. 아래처럼 작성하면 /path 아래 경로는 무조건 proxy_pass ? 예를 들어, api uri가 @GetMapping("/path/path2/path3") 처럼 /path 아래로 depth가 깊어져도 전부 proxy_pass에 적용되는지?
A. Yes
localhost /path {
proxy_pass ...
}
Q. 아래처럼 작성하면 @GetMapping("/path") 도 api 서버에서 걸릴까?
localhost /path/path2 {
proxy_pass ...
}
A. No
Reverse-Proxy 설정 Reference
https://jjeongil.tistory.com/1490
https://fred16157.github.io/etc/nginx-reverse-proxy/
'Back-End > Server' 카테고리의 다른 글
[WebServer] Nginx 설치 및 구동 (EC2 Amazon Linux2 버전) (0) | 2022.01.08 |
---|---|
[Nginx] Nginx 환경설정 (0) | 2022.01.06 |
[Nginx] Nginx 설치 및 구동 (Mac OS 버전) (0) | 2022.01.04 |
[AWS] EC2 Java8 설치, Timezone 변경, Hostname 변경 (0) | 2022.01.03 |
[Nginx] Nginx 설치 및 구동 (Windows 버전) (1) | 2022.01.02 |