[Nginx] Ubuntu Server에 Nginx 서버 구축하기

글을 시작하기에 앞서

 

장고, 스프링을 AWS 서버에 수동으로 배포한 글과 마찬가지로 서버를 구축하고 배포하는 방법은 다양한 방법이 존재합니다.

제가 경험한 것을 바탕으로 작성된 글이며 이 포스트가 반드시 정답은 아님을 알려드리면서 시작합니다.

---

Nginx 개요와 역할

Nginx는 동시접속 처리에 특화된 웹 서버 프로그램입니다. 주로 전달자 역할만하는데 크게 두 가지의 역할이 있습니다.

 

정적 파일을 처리하는 HTTP 서버로서의 역할

웹서버의 역할은 HTML, CSS, Javascript, 이미지와 같은 정보를 웹 브라우저(Chrome, explore, Opera, Safari 등)에 전송하는 역할을 합니다.

 

응용프로그램 서버에 요청을 보내는 리버스 프록시로서의 역할

두번째 역할은 리버스 프록시(reverse proxy)입니다. 클라이언트가 서버에 요청(request)하면, 프록시 서버가 배후 서버(reverse server)로부터 데이터를 가져오는 역할을 합니다. 여기서 프록시 서버가 Nginx, 리버스 서버가 응용프로그램 서버를 의미합니다.

 

웹 응용프로그램에 리버스 프록시를 두는 이유는 요청에 대한 버퍼링이 있기 때문입니다. 클라이언트가 직접 App에 요청을 보내게 된다면 적어도 프로세스 1개가 응답 대기 상태가 되어야 합니다. 그렇기 때문에 프록시 서버를 둠으로써 요청을 배분하는 역할을 수행하게 하기 위해 Nginx를 사용합니다.

 

nginx.conf 파일에서 location 지시어를 사용하여 요청을 배분합니다. 밑에서 더 자세히 다루도록 하겠습니다.

 

AWS에 Nginx 설치하기

설치 및 제거

# 설치
sudo apt-get install nginx

# 제거
sudo apt-get remove nginx

# 버전확인
nginx -V

# nginx 설치 경로 확인
sudo find / -name nginx.conf

nginx 설치 경로를 확인해보면 다음과 같이 경로를 확인할 수 있습니다.

 

Nginx Location 설정법

위에서 짧게 말씀드렸듯, Nginx의 프록시 설정은 conf 파일의 location 지시어를 통해 설정하게 됩니다.

nginx.conf에서 설정하는 것이 아닌 다른 방법을 말씀드리려합니다.

 

우선 nginx 경로로 이동합니다.

cd /etc/nginx

nginx 경로로 접근하면 다음과 같이 구성되어있는 것을 확인할 수 있습니다.

이 중에서 집중해야할 폴더는 sites-available, sites-enabled 입니다. 우리는 sites-available 안에 있는 conf 파일을 통해 nginx의 location 설정을 진행할 것입니다.

(위 캡쳐화면에서 보이는 sites-available-origin, sites-enabled-origin 폴더는 백업 폴더입니다. 처음 nginx을 설치한 상태라면 존재하지 않는 폴더들입니다.)

 

sites-available : 가상 서버 환경들에 대한 설정 파일들이 위치하는 부분입니다. 가상 서버를 사용하거나 사용하지 않던간에 그에 대한 설정 파일들이 위치하는 곳입니다.

sites-enabled : sites-available 에 있는 가상 서버 파일들 중에서 실행시키고 싶은 파일을 symlink로 연결한 폴더입니다. 실제로 이 폴더에 위치한 가상서버 환경 파일들을 읽어서 서버를 세팅합니다.

nginx.conf : Nginx에 관한 설정파일로 Nginx 설정에 관한 블록들이 작성되어 있으며 이 파일에서 sites-enabled 폴더에 있는 파일들을 가져옵니다.

 

설정을 진행하다가 잘못 진행될 경우를 대비해 sites-available, sites-enabled 폴더들을 백업해 둡시다.

sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-origin
sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-origin

 

새로운 설정을 하기 위해 sites-available, sites-enabled 폴더 내부의 default 설정 파일들을 제거합니다.

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

 

그 다음 새로 설정파일을 생성합니다.

sudo touch /etc/nginx/sites-available/[원하는 파일 이름].conf

# 예시
sudo touch /etc/nginx/sites-available/mynginx.conf

 

sites-available 폴더 안에 mynignx.conf가 생성됐습니다. vi를 통해서 파일 안에 설정을 추가해줍시다.

sudo vi [새로 만든 파일이름].conf

server {
  listen 80;

  location / {
    root /home/ubuntu/S05P31A201/promise_web/dist;
    index index.html index.htm;
    try_files $uri /index.html;
  }
}

드디어 location 지시어가 등장합니다.

 

location / 이 부분은 루트 경로 진입시 설정입니다.

서버 도메인이 http://domain.com 이라면 이 도메인으로 접근하면 만나게 될 html 파일에 대한 내용을 작성하면 됩니다.

root 에서는 index.html이 위치한 폴더 경로 설정입니다.

index 에서는 해당 폴더에서 redirect 할 index.html에 대한 설정입니다.

try_files 는 nginx 자체의 라우팅 설정입니다. 모든 request를 index.html로 곧장 보내는 설정입니다.

 

예시로 가져온 것은 vue 로 빌드된 프로젝트의 경로로 설정한 것입니다.

빌드하고자 하는 프론트엔드 프레임워크에 따라서 설정을 다르게 해야할 수도 있으니 주의해주시기 바랍니다.

 

sites-available 폴더에 설정을 끝냈으니 이제 sites-enabled에 symlink를 하면 실제 서비스가 가능하게 됩니다.

아래의 명령어를 실행시킨 후 sites-enabled에 직접 들어가서 확인해보시길 바랍니다.

sudo ln -s /etc/nginx/sites-available/[파일이름].conf /etc/nginx/sites-enabled/[파일이름].conf

# 예시
sudo ln -s /etc/nginx/sites-available/mynginx.conf /etc/nginx/sites-enabled/mynginx.conf

 

이제 아래 명령어로 변경된 nginx 설정으로 서비스를 실행시켜 봅시다.

sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx

 

이제 도메인으로 접속해보면 서버에 빌드한 페이지가 성공적으로 배포된 것을 확인하실수 있습니다.

 

 

다음 포스팅에서는 https 적용을 위한 SSL 인증과 Backend API 적용에 대해서 다루겠습니다.

 

 

참고링크

https://whatisthenext.tistory.com/123

Nginx 이해하기 및 기본 환경설정 세팅하기

https://www.hanumoka.net/2019/12/29/react-20191229-react-nginx-deploy/

React를 Nginx웹 서버에 배포하기