[Nginx] 실습 2 - SpringBoot & React를 Port Proxy로 띄워보기

저번 포스팅에서는 실습 중 하나로 백엔드만 Port Proxy해서 띄워 보았다.
하지만, 내 프로젝트는 실질적으로 Front-End를 담당하는 React와 함께 구성되어 있다.

React는 Port가 3000이고, SpringBoot는 Port가 8000이다. 하나의 프로젝트에서 움직이는데, 과연 Nginx 설정 파일에 location을 2개를 만들어야 할까, 아니면 1개로만 처리하면 될까? 한 번 알아보자!

1. Nginx 설정 파일 편집

• Nginx 설정 파일을 편집하여 프론트엔드와 백엔드를 각각 프록시하도록 설정
• 설정 파일은 /etc/nginx/sites-available/default에 있음

sudo nano /etc/nginx/sites-available/default

2. 설정 파일에 프록시 설정 수정

• 아래와 같이 설정 파일을 수정
• 기존 프로젝트는 React와 Spring-boot를 모두 Run한 이후, 화면단에서 클릭을 하든, URL을 직접 치든 http://localhost:3000 을 기점으로 api에 대해 http://localhost:3000/api/~~~와 같은 형식으로 URL이 변경했을 때, 백엔드에서 GetMapping 등을 하여 데이터를 fetch 후 데이터를 화면단에 뿌려주었다.
• 따라서, React와 관련된 정보만 적어주면 됨

server {
    listen 82;

    server_name localhost;  # 로컬에서 테스트할 경우
    
    location / {
        proxy_pass http://localhost:3000/;  # React 애플리케이션
        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;
    }
}

3. 결과

→http://localhost:82

→ http://localhost:82/api/devices?~~~ 으로 들어가면?

• Nginx를 통해서도 문제없이 백엔드를 통해 데이터가 fetch되고, 화면단에도 데이터가 잘 뿌려지는 것을 확인할 수 있음

3. 왜 Nginx의 설정 파일에 2개가 아닌 1개만 location을 지정하면 될까?

Front-End가 있다면 Front-End에서 각 URL에 대한 화면을 갖고 있을 것이다.

이 중에서 정적 파일이 아니라, DB를 거쳐야 하는 등의 동적 작용이 발생할 경우, SpringBoot에서 @GetMapping을 통해 api 형식을 받아 비즈니스 로직을 처리한 후, 데이터를 다시 Front 영역에 뿌려지게 된다.

따라서, local에서 React와 SpringBoot를 Run하고, Nginx도 Run한 상태이기 때문에 Nginx의 설정 파일에서 React 영역만 locatoin에 할당하면 된다.

To Do

백엔드를 2개 이상 만들어서 Reverse Proxy를 하려면 어떻게 해야 할까? 그것은 다음 포스팅에!