TIL | AWS EC2, pm2, nginx(reverse proxy) 사용하여 개발서버 외부 모니터링 환경 구축하기

AWS EC2, pm2, nginx(reverse proxy) 사용하여 개발서버 외부 모니터링 환경 구축하기

디자이너와 협업을 하는 과정에 있어서, 개발 프로젝트를 실시간으로 확인하고 피드백을 받을 수 있도록 pm2와 nginx을 사용하여 작업물을 공유할 수 있는 환경을 구성 및 정리해봤다. (개인 AWS EC2를 통해 구현한, 간단한 예제입니다.)

nginx 설정

/etc/nginx/sites-available/default 파일 설정

server {
    listen 80;
    location / {
                proxy_pass http://127.0.0.1:3000;
    }

}

• 내가 소유하고 있는 인스턴스 외부 IP로 접속하고자 할 경우, (http로 접속하며 기본 포트는 80번이다.) yarn start를 통해 SPA 프로젝트 dev mode를 실행시켰을때 실행되는 nodejs 기본 서버의 3000번 포트로 리다이렉션을 시켜준다.

---

 

pm2 설정

pm2 start npm --name nginx_test -- start

• pm2란, nodejs의 프로세스 매니저로서, nodejs을 통해 실행한 앱이 백그라운드에서도 실행이 지속되도록 도와주는 역할을 한다.(쉘이 종료된 후에도 지속 실행)
• 배포 파일이 아닌, dev mode만 모니터링을 할 것이기 때문에 위와 같은 커맨드를 통해서 인스턴스를 띄우도록 하자. (배포 파일의 경우 SPA build 파일 전용 커맨드가 따로 있으므로, 이는 공식문서를 통해 확인하자.)

 

pm2 list

• pm2 list를 통해 인스턴스가 띄워지고 있음을 알 수 있다.

---

 

확인

• 정상적으로 dev mode의 React App을 확인할 수 있다.

---

 

Reference

• Nginx docs
• pm2 docs