[3-tier 구축] 5️⃣-2 Nginx 리버스 프록시 설정

현재 nginx.conf 파일은 기본적인 React 애플리케이션을 서빙하는 설정으로 이루어져 있다.(React 앱을 Nginx를 통해 서빙하는 구성)

이 nginx.conf 파일에는 백엔드 API 서버로 요청을 전달하는 리버스 프록시 설정이 포함되어 있지 않기 때문에, React 앱에서 API 요청을 보내더라도 백엔드 서버로 요청이 전달되지 않습니다.

ex) React 앱에서 axios.get('/api/test')와 같은 요청을 보낸다면, 이 요청은 Nginx 서버에서 처리하려고 시도하지만 /api 경로에 대한 처리가 없기 때문에 404 오류가 발생할 수 있다.

server {
    # add_header Access-Control-Allow-Origin *;
    listen       80;
    listen       [::]:80;

    location / {
        root        /app/dist;
        index       index.html;
        try_files   $uri $uri/ /index.html;
    }
}

❓현재 backend 컨테이너가 떠있어서 http://52.79.91.203:8080/test 로도 접속이 잘 되는 상황이다. 그래도 리버스 프록시 설정 부분이 없으면 안되는 것일까?

리벅스 프록시가 필요한 이유
추후 추가 예정

💠 리버스 프록시 추가

server {
    # add_header Access-Control-Allow-Origin *;
    listen       80;
    listen       [::]:80;

    # React 앱 서빙
    location / {
        root        /app/dist;
        index       index.html;
        try_files   $uri $uri/ /index.html;
    }

    # /api로 시작하는 요청을 백엔드 서버로 전달
    location /api/ {
        proxy_pass http://52.79.91.203:8080/;  # 백엔드 컨테이너의 주소
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

코드를 수정하고 로컬에서 기존의 이미지 삭제 후 다시 빌드해주고 docker hub에 push 해주면 된다.

docker build --platform linux/amd64 -t jinii915/review-frontend:latest .
docker push jinii915/review-frontend

이제 ec2에서 이미지를 삭제하고 다시 pull 해오자!

💠 백엔드-Nginx 연동 확인

Curl 명령어로 테스트
curl 명령어를 사용하여 직접 Nginx 서버에 API 요청을 보내고, 응답이 정상적으로 오는지 확인할 수 있다.

//  http://52.79.91.203/api/test로 요청을 보내고, 응답을 콘솔에 출력
curl http://52.79.91.203/api/test

응답이 정상적으로 돌아오면, 리버스 프록시가 잘 작동하고 있다는 뜻이다.

• 리버스 프록시 추가 전
  
• 리버스 프록시 추가 후