AWS EC2로 react+express 웹 배포

드디어...영원히 끝나지 않을 것만 같았던 졸업 프로젝트에 마지막이 찾아오네요...😂
항상 미루고 미뤘던 프로젝트 배포를 이제는 정말 해야할 때가 되었습니다..
AWS를 제대로 사용해본 경험이 별로 없어 이걸 할 수 있을까..과금 되지는 않을까..걱정이 많았는데요
저의 얼레벌레 배포기를 함께 보시죠!

📌 배포 전 우리 프로젝트의 상황은...

프로젝트는 react와 express 조합으로 구성되어 있습니다!
팀 협업을 위해 코드는 github에 올려둔 상태입니다.
따라서 코드는 git clone을 통해 여러 환경에서 쉽게 가져올 수 있는 상황이었습니다.

📌 AWS 알아보기

Amazon Web Services(AWS)는 전 세계적으로 분포한 데이터 센터에서 200개가 넘는 완벽한 기능의 서비스를 제공하는, 세계적으로 가장 포괄적이며, 널리 채택되고 있는 클라우드 플랫폼입니다.

AWS는 각자의 비즈니스와 조직의 니즈에 맞게 조합해 쓸 수 있는 클라우드 서비스를 제공합니다.
AWS 계정을 만든지 1년이 안 되었다면 일부 서비스에 한해 무료로 서비스를 사용할 수 있는 프리티어 혜택을 누릴 수 있으니 확인!
프로젝트 웹 서버를 구축해야 하므로, 가상 머신을 제공해주는 서비스인 EC2를 사용해야 합니다.

📌 EC2 인스턴스 생성하기

1. 먼저, 지역을 서울로 설정하는 걸 잊지 마시고!!
   

2. 서비스 > 컴퓨팅 > EC2를 선택합니다
   

3. 인스턴스 > 인스턴스를 선택합니다
   

4. 인스턴스 시작 버튼을 누릅니다
   

5. 인스턴스 시작 페이지를 설정합니다

   1. 이름 및 태그

   • 원하는 이름으로 설정합니다
     

   2. 애플리케이션 및 OS 이미지

   • 사용할 가상 머신의 OS를 설정하는 과정입니다. 저는 ubuntu를 사용했습니다.

     ❗여기서 주의할 점❗
     꼭 프리티어 사용 가능 문구를 확인하세요!!
     

   3. 인스턴스 유형

   • 인스턴스 유형은 쉽게 말하자면 가상머신의 사양을 선택하는 것이라고 생각하시면 됩니다. 저는 프리티어를 사용할 예정이기 때문에 t2.micro로 설정하였습니다!
     

   4. 네트워크 설정

   • 웹 배포를 할 예정이므로 HTTPS와 HTTP 트래픽 허용을 설정해 주었습니다. 인스턴스 생성 후에도 설정할 수 있으니, 꼭 이 단계에서 할 필요는 없습니다
     

   5. 인스턴스 시작

   • 나머지 부분은 건드리지 않고 바로 인스턴스 시작 버튼을 누르면 인스턴스 생성 완료!
     

📌 EC2 인스턴스 연결

인스턴스 id를 누르면 인스턴스 세부 정보 페이지로 들어갈 수 있습니다

우측 상단의 연결 버튼을 누르면

인스턴스에 연결 창이 나옵니다. 아래의 연결 버튼을 눌러줍시다.

그러면 이렇게 바로 aws 내에서 인스턴스에 연결할 수 있습니다!

📌 EC2로 프로젝트 가져오기

이제 인스턴스로 프로젝트를 가져와야 합니다
프로젝트는 github에 올라가 있기 때문에, git clone을 사용해서 가져오도록 합시다.

1. 먼저, 설치되어있는 패키지들의 새로운 버전이 있는지 확인하고, 버전을 업그레이드 시켜줍니다.

sudo apt-get update  # 현재 사용 가능한 패키지와 버전 목록만 업데이트
sudo apt-get upgrade # 목록에 있는 패키지에 대해서 최신 버전으로 재설치

2. 그 다음, git을 설치합니다

sudo apt-get install git

3. git 설치 후 git version을 확인해 git이 잘 설치되었는지 확인합니다.

git --version

4. git 설치가 잘 되었다면, git 계정정보를 서버에 저장합니다.

git config --global user.name "유저명"
git config --global user.mail "메일"

5. clone 받을 프로젝트를 담을 폴더를 만들고, 해당 폴더로 이동합니다.

sudo mkdir "폴더명"
cd "폴더명"

6. 이제 프로젝트를 clone 합니다.

git clone "프로젝트 repository 주소"

이렇게 인스턴스에 프로젝트를 가져왔습니다!

📌 react 빌드

프로젝트의 프론트 부분을 react로 개발했기 때문에, build를 해야하는데요!
그 전에 아직 nodejs 설치가 안 된 상태이기 때문에 nodejs와 npm 설치가 필요합니다.

1. nodejs 설치를 위해 curl 설치

sudo apt-get install curl

2. curl을 사용해 원하는 버전의 nodejs 설치

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

3. npm 설치

sudo apt install npm

4. 설치 후 버전 확인

node -v
npm -v

nodejs와 npm 설치가 끝났다면 build를 진행하면 됩니다.

npm run build

하지만 여기서 에러를 마주하고 맙니다....😱

바로 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 이 에러 인데요...
아마도 프리티어 인스턴스를 사용하다보니 메모리가 부족해서 이런 일이 생기지 않았나 싶습니다....

export NODE_OPTIONS=--max_old_space_size=800 를 터미널에 입력하면 해결이 된다는 글이 많았으나...전혀 먹히질 않았습니다ㅠ

결국 로컬에서 build 한 뒤 build한 파일을 filezilla로 옮기는 방법을 사용하기로 하였습니다.

👉 FileZilla로 EC2에 파일 옮기는 법
1. https://filezilla.softonic.kr/
위 링크에서 FileZilla를 다운받습니다.
2. 파일 > 사이트 관리자 > 새 사이트
3. 프로토콜 - SFTP
호스트 - 인스턴스의 퍼블릭 IPv4 DNS
로그온 유형 - 키 파일
키 파일 - AWS에서 생성한 pem key

이렇게 하면 인스턴스와 filezilla가 연결되면서, 인스턴스에 파일을 쉽게 올리고 삭제할 수 있습니다.

FileZilla를 사용해 build한 파일을 인스턴스에 올렸습니다

📌 NginX 설치 및 설정

배포를 위해 nginx가 필요합니다
우선, nginx를 설치합니다

 sudo apt install nginx

다음으로 nginx에서 몇 가지를 설정해줘야 하는데요

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled
sudo vi /etc/nginx/sites-available/원하는 이름.conf

site-available과 sites-enabled라는 폴더를 만들고, sites-available에 원하는이름.conf 파일을 만들어 줍니다.

#/etc/nginx/sites-available/원하는 이름.conf

server {
  listen 80;
  location / {
    root /home/ubuntu/build;	#build 디렉토리 경로
    index index.html index.htm;
try_files $uri $uri/ /index.html;
  }
  
  location /test {	#프로젝트 내에서 프록시 설정을 했을 경우 프록시를 사용하는 URI 입력(저는 /test에서 프록시를 사용했습니다)
      proxy_pass http://localhost:8000;
  }
}

이후 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

이제 nginx를 실행해봅시다

sudo systemctl start nginx

브라우저에서 AWS EC2 인스턴스 IP 주소를 입력해 배포된 것을 확인합니다!

이렇게 AWS EC2를 활용한 react+express 프로젝트 배포를 완료하였습니다!