안녕하세요. IT 엘도라도 에 오신 것을 환영합니다.
글을 쓰는 것은 귀찮지만 다시 찾아보는 것은 더 귀찮습니다.
완전한 나만의 것으로 만들기 위해 지식을 차곡차곡 저장해 보아요.   포스팅 둘러보기 ▼

AWS (Amazon Web Service)

[AWS] EC2에 React 프로젝트 배포하기 (Amazon Linux 2, Nginx)

피그브라더 2020. 11. 26. 17:31

EC2 인스턴스를 생성하고 해당 EC2 인스턴스에 SSH로 접속하는 방법에 대해서는 이 포스팅을 참조하자. 여기서는 이미 해당 포스팅의 내용에 기반하여 EC2 인스턴스를 생성했고(AMI : Amazon Linux 2) 해당 EC2 인스턴스에 SSH 원격 접속이 이뤄진 상태라고 가정하고 설명을 진행하도록 하겠다. 즉 아래에서 설명할 모든 명령어들은 SSH 접속 후 EC2 인스턴스의 터미널에서 입력하는 명령어들에 해당한다.

 

1. 기본 소프트웨어 및 Nginx, Node.js 설치

$ sudo yum update

 

현재 EC2 인스턴스에 설치되어 있는 모든 소프트웨어 패키지들을 업데이트한다. 개발자라면 yum 혹은 apt 명령어에 대해 한 번쯤은 들어봤을 것이다. yum과 apt는 둘 다 Linux 운영체제에서 소프트웨어 패키지들을 쉽게 설치 및 관리할 수 있도록 도와주는 패키지 관리자(Package Manager)이다. 즉 Linux 운영체제의 컴퓨터에서는 각종 소프트웨어를 설치할 때 yum 혹은 apt를 사용하게 된다.


$ sudo yum install git

 

yum을 이용하여 버전 관리 시스템에 해당하는 Git을 설치한다. 그래야 원격 저장소에서 프로젝트 리포지토리를 Clone 해올 수 있다.


$ sudo amazon-linux-extras install nginx1.12

 

웹 서버에 해당하는 Nginx를 설치한다. 이때 amazon-linux-extras는 Amazon Linux 2에서 특정 소프트웨어 패키지(= Topic)를 설치하기 위한 리포지토리에 해당한다. 이것 또한 yum을 통해서 설치해줘야 하는 일종의 소프트웨어 패키지이다. 즉 amazon-linux-extras 리포지토리가 설치되지 않은 상태라면 "sudo yum install -y amazon-linux-extras" 명령어로 먼저 해당 리포지토리를 설치해줘야 한다(아마 기본으로 설치가 되어 있을 것이다). 설치되어 있는지 확인하려면 "amazon-linux-extras" 명령어를 실행해보자. 설치가 되었다면, 위의 명령어를 실행하여 amazon-linux-extras 리포지토리에 존재하는 nginx1.12를 설치하도록 한다. Amazon Linux 1에서는 단순히 yum을 이용해서 Nginx를 설치할 수 있지만, Amazon Linux 2에서는 amazon-linux-extras 리포지토리를 이용하여 설치하게 된다.


$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

 

nvm(Node Version Manager)을 설치한다. 이를 통해 각종 노드 버전을 설치 및 관리할 수 있다.


$ . ~/.nvm/nvm.sh

 

nvm을 활성화시킨다.


$ nvm install node

 

nvm을 이용하여 Node.js를 설치한다. 이때 npm(Node Package Manager)도 함께 설치된다.

 

2. Node.js 의존성 패키지 설치

$ git clone {원격 저장소의 프로젝트 리포지토리 주소}

 

원격 저장소에서 React 프로젝트의 리포지토리를 Clone 해온다.


$ cd {프로젝트 폴더의 절대 경로}

 

Clone 해온 프로젝트 폴더로 이동한다.


$ npm install

 

npm을 이용하여 해당 프로젝트의 Node.js 의존성 패키지들을 일괄 설치한다.

 

3. 정적 파일 번들링 및 Nginx 설정

$ npm run build

 

배포를 위한 정적 파일들을 번들링 한다. 참고로 여기서는 Create React App 프로젝트를 기준으로 설명한다. 이 경우 내부적으로 Webpack에 의해 해당 프로젝트가 사용하는 모든 정적 파일들이 번들링 되어 build 폴더 내에 위치하게 된다. 개발 시에는 "npm start" 명령어를 통해 Webpack 개발 서버를 실행해도 충분했지만, 실제 배포 시에는 성능 최적화를 위해 정적 파일들을 이와 같이 반드시 번들링해야 한다. 명령어를 실행하고 나면 public 폴더 및 src 폴더와 같은 위치에 build 폴더가 생성되어 있을 것이다. 그리고 나면, (뒤에서 설명하겠지만) 웹 서버에 해당하는 Nginx가 이 폴더에 위치한 정적 파일들을 서비스하도록 설정해주면 된다.


