포스트

[AWS] EC2에 React, Spring Boot, FastAPI 개발 환경 배포하기(팀 프로젝트1)

게시 업데이트
By Juwon Jung
8 분읽는 시간
[AWS] EC2에 React, Spring Boot, FastAPI 개발 환경 배포하기(팀 프로젝트1)

1. AWS 세팅

  • 인스턴스 생성

    우분투 22.04버전으로 함
    인스턴스 유형은 t3.medium, 메모리 부족 대비

  • 보안그룹 생성 및 설정

    ssh접속, http, https 접속을 위한 80, 443번 포트 허용
    스프링부트, 리액트 연결을 위한 8080, 리액트포트 허용

  • 탄력적 IP 설정(고정 IP)

  • 키페어 생성

    키페어는 EC2 원격 접속을 위해 필요하다
    키페어가 있는 위치에서 cmd를 열고 ssh 접속 코드를 넣어야 한다

2. 인스턴스 접속

  • 윈도우에 wsl2 설치

    우분투 설치해서 윈도우처럼 실행할 수 있음 wsl2 설치 안하고 powershell 내에서 ssh 접속 가능

  • PC에 우분투 설치(EC2 인스턴스와 같은 버전으로)
  • 로컬에 설치된 우분투에 private 키를 옮기고

  • chmod 400 "키 이름" 으로 권한 범위를 설정한다.

  • aws 인스턴스 선택하고 연결 누르고 ssh 연결 누르면 코드 나옴
    1

    ssh -i "private-key-name.pem" ubuntu@my-ec2-ip.region-name.compute.amazonaws.com
  • 이제 PC에서 터미널을 켠다. (윈도우는 명령 프롬프트, 맥은 터미널을 실행)
  • 터미널에 명령어를 붙여넣는다. 이때, 아까 다운로드한 키 페어 파일이 있는 위치에서 명령어를 실행해야 한다.

3. 인스턴스에 프로젝트 배포

  • 인스턴스 접속 했으면 필요한 프로그램 설치해야 한다
  • 깃에 프로젝트 파일 있으니까 제일 먼저 깃을 설치한다.
    명령어는 sudo apt install git 혹은 sudo apt-get install git
    1

    sudo apt install git
  • 스프링 + 리액트 + 파이썬 서버로 이루어진 프로젝트를 배포하려고 한다
  • 스프링은 JDK17, 리액트는 Node.js, 파이썬은 python 실행 환경을 각각 설치한다
  • 깃을 통해서 각 프로젝트를 클론해온다.
  • 각 프로젝트의 필요 라이브러리를 설치해준다.

(1) 스프링부트 서버 설치하기

  • 깃으로 프로젝트를 클론 해왔으면 서버 실행을 위해 application.yml 파일을 프로젝트 폴더에 가져와야 한다.
  • application.yml은 서버 실행을 위한 설정 파일이고, 민감한 정보가 있을 수 있어 깃에는 올리지 않아
    따로 파일을 생성해 설정하거나 파일을 복사해와야 한다.
  • 미리 생성한 파일이 있어서 파일을 우분투로 복사하려고 한다.
  • 아래 명령어를 통해서 파일을 우분투로 복사할 수 있다.
    application.yml 파일이 있는 pc에서 아래 명령어를 실행시킨다.
    1

    scp -i "path_to_your_pem_file.pem" application.yml ubuntu@your_instance_ip:/home/ubuntu/
  • 우분투에서 복사한 application 설정 파일을 스프링부트의 알맞은 디렉토리에 가져다 놓는다.
    1

    sudo mv application.yml TripMavenBackend/src/main/resources/
  • 스프링은 프로젝트의 루트 디렉토리에서 ./gradlew build 명령어를 실행해 준다
    1

    ./gradlew build
  • 빌드가 되었으면 해당 프로젝트 디렉토리에 build/libs 디렉토리가 생성되며 jar파일이 만들어진다
  • 해당 디렉토리로 이동해 다음 명령어를 작성하면 스프링 서버가 실행된다.
    제대로 빌드가 되었는지 빌드된 jar 파일을 실행시켜본다.
    1

    java -jar build/libs/your-application-name-0.0.1-SNAPSHOT.jar

(2) 리액트 프론트엔드 설치하기

  • 깃에서 가져온 리액트 프로젝트에 필요 라이브러리들을 설치한다.(npm install)
  • 리액트 빌드하기. 아래 명령어를 실행시켜 빌드할 수 있다.
    1

    GENERATE_SOURCEMAP=false npm run build

(3) FastAPI 백엔드 설치하기

  • 깃에서 가져온 FastAPI 프로젝트에 필요 라이브러리들을 설치한다.
  • 해당 서버에서 구글 OCR을 사용하므로 키 설정을 위한 환경변수 설정이 필요하다.

4. nginx를 통한 리액트, FastAPI 설정

  • nginx 설치
    1

    sudo apt install nginx
  • nginx 설정을 해줘야 한다. 설정 파일을 열어준다.
    1

    sudo nano /etc/nginx/sites-available/default
  • 설정 파일에 들어갈 내용을 적어준다.
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    server {
    listen 80;
    server_name your_domain_or_ip;

    # 리액트 애플리케이션 정적 파일 서빙
    location / {
        root /home/user/my-app/build;
        try_files $uri /index.html;
    }

    # FastAPI 서버로의 프록시 설정
    location /api/ {
        proxy_pass http://127.0.0.1:8282;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
  • nginx 테스트
    1

    sudo nginx -t
  • nginx 재시작
    1

    sudo systemctl restart nginx

5. shell script를 통해서 리액트, 스프링부트, FastAPI 한꺼번에 실행시키기

  • shell script 파일 만들기
    1

    nano start-all.sh
  • shell script 내용 작성
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    #!/bin/bash

# 리액트 애플리케이션 빌드 및 실행
cd /home/ubuntu/TripMavenFrontend/build
npm start &

# 스프링 부트 애플리케이션 실행
cd /home/ubuntu/TripMavenBackend/build/libs
java -jar tripmavenrestapi-0.0.1-SNAPSHOT.jar &

# FastAPI 서버 실행
cd /home/ubuntu/TripMavenPythonServer
# 가상환경 활성화
source /home/ubuntu/TripMavenPythonServer/myenv/bin/activate
uvicorn app.main:app --port 8282 &

# Nginx 재시작
sudo systemctl restart nginx

echo "리액트, 스프링 부트, FastAPI 서버가 모두 실행되었습니다."
  • shell script 권한 부여
    1

    chmod +x start-all.sh
  • shell script 실행
    1

    ./start-all.sh
  • 서버 실행 확인 후 실행중인 프로세스 끄기(shell script에서 실행)
    1

    nano kill-all.sh

    1
2
3
4
5
6
7
8
9
10
11

    #!/bin/bash

# 모든 프로세스 안전 종료
pkill -f 'npm start'
pkill -f 'java -jar'
pkill -f 'uvicorn'

# 데이터 백업 (예시)
# tar -czvf backup.tar.gz /path/to/important/data

echo "모든 서버가 안전하게 종료되었습니다. 이제 인스턴스를 종료할 수 있습니다."
  • shell script 권한 부여
    1

    chmod +x kill-all.sh
  • 모든 프로세스가 종료된 후 마지막으로 인스턴스를 종료시켜주면 된다.
    1

    ./kill-all.sh

    다음에는 https 연결을 사용하여 보안 강화할 예정

프로젝트, 팀 프로젝트
AWS EC2 배포 우분투 Spring Boot React FastAPI
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.