Nginx를 써서 Node 백엔드와 통신하는 React Docker Image 만들기 (2) - Nginx

NightMiya827·2023년 12월 17일

(블로그 이사하면서 옮겨진 글입니다)

React 빌드

npm run build나 yarn run build 명령어를 통해 만들 수 있습니다. 그러면 본인이 설정한 폴더에 빌드된 결과물이 생성될 것입니다. 여기서 다루려는 건 Nginx에 대한 부분이고, React의 빌드에 대한 이야기가 아니기 때문에 이 과정에 대해서는 생략하겠습니다. 이 글에서 중요한 건 빌드의 결과물로 index.html파일을 포함한 폴더가 생성되며 그 폴더를 유저에게 전달할 수 있도록 만들어야한다는 점입니다.

Nginx

일단 Nginx가 어쩌다 생겨나게 되었고, 무엇을 위해 써야하는지, 그래서 우리가 Nginx로 어떤 목표를 달성해야하는지도 알고 넘어갈 필요가 있습니다. 하지만 이는 많은 블로그들에서 이미 설명하고 있는 부분이라 여기서 따로 정리하는 것보다 다른 분들의 글을 보시는 게 좋을 것 같아서 링크만 남겨두겠습니다.

Nginx 설치

설치

sudo apt install nginx
만약 위 커맨드로 설치가 안되거나 os가 ubuntu가 아닌 경우에는 공식 홈페이지를 참고해서 세팅해보자

실행

sudo service start nginx

실행 확인

sudo service status nginx

Nginx 설정 구성하기

Nginx는 etc/nginx/nginx.conf파일에 있는 파일을 읽어서 설정을 구성하도록 되어있습니다.가이드 문서