$ sudo vi /etc/nginx/nginx.conf

 

Nginx 설정 파일을 수정한다. /etc 디렉토리 하위에 위치한 파일이므로 수정하려면 반드시 sudo를 붙여야 한다. 파일의 내용은 다음과 같이 수정한다.

 

  1. sites-enabled 디렉토리를 활용할 것이므로 server 블록의 내용은 전부 주석(#) 처리
  2. server 블록 위에 "include /etc/nginx/sites-enabled/*.conf;"를 작성

 

sites-enabled 디렉토리와 관련한 설명은 바로 다음에 이어서 하도록 하겠다. 지금은 일단 하라는 대로 따라 하자.


$ sudo mkdir /etc/nginx/sites-enabled

 

사실 Nginx 설정 파일에 해당하는 /etc/nginx/nginx.conf 파일의 내용을 수정하면 Nginx와 build 디렉토리를 바로 연결하는 것도 가능하다. 그러나 각 웹 서비스의 설정 파일들을 깔끔히 관리하기 위해 우리는 /etc/nginx/sites-enabled 디렉토리를 생성하여 활용할 것이다. '각 웹 서비스'라고 표현한 이유는 해당 EC2 인스턴스에서 여러 개의 웹 서비스를 배포하는 것도 가능하기 때문이다. 물론 당장은 하나의 웹 서비스이지만, 확장성을 염두에 둔 방식이라고 봐주면 되겠다. /etc/nginx/sites-enabled 디렉토리 내에는 각 웹 서비스의 설정 파일들을 위치시킬 것이다. 그리고 Nginx의 설정 파일(/etc/nginx/nginx.conf)에서 해당 설정 파일들을 전부 로드하도록 하면(위에서 이미 진행함) 도메인별로 적절한 웹 서비스를 제공해주게 된다.


$ sudo mkdir /etc/nginx/sites-available

 

그런데 우리는 각 웹 서비스의 설정 파일들을 /etc/nginx/sites-enabled 디렉토리에 직접 작성하진 않을 것이다. 대신, /etc/nginx/sites-available 디렉토리를 생성하고 이곳에 설정 파일들을 작성할 것이다. 그리고 그 파일들의 바로가기(Symbolic Link) 파일들을 sites-enabled 디렉토리에 추가하는 방식을 택할 것이다. 이것 또한 일종의 관습이다.


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

 

앞서 설명한 것의 연장선이다. /etc/nginx/sites-available 디렉토리에 우리 웹 서비스의 설정 파일을 생성한다. ### 대신 원하는 이름을 사용하면 된다. 그리고 파일 안에는 다음과 같은 내용을 작성한다. location 뒤에 쓰는 것은 Directive라 불리는 것으로, IP 주소 혹은 도메인의 뒷부분인 경로(path)에 대응하는 부분이라 보면 된다. 해당 값과 매칭 되는 경로로 접속이 시도되었을 때 서비스할 내용을 정의하는 것이다. root 행에 작성하는 경로가 바로 배포할 정적 파일들이 위치한 build 디렉토리의 절대 경로이다.

server {
    listen 80;

    location / {
        root build 디렉토리의 절대 경로;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

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

 

방금 생성한 설정 파일의 바로가기(Symbolic Link) 파일을 /etc/nginx/sites-enabled 폴더에 추가해준다.

 

4. Nginx 테스트 및 실행

$ sudo nginx -t

 

Nginx가 잘 설정되었는지 테스트한다. 다음 문구가 출력되면 테스트가 성공한 것이다.

 

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

> nginx: configuration file /etc/nginx/nginx.conf test is successful


$ chmod 711 /home/ec2-user

 

Nginx가 build 디렉토리까지 접근할 때 거치는 디렉토리들에 대해 실행 권한을 부여한다. 그래야 500 에러가 발생하지 않는다.


$ sudo systemctl enable nginx

 

EC2 인스턴스를 껐다가 다시 실행했을 때 Nginx가 자동으로 실행되도록 설정한다.


$ sudo systemctl start nginx

 

Nginx를 실행하여 서버를 연다. 이제 해당 EC2 인스턴스의 IP 주소나 도메인으로 한 번 접속해보자.

 

 

 

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

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