AWS EC2에 프론트엔드 배포하기

1단계: build 폴더 내용 확인 및 재업로드 (필요시)

build 폴더가 로컬에서 완벽하게 빌드된 상태로 EC2에 전송되었는지 확인하는 것이 중요합니다.

1. 로컬에서 build 폴더 재빌드:
   • 로컬 컴퓨터에서 프론트엔드 프로젝트 디렉토리로 이동하여 다시 빌드합니다.
   Bash

    

   npm run build
   # 또는
   yarn build
   

   • 빌드가 성공적으로 완료되었는지 확인합니다.
2. EC2의 기존 build 폴더 삭제:
   • AWS EC2 인스턴스 터미널에서 front 디렉토리로 이동합니다.
   Bash

    

   cd /home/ec2-user/front
   sudo rm -rf build # 기존 build 폴더를 완전히 삭제합니다.
   

3. build 폴더 재업로드:
   • 로컬 컴퓨터에서 새로 빌드된 build 폴더를 EC2 인스턴스의 /home/ec2-user/front/ 경로로 다시 업로드합니다.
   • scp 명령어를 사용한다면:
   Bash

   scp -r -i /path/to/your/key.pem /path/to/your/local/frontend/project/build ec2-user@your-ec2-public-ip:/home/ec2-user/front/
   

   • FileZilla나 WinSCP 같은 SFTP 클라이언트를 사용한다면, 로컬의 build 폴더를 EC2의 /home/ec2-user/front/ 경로로 드래그 앤 드롭합니다.
4. EC2에서 build 폴더 내용 확인:
   • 업로드 후 EC2에서 ls -l /home/ec2-user/front/build 명령어를 실행하여 index.html 파일이 있는지, 그리고 다른 .js, .css 파일들이 잘 들어와 있는지 육안으로 확인해 보세요.

---

2단계: serve 패키지 설치 및 실행

프론트엔드 정적 파일을 서빙하기 위해 serve 패키지를 사용하고 있다면, 이를 EC2 인스턴스에 설치하고 올바르게 실행해야 합니다.

1. serve 패키지 전역 설치:
   • build 디렉토리로 이동할 필요 없이, EC2 인스턴스 어디에서든 한 번만 설치하면 됩니다.
   Bash

   sudo npm install -g serve
   

2. 기존 serve 프로세스 종료 (필요시):
   • 혹시 이전에 잘못 실행된 serve 프로세스가 있다면 종료합니다.
   Bash

   ps -ef | grep serve
   # 위 명령어로 나온 serve 프로세스의 PID (두 번째 열의 숫자)를 확인하여 종료합니다.
   # 예시: sudo kill 12345 (12345는 PID)
   

3. serve를 build 디렉토리에서 백그라운드로 실행:
   • 매우 중요: serve는 index.html 파일이 있는 디렉토리에서 실행되어야 합니다.
   • front/build 디렉토리로 이동합니다.
   Bash

    

   cd /home/ec2-user/front/build
   

   • serve를 백그라운드에서 실행합니다. 프론트엔드 앱을 위한 포트를 5000번으로 가정하겠습니다. (Flask 앱이 5500번을 사용하므로 충돌하지 않게 다른 포트를 사용하세요.)
   Bash

    

   nohup serve -s -l 5000 &
   

   • -s: 정적 파일을 서빙하라는 옵션입니다.
   • -l 5000: 5000번 포트에서 리스닝하라는 옵션입니다. 필요에 따라 3000, 80 등 다른 포트를 사용할 수 있습니다.
   • &: 백그라운드 실행.
   • nohup: 터미널 세션이 끊어져도 프로세스가 계속 실행되도록 합니다.
4. serve 프로세스 확인:
   • ps -ef | grep serve 명령어를 다시 실행하여 serve 프로세스가 Up 상태로 잘 실행되고 있는지 확인합니다. 이제 한 개의 serve 프로세스가 보일 것입니다.

---

3단계: AWS 보안 그룹 설정 확인

serve가 5000번 포트에서 실행되고 있더라도, AWS 보안 그룹에서 해당 포트가 열려 있지 않으면 외부에서 접근할 수 없습니다.

1. AWS Management Console 로그인:
2. EC2 대시보드 이동:
3. 인스턴스 선택: 당신의 EC2 인스턴스를 선택합니다.
4. 보안 그룹 확인:
   • "보안(Security)" 탭을 클릭한 후, 연결된 "보안 그룹(Security groups)" 이름을 클릭합니다.
5. 인바운드 규칙 편집:
   • "인바운드 규칙(Inbound rules)" 탭을 클릭합니다.
   • "인바운드 규칙 편집(Edit inbound rules)" 버튼을 클릭합니다.
6. 새 규칙 추가 또는 기존 규칙 수정:
   • 규칙 추가:
     • 유형(Type): "사용자 지정 TCP(Custom TCP)"
     • 포트 범위(Port range): 5000 (또는 serve가 리스닝하는 포트)
     • 소스(Source):
       • 가장 안전한 방법: 당신의 로컬 컴퓨터 공인 IP 주소 (예: "내 IP" 선택)
       • 테스트 목적 (보안 취약): 0.0.0.0/0 (모든 IP 허용, 테스트 후 반드시 제한)
     • 설명(Description): Frontend Serve Access와 같이 규칙의 목적을 기재합니다.
7. 규칙 저장: "규칙 저장(Save rules)" 버튼을 클릭합니다.

---

4단계: 웹 브라우저에서 프론트엔드 접속 시도

모든 설정이 완료되었다면, 웹 브라우저를 열고 다음 주소로 접속해 보세요:

http://[YOUR_EC2_PUBLIC_IP]:5000

• [YOUR_EC2_PUBLIC_IP]는 당신의 AWS EC2 인스턴스의 퍼블릭 IP 주소입니다. (예: http://15.165.158.247:5000)

이 단계를 모두 거치면 프론트엔드 애플리케이션이 웹에서 정상적으로 구동될 것입니다. 만약 여전히 문제가 발생한다면, EC2 터미널에서 nohup.out 파일의 내용(tail -f nohup.out)이나 serve 프로세스의 로그를 확인합니다.