[AWS 배포-3] 3. 바이브코딩 ppt 생성기 AWS Lightsail 배포하기

 

@ 개발 환경 : 윈도우, 터미널(아나콘다 프롬프트)

 

@ 상황 설명

지난번에 바이브코딩으로 만든 ppt 생성기 코드를 aws lightsail 배포해보려 한다.

백엔드는 기존의 fastapi로 만들었고, 프론트엔드는 바이브코딩으로 리액트로 만들었다.

이미 만들어둔 5달러짜리 instance가 하나 있는데, memory가 500MB밖에 안되기 때문에, 메모리가 많이 부족하다.

그래서 새롭게 12달러짜리 instance를 생성하고자 한다.

 

@ 코드 준비 깃허브 레포지토리 생성(백엔드 업로드용)

# 코드 준비

vive_pptgen

- pptgen_be

- pptgen_fe

 

<백엔드 배포 시작>

# 깃허브 레포지토리 생성 : vive_pptgen_be

 

@ fork로 코드 깃허브 업로드

# Fork - (이미 수행)깃허브 연동:           (File -> Accounts -> 깃허브 연동 "donghwan2")

# Fork에 백엔드 디렉토리 선택 :            File -> Open Repository -> 폴더 선택(vive_pptgen/pptgen_be) ->    git init 효과

# Branches/master -> 화살표 아래 2개짜리 누르고 commit "init commit"         -> git add .    -> git commit -m "first upload"

# Fork -> branches "master" 우클릭 rename -> "main"으로 이름 변경

# Fork -> remotes 우클릭 -> add new remote  -> https://github.com/donghwan2/vive_pptgen_be.git -> add new remote

# origin 클릭 후 -> fetch 버튼 클릭

# origin -> main 우클릭 -> pull 'origin/main' into 'main'

# push  (git push origin main 효과)                # 파일 업로드 완료

 

--------------------------------------------------------------------------------------

<aws lightsail 배포 세팅 시작>

@ aws console 로그인 -> root 사용자로 로그인 (runiarang@gmail.com)

 

@ aws lightsail 새 인스턴스 생성 : 월 12달러, 메모리 2GB

 

@ 새로 생성된 aws lightsail instance

요금 및 메모리 : 월 12달러, 메모리 2GB

public IPv4 : 43.202.0.119

private ip : 내부에서 불리는 번호(like 인트라넷)

IPv6 : 확장된 ip주소(모바일 기기 등)

ssh-key 다운로드 ->    ./DeployProject/Vive_LightsailDefaultKey-ap-northeast-2.pem

 

@ 새로 생성된 ligthsail  인스턴스에 접속

cd ./Desktop/DeployProject

ssh ec2-user@43.202.0.119 -i ./Vive_LightsailDefaultKey-ap-northeast-2.pem

 

@ 깃 설치 : sudo yum install git -y

 

@ AWS 서버 인증키 생성 (aws 서버에서 깃허브와 통신할 때 사용할 SSH 키를 생성)

ssh-keygen -t rsa -C runiarang@gmail.com

(Enter file in which to save the key (/home/ec2-user/.ssh/id_rsa): Enter로 넘기기)

(Enter passphrase : Enter로 넘기기)

cat id_rsa

cat id_rsa.pub

 

@ 깃허브에 AWS 서버 public key 등록하기

깃허브 -> 우측 상단 프로필 아이콘 -> settings

SSH and GPG keys    ->    New SSH Key 클릭

key 인풋창에 id_rsa.pub 내용 복사해서 붙여넣기 -> Add SSH Key 버튼 클릭

 

@ 리눅스 서버 홈 디렉토리에 backend 코드 git clone하기

깃허브 레포지토리 ssh 주소 복사 git@github.com:donghwan2/vive_pptgen_be.git

cd ~

git clone git@github.com:donghwan2/vive_pptgen_be.git

ls

-> vive_pptgen_be 폴더가 보임 (AWS 서버에 vive_pptgen_be 코드 폴더 다운로드 완료)

 

@ 파이썬 가상환경 설정/활성화 및 패키지 설치

리눅스) cd vive_pptgen_be

python3 -m venv venv

source ./venv/bin/activate

pip install -r requirements.txt

 

@ nginx.conf에서 server 관련 코드 수정하기(lightsail 80 port로 들어오면 로컬 8000번 포트로 넘기도록 수정)

# vim으로 nginx.conf 파일 열기:     sudo vim /etc/nginx/nginx.conf

# 기존의 server 관련 코드들 삭제(dd)

# i(insert) 모드로 바꾼 후에 아래 코드를 붙여넣기  (esc 누르면(커맨드 모드) -> :x 누르면 vim 종료)

server {

        listen       80;

        listen       [::]:80;

        server_name  _;

 

        location / {

            proxy_pass         http://127.0.0.1:8000;

            proxy_http_version 1.1;

            proxy_set_header   Upgrade $http_upgrade;

            proxy_set_header   Connection keep-alive;

            proxy_set_header   Host $host;

            proxy_cache_bypass $http_upgrade;

            proxy_set_header   X-Real-IP $remote_addr;

            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_set_header   X-Forwarded-Proto $scheme;

        }

 

        error_page 404 /404.html;

        location = /404.html {

        }

 

        error_page 500 502 503 504 /50x.html;

        location = /50x.html {

        }

    }

 

