AWS - 환경 구성 실습 - React + FastAPI 프로젝트 배포

 

1. VPC 생성

 

• VPC 이름: my-vpc
• IPv4 CIDR: 10.0.0.0/16
• 설명: 가상 네트워크(VPC)를 생성하고, 내 프로젝트가 독립된 네트워크 환경에서 동작하도록 설정

 

2. 인터넷 게이트웨이(IGW) 생성 및 연결

• IGW 이름: my-igw
• 연결 대상 VPC: my-vpc
• 설명: 인터넷 게이트웨이는 VPC가 외부 인터넷과 통신할 수 있도록 해주는 장치로, 퍼블릭 서브넷을 통해 EC2 인스턴스가 인터넷에 접근하기 위해 반드시 필요함

3. 서브넷 생성

 

 

퍼블릭 서브넷 1

• 서브넷 이름: public-subnet-a
• VPC: my-vpc
• IPv4 CIDR: 10.0.1.0/24
• 가용 영역: ap-northeast-2a
• 퍼블릭 IPv4 자동 할당: 활성화(✓)

퍼블릭 서브넷 2

• 서브넷 이름: public-subnet-b
• VPC: my-vpc
• IPv4 CIDR: 10.0.2.0/24
• 가용 영역: ap-northeast-2b
• 퍼블릭 IPv4 자동 할당: 활성화(✓)
• 설명: 퍼블릭 서브넷을 가용 영역(AZ)별로 2개 생성해 로드밸런서와 오토스케일링 구성 시 고가용성을 확보하고, 각 서브넷에 EC2 인스턴스를 분산 배치할 수 있도록 준비함

4. 라우팅 테이블 생성 및 IGW 연결

 

• 라우팅 테이블 이름: my-rtb
• VPC: my-vpc
• 라우팅 규칙 추가:
  • 대상(Destination): 0.0.0.0/0
  • 대상(Target): my-igw (앞에서 만든 IGW)
• 서브넷 연결:
  • public-subnet-a
  • public-subnet-b
• 설명: 퍼블릭 서브넷들이 외부 인터넷과 통신할 수 있도록 하기 위해, IGW로 향하는 기본 경로를 가진 라우팅 테이블을 생성하고 각 퍼블릭 서브넷과 연결함

5. 보안 그룹 생성

• 보안 그룹 이름: my-sg
• VPC: my-vpc
• 인바운드 규칙 추가:
  • SSH: 포트 22, 소스: 내 IP
  • HTTP: 포트 80, 소스: 0.0.0.0/0
  • FastAPI용: 포트 8000, 소스: 0.0.0.0/0
  • React 개발 서버용: 포트 3000, 소스: 0.0.0.0/0
• 아웃바운드 규칙: 기본 전체 허용 (변경 없음)
• 설명: EC2 인스턴스가 외부에서 접근 가능하도록 SSH(22)와 웹 서비스용 HTTP(80) 포트를 허용하고, 개발/테스트용으로 8000(FastAPI), 3000(React) 포트도 열어둠

6. 키페어 생성 (.pem)

• 키페어 이름: movie-key
• 키 유형: RSA
• 파일 형식: .pem (Bitvise에서는 .ppk로 변환하거나 OpenSSH 방식 사용 가능)
• 설명: EC2 인스턴스에 원격으로 접속하기 위한 인증 키를 생성하며, .pem 파일은 한 번만 다운로드 가능하므로 반드시 안전한 위치에 저장해야 함. 이후 SSH 클라이언트를 통해 인스턴스 접속 시 이 키를 사용함

7. EC2 인스턴스 생성

• 인스턴스 이름: movie-ec2
• AMI: Amazon Linux 2023 AMI
• 인스턴스 유형: t2.micro
• 키페어: movie-key
• 네트워크 설정:
  • VPC: my-vpc
  • 서브넷: public-subnet-a (ap-northeast-2a)
  • 퍼블릭 IP 자동 할당: 활성화
  • 보안 그룹: my-sg
