[AWS] EC2에 React + Node.js 앱 배포하기! (2) - Nginx를 사용한 React 배포

지혜의 Devlog 📚·2021년 10월 11일

Nginx React aws ec2

[AWS] EC2에 React + Node.js 앱 배포하기!

목록 보기

2/3

이번 포스팅은 지난 포스팅에 이어서 Nginx로 React를 배포하는 과정을 정리해 보려 한다.
배포 과정 중 제일 오류가 많았기에(~~난 울지 않or..☆˚´″°³о~~), 차근차근 짚어서 보도록 하겠다.

그.
전.
에.

Nginx에 대하여 알고 싶다면,
전에 포스팅한 Nginx란? 글을 한 번 읽어보면 좋겠다! 😁

그럼 본격적으로 Nginx 설치와 React 앱 배포 과정을 알아보자!

🧚 1. Nginx 설치 ✨

AWS EC2 인스턴스 환경에 따라 Nginx를 설치해 준다.

$ sudo yum install nginx // Amazon Linux 1 환경
$ sudo amazon-linux-extras install nginx1.12 // Amazon Linux 2 환경

(필자는 지난번 인스턴스 생성과정에서 Linux2 환경으로 생성했기에, 아래 코드로 Nginx를 설치하였다.)

🧚 2. React(client) 앱 build ✨

지난 포스팅에서 배포할 앱을 git clone [프로젝트 url] 해오는 것까지 완료하였다.
이제 프로젝트 내부의 React(client) 앱 상위 폴더로 진입하여 yarn install 후 build를 생성할 것이다.
(이 두 과정은 이후 개발이 진행하여 새로운 버전을 배포할 때마다 새로운 버전을 배포할 때마다 이뤄지도록 해야 한다.)

$ yarn install
$ yarn run build

build가 성공적으로 진행된다면 build라는 디렉토리가 생성되고 build 내부에는 index.html이라는 파일이 있을 것이다. 이 파일은 이후 Nginx 설정에서 사용되며 React로 만들어진 웹에서의 시작점이라고 할 수 있다.

만약 build를 진행하는 과정이 지나치게 오래 걸리거나 실패할 수 있는데, 혹시 그렇다면 t2.micro의 메모리로 감당할 수 없는 규모의 앱일 가능성이 높다.
바람직하지 않지만, 지금 당장의 배포에 의의를 두기 위해서는 인스턴스 외부의 로컬에서 build를 진행하고 build 디렉토리를 받아오는 방법도 있다.(~~로컬에서 build를 진행하고 git pull과 같은...~~)

🧚 3. NginX 설정 ✨

Nginx와 관련된 설정 파일들은 /etc 하위에 존재하므로, sudo 권한을 이용해서 파일 생성과 수정 등을 해야 한다.

3-1. nginx.conf 열기

우선 아래 명령어를 통해 해당 파일을 열면 기본적으로 여러 내용이 이미 설정되어 있는 것을 확인할 수 있다.

$ sudo vi /etc/nginx/nginx.conf

nginx.conf 내에서 React 프로젝트의 build로 바로 이어지게 설정할 수도 있지만, 설정들을 깔끔하게 관리하기 위해서 일반적으로 선호되는 방식은 /etc/nginx 내에 sites-enabled 디렉토리를 생성하여 여기에 각 서비스의 설정을 넣고 nginx.conf가 이들을 확인하도록 하는 것이다.

하나의 인스턴스 내부인데도 ‘각 서비스’라고 표현한 것은, 가상 호스트(서버) 개념을 사용할 수 있기 때문이다. 이를 통해 하나의 컴퓨터, 즉 하나의 IP 내에서 여러 웹을 배포할 수 있다.(Nginx의 장점이라 할 수 있겠다. 🤗)

3-2. nginx.conf 수정

지금은 앞서 말한 대로 sites-enabled 디렉토리에 따로 설정을 만들어줄 것이므로, server 블럭 행들은 모두 주석 처리(행 앞에 #) 하도록 한다. 그리고 server 블럭 바로 위에 아래와 같이 include /etc/nginx/sites-enabled/*.conf;를 추가함으로써 sites-enabled 하위의 설정 파일들을 포함하도록 한다.

...

include /etc/nginx/conf.d/*.conf;
(✨ 코드 추가) include /etc/nginx/sites-enabled/*.conf;

# server {
#    listen       80 default_server;
#    listen       [::]:80 default_server;
#    server_name  _;
#    root         /usr/share/nginx/html;
    # Load configuration files for the default server block.
#    include /etc/nginx/default.d/*.conf;
#    location / {
#    }
#    error_page 404 /404.html;
#        location = /40x.html {
#    }
#    error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#    }
# }

...

3-3 sites-available, sites-enabled 설정

일반적인 방식은 sites-available 디렉토리에 필요한 파일들을 작성한 후 이들과 연결되는 symbolic link(symlink)를 sites-enabled에 추가하는 것이다. 때문에 /etc/nginx 내부에 두 디렉토리를 모두 생성해 준다. 그리고 sites-available 내에 원하는 이름으로 설정 파일을 생성해 열도록 한다.

$ sudo mkdir /etc/nginx/sites-available
$ sudo mkdir /etc/nginx/sites-enabled
$ sudo vi /etc/nginx/sites-available/#######.conf

지금은 도메인 등록도 되어있지 않고, HTTPS를 위한 준비도 되어있지 않으므로, HTTP에 해당하는 port 80에 대해서 아주 기본 설정만 포함한다.

server {
  listen 80;
  location / {
    root /home/ec2-user/#######/#######/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

location 뒤의 /는 directive라고 하는 부분인데, IP 주소나 도메인의 뒷부분인 URI에 대응된다. /만 쓰면 ‘/’로 시작하는 모든 URI에 해당한다는 것으로 현재 설정은 이 인스턴스의 IP 주소로 port 80을 통해 들어오는 모든 URL을 연결시켜주는 것이다.
root 행에는 아까 Git을 통해 가져온 프로젝트 내부의 build 디렉토리 경로를 입력한다.

3-4 sites-enabled > symlink 생성 및 Nginx 설정 테스트

$ sudo ln -s /etc/nginx/sites-available/#######.conf /etc/nginx/sites-enabled/#######.conf
$ sudo nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

위와 같은 내용이 출력되면 설정의 문법이 정상적이라는 것이다.

3-5 Nginx 동작

이제 Nginx를 동작시키고, 웹 브라우저에서 AWS EC2 인스턴스 IP 주소를 입력하면 build한 React 앱으로 연결되는 것을 확인할 수 있다.
(AWS EC2 인스턴스 IP 주소로 바로 연결할 때 https로 들어가지는데, 현재는 http만 설정했기 때문에, http로 수정하면 들어가질 것이다.)

$ sudo systemctl start nginx

만약, 500 Internal Server Error가 발생한다면, build까지의 경로로 접근할 때 거치는 디렉토리들에 대해 외부에서의 실행 권한이 없어서 발생하는 문제일 가능성이 높으므로, 홈 디렉토리인 /home/ec2-user의 권한을 others의 실행 권한을 포함한 711로 설정한다.