Nginx를 사용한 웹 서버 구축하기

배경

직접 React와 Spring Boot로 만든 웹 서비스를 배포하기 위해서 클라우드 인스턴스에 웹 서버를 구축하는 일이 필요합니다.

이번 포스트에서는 클라우드 서비스 플랫폼( AWS, Azure, GCP 등 )에서 만든 인스턴스에 웹 서버를 구축하는 과정을 포스트로 남겨보고자 합니다.

 

웹 서버 구축 환경

과정을 나열하기 앞서, 이번 포스트에서 사용한 인스턴스 환경을 먼저 소개하고자 합니다.

인스턴스 생성을 위해 Ubuntu 22.04 이미지를 사용했으며, 이 환경에서 웹 서버를 구축해나가고자 합니다.

하나의 인스턴스에 FE 서비스와 BE 서비스를 모두 구동할 예정입니다.

웹 서버와 API 서버를 구분하는 경우도 있는데, 제가 만든 서비스는 가벼운 서비스이기도 하고 사용자가 많지 않을 것이라고 판단해 하나의 인스턴스에 두 개의 서버를 모두 구현하고자 합니다.

API 서버 서비스 구현을 위한 설정 ( = Spring Boot 서비스를 실행하기 위한 서버 설정 )

Spring Boot는 Java를 기반으로 작동하는 서비스입니다.

따라서, Spring Boot를 사용하기 위해서는 Java를 설치하고 환경 변수 등록을 해주어야 합니다.

먼저 인스턴스에 만든 서비스에 맞는 Java를 설치해줍니다.

// Java 17버전 설치
sudo apt install -y openjdk-17-jdk

// 다른 버전 설치
// NN 자리에 원하는 버전 입력
sudo apt install -y openjdk-NN-jdk

위 코드를 통해 Java 실행을 위한 JDK를 설치해줍니다.

관리자 계정으로 접속하고 있는 경우에는 sudo를 빼주시면 됩니다.

 

정상적으로 설치가 되었는지 확인해보려면 설치한 Java의 버전을 확인해보면 됩니다.

// 설치된 Java 버전 확인
java --version

Java 17 버전 설치 완료

정상적으로 설치가 되었다면 위 명령어를 쳤을 때 이와 같이 나오게 됩니다.

이제 설치가 되었으니 Java를 환경 변수에 등록해주어야 합니다.

// ~/.bashrc 라는 파일에 환경 변수를 작성해두는 방법
echo 'export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64' >> ~/.bashrc
echo 'export PATH=$PATH:$JAVA_HOME/bin' >> ~/.bashrc
source ~/.bashrc

이 명령어까지 입력이 완료되었다면 Java 설치가 무사히 완료되었습니다.

 

웹 서버 서비스 구현을 위한 설정 ( = React 서비스를 실행하기 위한 서버 설정 )

React는 JavaScript를 기반으로 작동하는 서비스입니다.

JavaScript를 브라우저가 아닌 곳에서 실행하기 위해서는 JavaScript 런타임 환경인 Node.js 설치가 필요합니다.

먼저, Node.js 설치를 위해 레포지토리를 추가해줍니다.

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

18 버전의 Node.js 설치를 위한 파일을 가져오는 명령어입니다.

혹시 curl 패키지가 설치되어 있지 않다면 아래 명령어를 통해 curl을 설치해줍니다.

// curl 패키지 설치
sudo apt install -y curl

 

파일 다운로드가 완료되었다면 이제 다운 받은 파일을 기반으로 Node.js를 설치해줍니다.

// Node.js 설치
sudo apt install -y nodejs

위 명령어를 통해 설치가 완료되면 Node.js가 정상적으로 설치되었는지 확인해봅시다.

마찬가지로 설치된 Node.js의 버전을 확인하는 방법을 통해 설치 여부를 확인합니다.

node -v
npm -v

node는 Node.js를 의미하며, npm은 Node Package Manager를 의미합니다.

Node.js를 설치하면 기본적으로 npm이 함께 설치됩니다.

 