• 스토리지: 기본값 그대로 (8GB gp3)
• 설명: Amazon Linux 2023은 경량화되고 안정성이 높은 AWS 공식 AMI로, 빠른 부팅과 보안 패치 적용이 특징이다. 퍼블릭 서브넷에 위치한 EC2 인스턴스로 외부 접속이 가능하며, 이후 프로젝트 배포를 위한 기반 서버로 활용된다.

8. SSH 클라이언트(Bitvise)로 EC2 접속

1. Bitvise 실행
2. Login 탭
   • Host: 퍼블릭 IP
   • Port: 22
   • Username: ec2-user
3. Authentication 탭
   • Client key: .pem 파일 지정 (또는 .ppk로 변환)
4. Log in 버튼 클릭 → SSH 터미널 연결 확인

9. 서버 환경 구축

 

패키지 설치

sudo yum update -y
sudo yum install -y git python3 python3-pip nginx nodejs

 

GitHub에서 프로젝트 clone

 

git clone https://github.com/wjdwodhs/movie.git
git clone https://github.com/wjdwodhs/movie_front.git 

 

MySQL(MariaDB) 설치 및 설정

 

sudo yum update -y

sudo yum install -y mariadb105-server

sudo systemctl start mariadb

sudo systemctl enable mariadb

 

DB 생성 및 계정 권한 부여

 

sudo mysql -u root

CREATE DATABASE fastapidb CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER 'fastapiuser'@'localhost' IDENTIFIED BY 'p@ssw0rd'; GRANT ALL PRIVILEGES ON fastapidb.* TO 'fastapiuser'@'localhost'; FLUSH PRIVILEGES; EXIT;

 

.env 파일 생성

cd movie

nano .env

DATABASE_URL=mysql+pymysql://fastapiuser:p%40ssw0rd@localhost:3306/fastapidb SECRET_KEY=SECRET+FASTAPI

 

가상환경 진입 및 서버 실행

cd ~/movie

python3 -m venv venv

source venv/bin/activate

pip install --upgrade pip
pip install -r requirements.txt

python main.py

 

pip install -r requirements.txt 중 에러 발생

 

에러 원인

• requirements.txt에는 click==8.2.0이 명시돼 있음
• 하지만 해당 버전은 Python 3.10 이상에서만 설치 가능
• 현재 EC2 인스턴스(Amazon Linux 2023)의 기본 Python 버전은 3.9.22
• 결과적으로 Python 버전이 맞지 않아 패키지 설치가 실패함

해결 방법: requirements.txt에서 click 버전 낮추기

 

nano requirements.txt
click==8.2.0 ---> click==8.1.7

10. 프로젝트 실행 및 React 빌드

FastAPI 백엔드 실행 (가상환경 활성 상태)

cd ~/movie
source venv/bin/activate
python main.py

 

React 프론트엔드 빌드

cd ~/movie_front
npm install
npm run build

11. Nginx 연동 설정

 

Nginx 설치

sudo yum update -y
sudo yum install -y nginx

 

Nginx 설정 수정

sudo nano /etc/nginx/nginx.conf

 

server {
    listen       80;
    listen       [::]:80;
    server_name  _;

    root /home/ec2-user/movie_front/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

 

React 프론트엔드 빌드

cd ~/movie_front

npm install

npm run build

빌드 결과는 dist폴더에 생성

 

빌드 파일 배포

sudo cp -r ~/movie_front/dist/* /usr/share/nginx/html/

 

 

퍼미션 에러 발생

stat() "/home/ec2-user/movie_front/dist/index.html" failed (13: Permission denied) -> 즉, 파일은 존재하지만 Nginx가 권한 때문에 접근하지 못함

 

해결방법: 디렉터리와 파일 권한 수정

sudo chmod -R 755 /home/ec2-user/movie_front/dist

sudo chmod 755 /home/ec2-user
sudo chmod 755 /home/ec2-user/movie_front

 

Nginx 재시작

sudo systemctl restart nginx

 

수정 후 페이지 빌드 및 Nginx 연동 완료

 

12. 회원가입 테스트

회원가입 실패: 404 에러 발생(Signup.jsx)

axios.post("http://localhost:8000/users/signup", {...});

→ Nginx가 프록시 역할을 하므로 localhost가 아닌 상대경로 /api/...로 변경 필요

 

 

수정 후 정상적으로 회원가입 성공!