광고 수익을 창출할 웹사이트 만들어보기 3-7(Vercel과 EC2 flask서버 통신 + Gunicorn으로 앱 띄워보기)

저번편에서 EC2서버의 SSL인증까지 완료했다.

이번에는 Vercel과 flask서버의 통신을 진행할것이다.

 

주말이라 시간이 빨리가니 빨리 시작한다.

---

일단 첫번째로 Vercel에서 저번에 배포한 github엔 포함되지 않는 .env의 값을 따로 추가해줘야 한다.

Vercel에서 **Environment Variables(환경 변수)**를 수정하는 방법은 다음과 같다.

 

1. Vercel 프로젝트로 이동

• Vercel Dashboard에 로그인합니다.
• 환경 변수를 수정하려는 프로젝트를 클릭합니다.

---

2. 설정 메뉴로 이동

• 프로젝트 대시보드 화면에서 "Settings" 탭을 클릭합니다.
• 왼쪽 메뉴에서 **"Environment Variables"**를 선택합니다.

---

3. 환경 변수 추가 또는 수정

1. 새 변수 추가
   • Key: 환경 변수 이름을 입력합니다 (예: CORS_ORIGIN).
   • Value: 환경 변수 값을 입력합니다 (예: 내 EC2서버 도메인주소).
   • Environment: 적용할 환경을 선택합니다:
     • Production: 프로덕션(배포된 환경)에서만 사용.
     • Preview: 프리뷰 환경(배포 전 테스트 환경)에서만 사용.
     • Development: 로컬 개발 환경에서 사용.
2. 기존 변수 수정
   • 환경 변수 목록에서 수정하려는 변수를 찾습니다.
   • 오른쪽의 **펜 아이콘(✏️)**을 클릭하여 값을 수정한 후 저장합니다.

나는 3개의 값을 .env에서 관리하기 때문에 3개의  값을 추가해줬다.

 

이후 프로젝트 대쉬보드에서 Deployment로 이동 후 Redeploy(재배포) 진행해줬다.

 

진행 하면 1분이내로 Building 후 Status가 Ready로 바뀌면 재기동이 완료된거다.

 

이제 Vercel에서 테스트를 진행하니 너무 잘된다.

 

테스트 삼아 지인한테 테스트도 시켜봤는데 카톡으로 공유하기 기능도 잘된다.

 

1차적으로 배포는 모두 끝난것 같지만 아니다.

flask서버를 app.py로 실행하면 개발용이기 때문에 제한되는 사항이 많다.

그래서 WSGI (Web Server Gateway Interface) 서버를 사용해 띄워볼 것 이다.

이번에 사용해볼 서버는 Gunicorn 이다.

두개의 차이점은 아래와 같다.

---

바로 시작해보겠다.

일단 간단하게 가상환경에 들어와서 pip인스톨을 통해 gunicorn을 설치해준다.

pip3 install gunicorn

설치가 잘되었따면 아래 명령어를 통해 버전확인이 될것이다.

gunicorn --version

잘 나오는구만...

 

Gunicorn을 사용하려면 Flask 애플리케이션 파일 이름과 Flask 애플리케이션 인스턴스 이름을 알아야 한다.

예: app.py 파일에 Flask 인스턴스가 app으로 정의되어 있다면, 다음 명령어로 실행할 수 있다.

gunicorn -w 4 -b 0.0.0.0:5000 app:app

• -w 4: 워커(worker) 프로세스 수 (4개 프로세스 실행).
• -b 0.0.0.0:5000: IP와 포트 지정 (0.0.0.0은 모든 IP를 허용).

위 명령어를 입력해주면 아래이미지처럼 시작되는듯한 느낌의 로그가 나온다.

아래처럼 나온다면 서버 기동에 성공한것이다.

 

하지만 저 명령어로 실행하게 된다면 터미널을 차지하고있기 때문에 아래 명령어로 백그라운드에서 실행해주도록 한다.

gunicorn --bind 0.0.0.0:5000 app:app --daemon

 

백그라운드에서 실행중인지 확인하려면 아래 명령어로 확인 가능하다.

ps aux | grep gunicorn

 

하지만 언제 저런 명령어를 치고있나

바로 실행 종료 스크립트를 만들어주자.

이름은 start_emoji-gen.sh로 만들어준다.

vi start_emoji-gen.sh

 

편집기로 아래 내용을 추가해준다.

#!/bin/bash

APP_NAME="app:app"
LOG_DIR="logs"
ACCESS_LOG_FILE="$LOG_DIR/access_$(date +%Y-%m-%d).log"
ERROR_LOG_FILE="$LOG_DIR/error_$(date +%Y-%m-%d).log"
PID_FILE="gunicorn.pid"

mkdir -p $LOG_DIR

case "$1" in
    start)
        echo "Starting Gunicorn..."
        gunicorn --bind 0.0.0.0:5000 $APP_NAME --daemon \
            --access-logfile $ACCESS_LOG_FILE \
            --error-logfile $ERROR_LOG_FILE \
            --capture-output \
            --pid $PID_FILE
        echo "Gunicorn started. Logs are saved in $LOG_DIR."
        ;;
    stop)
        if [ -f $PID_FILE ]; then
            echo "Stopping Gunicorn..."
            kill $(cat $PID_FILE)
            rm $PID_FILE
            echo "Gunicorn stopped."
        else
            echo "No PID file found. Gunicorn may not be running."
        fi
        ;;
    status)
        if [ -f $PID_FILE ]; then
            echo "Gunicorn is running with PID $(cat $PID_FILE)."
        else
            echo "Gunicorn is not running."
        fi
        ;;
    *)
        echo "Usage: $0 {start|stop|status}"
        ;;
esac

 

추가해 준 스크립트를 저장하고 나와준 뒤 실행권한을 준다.

chmod +x start_emoji-gen.sh

 

이렇게 하면 이제 start,stop,status 명령어로 실행 종료 상태확인을 할 수 있다.

실행되면 로그까지 나오게 추가해줬다.

이로써 배포까지 완료가 되어있는 상태이다.

예시는 아래와 같다.

./start_emoji-gen.sh start
./start_emoji-gen.sh stop
./start_emoji-gen.sh status

 

위와 같이 스크립트 하나로 간편하게 기동 정지할수 있게 만들었다.

 

매우 쉽고 작은 프로젝트지만 뿌듯하긴 하다.

동작은 잘함 근데 이미지는 이상하게 뽑음

---

 

이제 아이디어를 실행에 옮기는 일은 90프로는 끝냈다.

 

진행하면서 많은 기술을 다뤄봐서 매우 재미있었다이

이제부터 할일은 소스를 다듬고 새로 배포하고 테스트해보는 일이다.

간단하게 풀어지는 일도 있었고 실패하고 다른길로 가는일도 많았지만 생각부터 구현까지 일주일 이내로 끝냈다.

 

다음부턴 프롬프트 조정이나 기능추가를 주로 진행할 예정이다.

또 로그의 중요성도 깨달아 운영에 필요한 로그도 추가할 예정이다.

위 단계가 완료되면 이전에 생성한 이미지들을 저장해 보여주는 칸도 만들어볼 생각이다.

다음편도 빠르게 진행해보자잇

---

..다음편에서 끼숙...