# 맨 위에 user는 ec2-user 로 수정하기

user ec2-user;

(esc 누르면(커맨드 모드) -> :x 누르면 vim 종료)

 

@ nginx 재시작

sudo systemctl restart nginx

-> 백엔드 배포

 

@ 백단에서 fastapi 서버 실행

리눅스) nohup uvicorn main:app --host 0.0.0.0 --port 8000 > server.log 2>&1 &

 

http://43.202.0.119 http 80 port(aws lightsail ip 주소)로  접속하면 nginx가 fastapi (port 8000)으로 연결해줌.

 

@ 내가 uvicorn으로 fastapi 서버를 잘 실행했는지 확인

# 실행중인 프로세스 확인

ps aux | grep '[u]vicorn'       -> 실행 중인 uvicorn 프로세스만 보여줌 -> 프로세스 ID 확인(ex. 29170)   

 # 백단에서 실행된 uvicorn 끄기 : kill -9 29170            

 

# 과거 명령어 확인 : history

---------------------------------------------- </백엔드 배포 끝> ----------------------------------------------

(새로 생성된 aws lightsail instance public IPv4 : 43.202.0.119)

 

<프론트엔드 배포 시작>

 

@ pptgen_fe 폴더의 .env 파일 수정 (fastapi 엔드포인트 url)

REACT_APP_FASTAPI_URL = http://43.202.0.119/chat

REACT_APP_PPT_FASTAPI_URL = http://43.202.0.119/generate-ppt

 

@ 빌드

cd C:\Users\runia\Desktop\vive_pptgen\pptgen_fe

npm run build

-> build 폴더(속에 static 폴더 생성)가 생성됨

 

@ 파일질라

사이트 관리자 -> 새 사이트 -> "vive" ->

프로토콜은 SFTP -> 호스트는 AWS IP 주소 43.202.0.119 ->

로그온 유형 : 키 파일 -> 사용자는 ec2-user -> Vive_LightsailDefaultKey-ap-northeast-2.pem

 

@ 파일질라 (오른쪽) aws 원격 사이트에 디렉토리 만들기 -> vive_pptgen_fe 폴더 생성

build 폴더를 vive_pptgen_fe 폴더로 드래그&드랍

-> AWS Lightsail에 프론트엔드 build 파일 업로드 완료

 

@ 다음 코드를 aws 서버의 /etc/nginx/nginx.conf 파일에 추가해야 함.

(의미 : 포트 8080으로 들어오는 요청을 /home/ec2-user/vive_pptgen_fe/build 디렉토리 아래의 정적 파일로 서비스하라)

server {

        listen       8080;

        listen       [::]:8080;

        server_name  _;

        

root

            

/home/ec2-user/vive_pptgen_fe/build;

        index index.html index.htm index.nginx-debian.html;

 

        location = /favicon.ico { access_log off; log_not_found off; }

        location / {

                try_files $uri /index.html;

        }

    }

 

@ AWS 서버 접속

로컬 터미널) cd DeployProject

로컬 터미널) ssh ec2-user@43.202.0.119 -i ./Vive_LightsailDefaultKey-ap-northeast-2.pem

-> aws  서버 접속 

 

@ nginx.conf 파일 수정 : (리눅스 터미널) sudo vim /etc/nginx/nginx.conf 

(참고) .nginx.conf.swp 파일을 지워야 하는 경우  : sudo rm /etc/nginx/.nginx.conf.swp 

 

i(insert)  -> 

"server{ listen 8080;  "     코드 붙여넣기                                # 8080 포트로 들어오는 요청을,

root 경로 수정 : /home/ec2-user/vive_pptgen_fe/build;         # build 디렉토리 아래의 정적 파일로 서비스하라 

 

user 수정 : ec2-user;                 # permission 문제 해결

vim 빠져나오기) esc -> :x

 

@ nginx 재시작 : sudo systemctl restart nginx

 

-----------------------------------------------------------------------------------------

<AWS 보안 세팅>

@ AWS Lightsail -> Networking

 

IPv4 : Add rule -> 8080 -> create

 

@ 접속 : http://43.202.0.119:8080/

       

(END) ppt 생성기 react 프론트엔드 코드 AWS Lightsail 배포 완료!

 

---------------------------------------------------------------------------------------

(참고/추가내용) <백엔드 코드를 수정해야 한다면, 어떻게 반영할 수 있을까?>

순서 :    (로컬)코드 수정    ->    fork에서 깃허브 commit & push    ->    (리눅스)git pull

 

@ 백엔드 코드 수정

fork -> local changes -> commit (ex. cors 허용 ip 추가)

Branches/main 클릭 -> push 버튼 클릭         # 깃허브에 코드 수정된 것 반영됨

 

@ 리눅스 서버에서

cd vive_pptgen_be

git pull            # 갓허브에 코드 수정된 것 가져오기

or

# 현재 수정한 파일을 임시 저장
git stash -u

# 원격 변경사항 rebase로 가져오기
git pull --rebase

 

<.env 파일을 추가 or 수정해야 한다면>

@ .env 파일 생성

vim .env

i(insert)

anthropic api key = ""           붙여넣기

 

EOD.