nginx.conf 파일을 열어서 밑으로 내리다보면

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/site-enabled/*;

라고 적혀있는 부분을 찾을 수 있습니다. conf.d폴더와 site-enabled 폴더에 적절한 내용을 채워넣으면 우리가 원하는 파일을 Nginx가 제공하도록 만들 수 있을 것 같습니다.

내가 설정한대로 파일을 제공하게 만들기 위해서conf.d폴더에 default.conf파일을 추가했습니다.

// default.conf

error_log /var/log/nginx/error.log;

upstream api {
    server server:5000;
}

# Redirect all traffic to HTTPS
server {
    listen 80;
    server_name testserver.com;
    return 308 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name testserver.com;
    ssl_certificate /usr/share/nginx/cert/localhost.crt;
    ssl_certificate_key /usr/share/nginx/cert/localhost.key; 

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;

    }

    location ^~ /api {
       proxy_set_header X-Forwarded-Host $host;
       proxy_set_header X-Forwarded-Server $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://api;
    }
}

이 파일이 Nginx설정의 핵심입니다. 여기서 각 옵션이 무슨 동작을 하는지 이해하고 적절한 옵션을 세팅해야만 정확히 우리가 원하는 동작만을 수행하도록 만들어줄 수 있습니다.

listen

listen 443 ssl;은 443 포트를 사용하겠다는 의미입니다. ssl과 같은 추가적인 옵션을 받지만 기본 기능은 어떤 곳으로 들어오는 요청들을 관리할지를 정의하는 곳입니다.[공식문서]
그리고 ssl은 https로 통신하겠다는 것을 나타내며 ssl_certificate, ssl_certificate_key 옵션을 같이 추가하여 ssl 인증서의 위치도 같이 지정해주어야합니다.(기본 경로는 존재하지않는 듯 합니다.)[공식문서]

제 코드에서는 아래 부분에 해당합니다.

    ssl_certificate /usr/share/nginx/cert/localhost.crt;
    ssl_certificate_key /usr/share/nginx/cert/localhost.key;

443은 https 요청에 대한 기본 포트입니다. https://testserver.com:443으로 입력하지 않고 https://testserver.com으로만 입력해도 443포트로 요청이 가게 됩니다. 그리고 Nginx에서는 443포트를 listen할 경우 기본이 ssl이라고 가정하며 ssl관련 세팅을 하지않을 경우 에러가 발생합니다.

server_name

listen에서 추가한 주소와 연결된 서버명을 지정합니다. [공식문서]
만약 제 서버의 IP 주소가 127.0.0.1이라면, https://testserver.com:443(혹은 https://testserver.com)에 접속을 시도하면 https://127.0.0.1:443에 요청을 보낸 것으로 처리됩니다.
그리고 server_name은 여러개를 지정할 수 있습니다. 이 경우 어떤 server_name을 입력해도 listen에 지정된 주소로 보낸 것으로 처리됩니다.

location

location 설정은 요청의 uri에 따라서 어떻게 처리할 것인지에 대한 상세한 내용이 담겨있습니다. 예를들어,location /는 server_name:port/로 시작되는 모든 요청에 적용된다는 것을 의미합니다.(즉, 모든 요청에 대해서 적용된다는 의미입니다.) 그리고 location /api는 server_name:port/api/형태의 요청들을 처리하겠다는 의미입니다. 위의 코드에서는 /형태의 요청은 빌드한 리액트 코드를 제공해주고, /api 요청에 대해서는 proxy를 이용하겠다고 정의하고 있습니다. location의 위치 설정에 대한 디테일한 규칙은 이 블로그를 참고하기를 추천드립니다.

root, index

root는 디렉토리를, index는 파일명을 지정합니다. 결과적으로 https://testserver/$uri의 요청이 왔을 때, root/$uri/index파일을 제공해주게 됩니다. index가 지정이 되지 않은 경우 기본값으로 index.html로 설정됩니다.

try_files

요청이 들어오면 순서대로 매칭되는 파일이 있는 룰을 확인하고, 매칭되는 룰이 있다면 거기로 요청을 리다이렉트합니다. /invalid/url같은 요청이 들어왔다고 가정하면, root/invalid/url경로는 존재하지 않으므로 $uri, $uri/는 매칭에 실패해서 넘어갈 것이고, /index.html로 리다이렉트 됩니다. 즉, 이 경우에는 어떤 경로를 넣든 반드시 index.html을 제공해주게됩니다.

proxy_pass, proxy_set_header

location을 통해 매칭된 패턴을 proxy_pass에 입력한 경로로 바꿔치기합니다. https://testserver/api/some/req의 요청이 들어오면, http://api/some/req로 그 요청을 재전송합니다. proxy_set_header는 http 요청의 헤더를 변경하는 역할을 합니다.

proxy_pass와 아래에 소개할 upstream기능과 연결해서 로드밸런싱을 수행하도록 만들 수 있습니다.

upstream

proxy_pass에서 세팅된 경로와 upstream에서 세팅한 받는 경로가 일치할때, upstream의 세팅에 맞춰서 요청이 전달됩니다. 여기서는 https://testserver/api/some/req요청을 유저가 보내면 proxy_pass에 의해 http://api/some/req로 변환되고, api가 다시 upstream과 매칭되어서 http://server:5000/some/req로 변환됩니다. upstream에서 server는 여러개를 세팅할 수 있고 여러개로 세팅하는 경우에는 그 중 한개의 서버로 요청이 전달됩니다. 이와 관련된 설정도 많이 존재하며 여러개의 서버를 띄우고 로드밸런싱이 필요한 경우에 유용하게 활용할 수 있습니다.

error_log

지정된 경로에 에러로그를 저장합니다.

Nginx 서버 띄우기

위에서 root디렉토리로 설정한 /usr/share/nginx/html 폴더에 처음에 빌드한 리액트 웹페이지를 넣어줍시다.
ssl을 설정한 경우라면 ssl_certificate,ssl_certificate_key 경로를 설정한 곳에 인증서를 넣어주어야하고, 위와같이 api서버가 별도로 존재해서 upstream으로 연결한 상황이라면 upstream서버도 같이 띄워줍시다.

이제 /usr/share/nginx/html/index.html파일이 내가 만든 리액트 웹페이지가 되고, server_name으로 접속하면 내가 만든 리액트 웹페이지를 볼 수 있습니다.

NightMiya827

이전 포스트

Nginx를 써서 Node 백엔드와 통신하는 React Docker Image 만들기 (1)

다음 포스트

Nginx를 써서 Node 백엔드와 통신하는 React Docker Image 만들기 (2) - Nginx

React 빌드

Nginx

Nginx 설치

Nginx 설정 구성하기

Nginx 서버 띄우기

Nginx를 써서 Node 백엔드와 통신하는 React Docker Image 만들기 (1)

Nginx를 써서 Node 백엔드와 통신하는 React Docker Image 만들기 (2) - Nginx

0개의 댓글

관련 채용 정보