오늘은 회사에서 어떤 AWS의 서비스가 사용되고, EC2, NGINX의 설정이 어떻게 이루어지고 어떻게 처음으로 배포를 하였는지 알아볼 계획입니다. AWS의 EC2 서비스를 처음 사용해보는 것이었고, Linux 환경 또한 익숙하지 않아서 벌벌 떨며 상사님의 뒤에 숨어 빌드하던 게 어제 같은데 어쩌다 보니 벌써 1달이 넘게 지났네요.

EC2

잠깐!

EC2로 클라우드 컴퓨팅을 하기 이전에, IP주소를 확인하고, 걸맞은 포트를 열어주고 그것에 맞게, Route53을 사용하여 도메인을 연결해 줍니다. 이 부분은 AWS를 사용한 것이며 저는 EC2 내부에서 서버를 어떻게 배포했는지를 주로 다룰 예정이기에 자세히 설명은 드리지 않겠습니다. 사실 잘 모르기도 합니다.

Node.js

저희 서비스는 EC2의 클라우드 컴퓨팅 시스템을 이용해 Ubuntu OS를 가진 서버를 만들고, 그곳에 NGINX 받아 사용하고 있습니다. NGINX를 다운로드받기 이전에, 서버 코드와 여러 가지를 실행하기 위해 npm 과. Node를 여기 를 참조하여 다운로드받았습니다. 저희가 사용하는 노드의 버전은 10.16.0, npm 의 버전은 6.9.0입니다.

NGINX

저는 노드를 다운받은 이후, NGINX 를 다운 받았습니다.
sudo apt-get install nginx
위의 명령어를 통해서 NGINX를 내려받으실 수 있습니다. 다운로드 이후 IP주소나 도메인으로 접속하였을 때 NGINX의 기본 화면이 보인다면 NGINX가 성공적으로 내려받아 진 것입니다.

이후 React 애플리케이션 파일을 EC2의 컴퓨터로 옮깁니다. 가장 좋은 방법은 Github, Bitbucket에 저장되어있는 저장소에서 fetch 하여 가져오는 방법이라고 생각합니다. 이후 받아온 저장소에서 React 애플리케이션을 npm run build 명령어를 사용하여 빌드하고, /var/www 디렉터리로 옮겼습니다. 그리고 이후 NGINX를 설정하여 React 애플리케이션이 동작하도록 하였습니다.

NGINX 설정

server {
  listen 80;
  server_name ${서버이름};
  location / {
    root   /var/www/${빌드된 폴더 이름};
    index  index.html index.html;
    try_files $uri $uri/ /index.html;
  }
}

/etc/nginx/sites-available/ 폴더에 원하는 이름의 파일을 만들어 위의 내용을 저장하였습니다. default의 값을 변경해도 무방합니다. 위는 react Router를 위한 코드입니다.
이후 sudo ln -s /etc/nginx/sites-available/${작성한 파일 이름} /etc/nginx/sites-enabled/ 명령어를 입력하여 sites-enabled에도 똑같은 코드가 작성되어 유지되도록 연결해줍니다. 그다음 NGINX 서버를 재시작시켜줍니다.
sudo service nginx restart

NGINX에 대한 설정은 여기 를 많이 참고하였습니다.

PM2

PM2는 API 서버를 쉽게 관리하고 실행하기 위해서 다운받아서 이용하고 있습니다. 설치 하는 방법은 아래와 같습니다.
npm install pm2 -g
백 엔드 서버 또한 Git 도구를 통해 가져온 뒤 pm2 start npm -- start 명령어를 입력하여 pm2도구를 사용해 API 서버를 실행시킵니다. pm2monit 명령어를 입력하면 현재 pm2에서 관리하는 서버의 로그를 실시간으로 확인할 수 있으며, m2 delete (서버 이름) 명령어를 입력하게 되면, 원하는 이름의 서버를 제거할 수 있습니다.

그렇게 쨔쟌, 제가 원하는 페이지가 나오게 되고, 싱글 페이지인 React 애플리케이션이 원하는 도메인에서 제대로 동작하게 됩니다.

스크린샷 2019-08-31 오전 12.03.04.png

마무리

잘 설명이 되었는지, AWS의 EC2를 사용하여 어떤 서비스를 배포하려는 분들에게 도움이 될런지 걱정이 됩니다. 추가로 궁금하신 점이나 해주실 말씀이 있다면 댓글로 남겨주시면 제가 아는 선에서 최대한 열심히 답변해 드리겠습니다. 🙇‍♂️ 이번글도 끝까지 읽어주셔서 감사합니다. 다음 글은 https를 적용하며 고생했던 부분에 대해서 말씀드리겠습니다.😃