Nginx에서 하나의 Conf로 BE와 FE에 대한 경로 기반 라우팅 (리버스 프록시) 설정

1. 서론

최근에 BE와 FE, 풀스택 개발을 진행하고 배포하는 과정에서 Nginx에서 하나의 서브 도메인을 이용해서 리버스 프록시를 걸었어야 했다.

 

하나의 서브 도메인을 이용하는 이유는 당연하게도 CORS 규칙을 지키기 위함이다.

이 설정 파일을 잊어버리지 않기 위해서 작성된 Conf 파일을 공유하려고 한다.

(이걸 찾고 있는 분들도 있을 것이라고 믿는다!)

 

2. Conf 파일

일단 나는 443 포트 즉 SSL 인증이 포함되어 있는 설정이다.

80은 SSL과 관련된 설정들을 걷어내면 된다!

 

server {
        listen 443 ssl http2; # http면 80만 작성하면 됨.
        server_name sub.domain.com;

        # http면 아래 두 줄 제거.
        ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;

        # React로 빌드된 파일 경로 및 루트 파일 (기본: index.html).
        root /var/www/dist;
        index index.html;

        # admin.html을 백엔드로 프록시.
        # 관리자 페이지를 BE에서 제공하고 있어서 포함되어 있음.
        # 혹시 BE에서 정적 리소스를 제공하면 아래와 같이 설정 가능.
        location = /admin.html {
                proxy_pass http://localhost:3000;
                proxy_set_header Host $http_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;
        }

        # 백엔드용.
        # 글쓴이의 백엔드에서는 URL에 /api/가 포함된다.
        location /api/ {
                proxy_set_header Connection "";
                proxy_pass http://localhost:3000;

                # 쿠키 크기 때문에 버퍼 사이즈를 키웠음.
                # 필요 없는 분들은 아래 세 줄은 지워도 무방.
                proxy_buffer_size 128k;
                proxy_buffers 4 256k;
                proxy_busy_buffers_size 256k;

                proxy_set_header Host $http_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;
        }

        # 그 외 나머지 URL 접근은 전부 FE로 돌려버림.
        location / {
                try_files $uri $uri/ /index.html;
        }
}

# HTTP를 HTTPS로 리다이렉트 (선택사항).
server {
        listen 80;
        server_name sub.domain.com;
        return 301 https://$server_name$request_uri;
}

 

 

위의 설정인 상태에서는 아래와 같이 리버스 프록시가 적용된다.

 

*/admin.html -> BE의 정적 리소스가 서빙.

*/api/** -> BE로 프록시 패스.

그외 -> FE로 프록시 패스.

http로 접근 -> https로 바뀌면서 FE로 리다이렉션.

 

Conf 파일 작성이 완료되었으면, 아래와 같이 명령어를 작성해 설정 파일을 적용한다.

sudo nginx -t && sudo nginx -s reload

 

Successful이 뜨면 정상적으로 설정 파일이 작성이 된 것이다.

이 포스팅이 도움이 되었으면 좋겠다.