웹 서버 애플리케이션 설치 ( Nginx 설치 )

API 서비스는 자체적으로 서비스이지만 React와 같이 FE 프로젝트는 정적 파일일 뿐 서비스가 아닙니다.

따라서, 이런 FE 정적 파일을 실행시키고 브라우저에 보여주기 위해서는 웹 서버 애플리케이션의 도움이 필요합니다.

정적 파일을 실행시켜줄 서비스가 바로 웹 서버 애플리케이션입니다.

대표적으로 Nginx, Apache가 있습니다.

저는 그 중에서 Nginx를 통해 만들어보도록 하겠습니다.

// Nginx 설치
sudo apt install -y nginx

위 명령어를 통해 설치가 완료되었다면 이제 이 Nginx 서비스를 시작 프로세스로 등록합니다.

반드시 필요한 작업이라고 할 수는 없지만 웹 서버를 실행하기 위해 중요한 프로세스이기 때문에 인스턴스가 재부팅 될 때마다 일일히 수동으로 켜주는 작업을 하지 않고 실행이 되도록 하기 위한 작업입니다.

// Nginx 프로세스를 systemctl에 등록 및 시작
sudo systemctl start nginx
sudo systemctl enable nginx

이 systemctl 이라는 것을 통해 백그라운드 프로세스를 관리할 수 있습니다.

Nginx 뿐만 아니라 추구 API 서버 서비스와 같은 경우도 모두 등록해 인스턴스를 재부팅해도 자동으로 실행되게 만들 수 있습니다.

이 부분은 실제 서비스 배포하는 포스트에서 다루도록 하겠습니다.

 

이제 백그라운드 프로세스로 등록한 Nginx 서비스가 잘 실행중인지 확인해보도록 하겠습니다.

sudo systemctl status nginx

위 명령어를 입력했을 때 이미지와 같이 초록색 글씨로 Active라고 나와 있으면 정상적으로 작동 중이라는 의미입니다.

이외의 글씨가 뜨는 경우 Nginx를 재설치해보거나 systemctl에 재등록을 해보시길 바랍니다.

 

Nginx 설정 파일 생성 및 설정

Nginx는 웹 서버 라우팅 또한 담당합니다.

FE 파일 내에서 다양한 라우팅 기술을 사용하게 될 텐데, 이 라우팅 경로들이 실제 인스턴스 도메인에서도 정상적으로 작동할 수 있도록 설정을 해주어야 합니다.

우선 아래 명령어를 통해 기본 설정 파일을 생성하고 열어주도록 합시다.

// nano 편집기를 통해 열기
// {service_name}에는 자유롭게 이름 설정
sudo nano /etc/nginx/sites-availables/{service_name}

그럼 빈 창이 열리는데 이 곳에 Nginx 기본 라우팅 설정을 적용해주어야 합니다.

자세한 설정은 실제 배포를 다루는 포스트에서 말씀드리도록 하겠습니다.

server {
    listen 80;
    server_name {domain-IP};

    location / {
        root /var/www/{정적 파일 경로};
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

위와 같은 형식으로 작성되어야 합니다.

저 중괄호 안에 어떻게 값이 들어가야 하는지는 실제 배포를 다루는 포스트에서 말씀드리기로 하고 우선은 형태만 잡아두도록 합시다.

우선의 임의로 값을 넣어두면 될 것 같습니다. ( 너무 문법에 맞지 않는 값을 입력하면 저장이 되지 않습니다 )

위 작업까지 완료되었다면 Nginx를 사용할 준비가 모두 완료되었습니다.

 

결론

웹 서버 구현을 위한 준비 작업은 어렵거나 오래 걸리지 않지만 아무래도 세부적인 설정을 하는 과정이 복잡하고 어느정도 이해를 요구하는 것 같습니다.

준비 단계에서는 대부분 설치하는 과정이기 때문에 Linux를 어느정도 다뤄본 분들이라면 전혀 어렵지 않게 따라올 수 있다고 생각합니다.