AWS EC2에서 Nginx를 이용하여 react 배포하기

편의를 위해 react로 배포했지만 html, css, js파일 등 정적파일만 있다면 배포 가능하다.

EC2 인스턴스 생성

AWS 로그인 후 EC2 서비스에 들어간다.

우측 상단에서 리전(region)을 변경할 수 있는데, 나는 서울로 했다. 오하이오, 버지니아 등으로 설정 시 물리적 거리 때문에 통신 속도 차이가 크다.

좌측 메뉴바의 인스턴스 클릭, 우측 주황색 버튼인 인스턴스 시작을 누른다.

인스턴스 이름을 설정하고 인스턴스에서 사용할 운영체제를 선택한다.

나의 경우는 Ubuntu로 했다.

과거 Amazon Linux를 사용한 전적이 있는데, 오류 발생시 정보 찾기도 힘들고 각종 툴들과 호환성이 떨어져 해당 운영체제는 비추천한다.

키 페어는 나의 경우는 RSA .pem을 통해 설정하였다. 굳이 필요하지 않다면 키페어 없이 인스턴스를 시작해도 되나 보안상 좋지 않다.

그 이외 설정 사항들은 전부 기본으로 두고 인스턴스를 생성한다. (추후 따로 설정한다.)

보안그룹 설정 및 적용

인바운드, 아웃바운드 설정을 위해 보안그룹을 생성해야 한다.

좌측 메뉴바의 보안그룹 선택 후 우측 주황색 버튼인 보안 그룹 생성 버튼을 클릭.

보안그룹 이름을 작성하고 아래로 내리면 다음과 같은 규칙 창이 있다.

인바운드 규칙은 인스턴스로 들어오는 요청을 처리하는 규칙이고,

아웃바운드 규칙은 인스턴스에서 나가는 요청을 처리하는 규칙이다.

허용할 요청을 각각에 추가해주면 된다.

우리는 Nginx를 통한 웹 서버를 구축할 것이므로 80번 포트(HTTP), 443번 포트(HTTPS)로 오는 모든 요청을 받아줄 것이다.

두 번째 빨간 사각형(소스)는 IPv4 프로토콜을 사용해서 들어올때와 IPv6 프로토콜을 사용해서 들어올 때 모두를 허용해 주어야 한다.

IPv4 HTTP
IPv4 HTTPS
IPv6 HTTP
IPv6 HTTPS

아웃 바운드 규칙은 모두 허용해준다(기본적으로 모두 허용임)

그대로 보안 그룹을 생성한다.

인스턴스 메뉴로 넘어가서 아까 만든 인스턴스 마우스 우클릭 -> 보안 -> 보안 그룹 변경을 클릭한다.

보안 그룹을 선택하고 보안 그룹 추가를 누른다.

이로써 이번 포스트의 EC2 설정은 끝났다. (추후 탄력적 IP 설정도 해줘야 한다)

EC2 인스턴스에서 리액트 빌드하기

CI/CD 구축이 되지 않았기 때문에, 임시로 git clone을 사용한다.

ssh이용, EC2 인스턴스에 접속한다.
git clone을 통해 react 레포지토리를 가져온다.
sudo apt-get update
sudo apt install npm
npm run build

위 과정을 통해 react 빌드 파일을 생성한다.

Nginx로 빌드파일 서빙하기

우리는 일단 빌드파일이 있는 인스턴스에 Nginx를 설치할 것이다. 추후 아키텍처가 변경되면 이 구조는 변할 수 있다.

sudo apt install nginx로 nginx를 설치한다.

sudo vim /etc/nginx/nginx.conf로 설정 파일에 진입한다.

user root;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

그리고 해당 파일에서 user를 root로 변경해준다. (원하는 그룹으로 바꿔도 좋다. 추후 nginx의 build파일 접근 시에 권한 에러를 방지하기 위함이다.)

http {
        server{
                listen 80;
                server_name YOUR_EC2_ADDRESS.com;

                root /home/ubuntu/react/ProjARJS_ReactTest/build;
                index index.html;

                location / {
                        try_files $uri $uri/ =404;
                }
        }
}

http에 server를 추가하고, 위와 같이 설정해준다.

listen 80으로, 80번 포트로 요청을 받겠다는 것을 의미한다.

server_name에는 EC2 인스턴스의 주소를 적는다. 이때, 탄력적 IP를 사용중이지 않다면 인스턴스를 재부팅 할때마다 이 값도 수정해줘야한다. 따라서 추후 탄력적 IP 설정을 마치면 다시 이 값을 변경해 줄 것이다.

root에는 build파일이 위치한 경로를 절대 경로로 표시해 준다.

nginx.conf에서는 ~(홈 디렉토리)를 사용할 수 없으므로 전체 경로를 모두 명시해 줘야 함

위 설정을 마쳤다면, sudo systemctl start nginx, 혹은 sudo nginx -s reload를 통해 nginx를 시작한다.

그리고 브라우저에서, 위 server_name에 적은 YOUR_EC2_ADDRESS.com에 접속하면 우리가 만든 사이트가 서빙된다.

에러 발생시

cat /var/log/nginx/error.log 명령어를 통해 에러 로그 기록을 확인할 수 있다.

로그를 확인하고 적절한 조치를 취하자.

EC2 인스턴스 생성
- 보안그룹 설정 및 적용
EC2 인스턴스에서 리액트 빌드하기
Nginx로 빌드파일 서빙하기
- 에러 발생시