[AWS EC2] EC2에 React 앱 + Node.js 서버 배포 2 - Nginx + React

이전 글에서 EC2를 위한 VPC 구성 및 보안 그룹을 생성했고 EC2를 생성하여 SSH로 접속하는 방법을 알아보았다.

 

이번 글에서는 이전에 생성한 EC2에 Nginx를 설치하고 React로 생성한 프로젝트를 빌드하여 실행시켜보겠다.

 

1. SSH로 이전에 생성한 EC2에 접속

 

2. 필요한 패키지 다운받기

이번 테스트에서는 git에 있는 소스를 직접 EC2에 받아서 실행한다고 가정하겠다. 아래 명령으로 git과 nginx를 설치한다.

 

$ sudo yum update
$ sudo yum install git
$ sudo yum install nginx

 

Nginx에 대해 Amazon Linux 1 같은 경우에는 그냥 이렇게 하면 설치가 진행되지만, Amazon Linux 2의 환경에서는 nginx is available in Amazon Linux Extra topics “nginx1.12” and “nginx1” 과 같은 말이 표시될 것이다. 이때는 아래 명령어로 다시 설치를 진행한다.

 

$ sudo amazon-linux-extras install nginx1.12

 

git clone을 통해 프로젝트를 받아온 후, (git clone 명령은 생략했다.) build를 진행할 것이다. build를 하기에 앞서 yarn 자체를 설치하기 위해 아래와 같은 명령을 실행한다. 이 과정에서 node 또한 설치가 된다. 

 

$ curl -o- -L https://yarnpkg.com/install.sh | bash
$ source ~/.bashrc
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
$ . ~/.nvm/nvm.sh
$ nvm install --lts

 

nvm install node 명령어를 통해 node를 설치할수도 있지만 최신 버전이 설치되기 때문에 LTS 버전을 설치하고자 하는 경우에는 nvm install --lts 명령어를 사용한다.

 

이제 yarn을 사용할 수 있기 때문에 git clone 한 프로젝트로 이동하여 프로젝트에서 사용하는 dependency들을 추가한 뒤 빌드를 진행한다.

 

$ yarn install
$ yarn run build --prod

 

build를 하고 나면 build 디렉토리가 생긴다. build 디렉토리 내부에 index.html 파일이 생성되는데 이 파일이 React로 만들어진 웹의 시작점이며 Nginx 설정 시에도 사용하게 된다.

 

3. Nginx 설정하기

Nginx와 관련된 설정 파일들은 /etc 하위에 존재하므로, sudo 권한을 이용해서 파일 생성과 수정 등을 해야 한다. 아래 명령을 통해 설정 파일을 열면 이미 기본적으로 여러가지 설정이 되어 있는 것을 확인할 수 있다.

 

$ sudo vi /etc/nginx/nginx.conf

 

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

 

nginx.conf 파일의 http { } 블럭 내부에 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 {
#    }
#}

...

 

처음 Nginx를 설치했다면 sites-enabled 디렉토리가 없으므로, 이를 직접 생성해야 한다. 그러나 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 /는 이 instance의 IP 주소로 port 80을 통해 들어오는 모든 URL을 연결시켜주는 셈이다. root 행에는 아까 Git을 통해 가져온 프로젝트 내부의 build 디렉토리 경로를 입력한다.

 

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

 

이제 위의 명령어를 통해 sites-enabled에 symlink를 생성하고, Nginx 설정을 테스트한다.

 

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

 

위와 같은 내용이 출력되면 설정의 문법이 정상적이라는 것이다. 이제 아래 명령어로 nginx를 실행한다.

 

$ sudo systemctl start nginx

 

브라우저를 켜고 EC2 인스턴스의 IP (Public IP 또는 Elastic IP 또는 도메인 등...)를 입력하면 build한 React 앱으로 연결되는 것을 확인할 수 있다.

 

 

하지만 위와 같이 500 에러가 발생할 수 있는데 이는 외부에서 build까지의 경로로 접근할 때 거치는 디렉토리에 대한 실행 권한이 없어서 발생할 가능성이 높다. 따라서 아래 명령어로 외부 실행권한을 준다.

 

$ chmod 711 /home/ec2-user

 

이제 다시 실행해보면 아래와 같이 앱이 정상 동작하는 것을 확인할 수 있다.

 

---

지금까지 구성한 내용을 그림으로 보면 다음과 같다.

 

 

다음 글에서는 EC2에 Node.js + express를 사용하여 만든 백엔드 프로젝트를 배포하고 실행하는 방법에 대해 알아보겠다.

 

참고

• https://medium.com/@bdv111/aws-ec2%EC%97%90%EC%84%9C-nginx%EB%A1%9C-react-%EC%95%B1-%EC%A7%81%EC%A0%91-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-c1e09639171e