React.js, Express.js, MongoDB 프로젝트를 AWS EC2 인스턴스에 배포하는 전체 과정을 프로젝트 클론, 환경 변수 설정, 빌드 및 배포의 세 단계로 설명합니다. 🗺️
Express.js 백엔드와 React.js 프론트엔드 GitHub 리포지토리를 git clone 명령어를 사용하여 AWS EC2 인스턴스에 복제하며, Ubuntu 환경에는 Git이 기본 설치되어 있음을 확인합니다. 🔗
Express.js 프로젝트 디렉토리에서 npm install로 의존성을 설치하고, vi .env를 통해 MongoDB 연결 정보(예: MONGO_URI, 사용자명, 비밀번호, 포트 27017, DB명) 및 서버 포트(4000)를 포함한 환경 변수 파일을 생성합니다. ⚙️
React.js 프로젝트 디렉토리에서 npm install로 의존성을 설치하고, vi .env를 통해 VITE_API_BASE_URL을 백엔드(Express.js)가 실행되는 EC2 인스턴스의 퍼블릭 IP 주소와 포트(예: http://<EC2_PUBLIC_IP>:4000)로 설정합니다. 🌐
React.js 프로젝트에서 npm run build 명령어로 프로덕션용 빌드를 생성하고, npm install -g serve 후 serve -s dist -l 3000 명령어를 사용하여 빌드된 프론트엔드를 로컬에서 임시로 실행하여 정상 작동을 확인합니다. 🏗️
serve 명령어가 터미널 종료 시 함께 종료되는 문제를 해결하기 위해 npm install -g pm2로 PM2를 전역 설치하고, ecosystem.config.js 파일을 생성하여 React.js 프론트엔드와 Express.js 백엔드 두 애플리케이션을 백그라운드에서 지속적으로 실행하도록 설정합니다. 🚀
PM2가 홈 디렉토리에서 실행될 때 프로젝트별 .env 파일을 직접 읽지 못할 수 있으므로, ecosystem.config.js 파일 내에 각 애플리케이션의 환경 변수(예: MONGO_URI, VITE_API_BASE_URL)를 명시적으로 정의하여 PM2가 올바르게 애플리케이션을 구동하도록 합니다. 🔑
PM2로 애플리케이션을 시작(pm2 start ecosystem.config.js)한 후, pm2 status로 상태를 확인하고, 브라우저에서 EC2 퍼블릭 IP와 프론트엔드 포트(3000)로 접속하여 회원가입 기능 등을 통해 백엔드와의 연동 및 전체 시스템의 정상 작동을 검증합니다. ✅
배포 완료 후, 다음 시간에는 AWS에서 사용했던 네트워크 및 리소스들을 안전하게 제거하는 과정을 다룰 예정임을 언급합니다. 🗑️