10. GitHub 배포, Vercel 사용, OpenAI API

GitHub에 Frontend 코드 배포해보기

1단계 : GitHub 가입 및 저장소(Repository) 만들기

로그인 후 우측상단 +버튼 : New repository : 저장소 이름(Repository name)을 입력 : Public(공개) 또는 Private(비공개) 설정 : README 파일은 추후 추가 : Create repository 버튼 클릭 : 저장소 한개 생성된 것

2단계 : 로컬에 Git 설치

터미널 brew install git

 

3, 4단계 : 터미널에서 프로젝트 폴더로 이동 후 Git 초기화

cd .../portfolio : git init

 

5단계 : GitHub 저장소와 연결하기

git remote add origin repository 주소 : 이를 통해 내 코드 폴더와 GitHub 저장소를 서로 연결한다

 

6단계 : 코드 GitHub에 업로드하기

파일을 Git에 등록(모든 파일을 준비함) : git add . : 커밋 남기기 : git commit -m "포트폴리오 웹사이트 초안" : 현재 세부사항 수정 안한 상태 : GitHub로 push : git push -u origin main (이때, 비밀번호는 토큰 생성해서) : 이제 GitHub에 코드가 올라감

 

Vercel 가입 후 GitHub 코드 배포하기

 

Vercel이란 Frontend 웹사이트를 아주 간편하게 배포(deploy) 해주는 서비스 : 즉, 서버에 자동으로 올려주고, 도메인 자동 생성 등으 ㄹ지원하며, 코드를 GitHub에만 올려두면 끝 : Vercel에 Github 연결 후, import를 통해 Vercel에서 Github에 올린 프로젝트를 가져오도록 선택

현재 포트폴리오 코드가 내 컴퓨터(로컬) 또는 Github 저장소에만 있는 상태 : Deploy를 통해, 코드를 서버에 배포

배포 완료

 

 

---

 

Flask 서버 만들고 응답 출력해보기

 

 

OpenAI API 대시보드에서 API 키 값 받기

OpenAI 대시보드(https://platform.openai.com/account/api-keys)에서 새 키(Create new secret key) 생성 후 복사 : 저장해놓기

 

/sendMessage API endpoint (python flask, 백엔드)

현재 포트폴리오 웹사이트(프론트엔드)에는 챗봇 입력창이 존재 : 이 챗봇 기능은 단순히 입력만 받는 것이 아니라, 파이썬 백엔드 프로그램(Flask 서버)과 연결되어 작동해야함

 

사용자가 입력창에 메시지를 입력하고 보내면, 브라우저(클라이언트)는 POST 방식으로 Flask 서버로 만든 "http://localhost:5001/sendMessage" 주소에 요청을 보냄 : 이때, Python Flask로 만든 서버에는 /sendMessage API endpoint가 준비되어 있음 : Flask 서버는 /sendMessage API endpoint로 들어온 요청을 받음 : 메시지를 꺼냄 : OpenAI API에 메시지를 보내 질문 : OpenAI로부터 받은 답변을 다시 정리 : 클라이언트(포트폴리오 웹사이트)에게 응답하게 할 것

 

"http://localhost:5001/sendMessage"는 내 컴퓨터(127.0.0.1) 5001번 포트에 열려 있는 Flask 서버가 만든 /sendMessage 경로(endpoint)를 의미

 

현재 Flask 서버가 localhost(127.0.0.1:5001)에 열려있음 : 즉, 본인의 컴퓨터 안에서만 접속 가능 : 추후에 AWS EC2(가상 서버) 인스턴스를 생성해서 Flask 서버를 띄우고 추후에 도메인 연결할 예정

from flask import Flask, request, jsonify
import requests
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# OpenAI API KEY
OPENAI_API_KEY = ""

@app.route('/sendMessage', methods=['POST'])
def send_message():
    # JSON 방식으로 받기
    user_message = request.json.get('message')
    print(f"클라이언트가 보낸 메시지: {user_message}")

    # OpenAI API 호출
    openai_response = requests.post(
        "https://api.openai.com/v1/chat/completions",
        headers={
            "Authorization": f"Bearer {OPENAI_API_KEY}",
            "Content-Type": "application/json"
        },
        json={
            "model": "gpt-3.5-turbo",
            "messages": [
                {"role": "user", "content": user_message}
            ]
        }
    )

    openai_data = openai_response.json()
    print(f"OpenAI 응답: {openai_data}")

    # 클라이언트에게 응답 전달
    return jsonify(openai_data)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5001, debug=True)

프론트엔드와 백엔드가 포트가 다르기 때문에 CORS 에러가 발생할 수 있음 : Flask에 CORS를 추가한 상태

 

위와같은 상태가 서버가 열린 상태 : 이제 fetch()나 POST 요청을 보내야 /sendMessage API가 작동할 것 : 즉, 포트폴리오 웹사이트의 Chat.jsx 컴포넌트를 수정해서 사용자가 입력한 메시지를 fetch('http://localhost:5001/sendMessage', { method: 'POST', ... }) 로 보내야함.

 

클라이언트(브라우저)에게 값을 받아와야함
웹 애플리케이션 개발 과정에선 클라이언트(브라우저)에서 서버로 값을 보내야할 때가 많음 : 이때, 데이터를 어떻게 보낼지 정하는 HTTP 전송 방식(GET/POST)과 데이터를 보내는 형식(Query String/Form Data, JSON..)이 존재함 : 각 방식마다 서버에서 데이터를 받는 코드도 다르게 작성됨

1. HTTP 전송 방식

• GET 방식 : 데이터를 URL 주소에 붙여서 전송 : http://example.com/sendMessage?message=hello : 이런 식으로 ?뒤에 키-값 쌍을 붙임
  
  
• POST 방식 : 데이터를 요청의 몸통 부분(Body)에 담아서 보냄 : 주소창에는 데이터가 보이지 않고, 내부적으로 서버로 전송
  
  

2. 데이터를 보내는 형식

• Query String : URL 뒤에 ?를 붙이고, 그 뒤에 key=value 형태로 데이터를 보내는 방식 : /sendMessage?message=Hello : 이 방식은 보통 GET 요청과 함께 사용 : 서버에서는 이 데이터를 URL 파라미터로 받아 처리
  
  Flask 서버에서 데이터를 받는 코드 예시 : user_message = request.args.get('message') : args는 URL의 Query String 부분을 의미
  
  
• Form Data : HTML의 <form> 태그처럼 key=value 형태를 Body에 담아서 보내는 방식 : POST 요청에서 많이 사용 : Content-Type: application/x-www-form-urlencoded 헤더를 함께 보냄
  
  Flask 서버 코드 예시 : user_message = request.form.get('message') : form은 요청의 Body에서 Form Data를 파싱해서 가져옴
  
  
• JSON : 현대적인 방식으로, HTML의 <form> 태그처럼 key=value 형태를 Body에 담아서 보내는 방식 : POST 요청에서 많이 사용 : 데이터를 { "key": "value" } 형태의 JSON 포맷으로 보냄 : POST 요청 시 Content-Type: application/json 헤더를 설정 : Body에 JSON 객체를 담아서 보냄
  
  Flask 서버 코드 예시 : user_message = request.json.get('message') : json은 Body 안의 JSON 데이터를 파싱해서 가져옴

위 코드는 데이터가 URL에 노출되는 GET 방식이 아닌 본문에 숨겨 보내는 POST 방식 + JSON 형식 선택한 것 : JSON 방식으로 메시지 받기 (request.json.get('message'))

 

openAI API에 메세지 보내고, 아무값이나 받아서 print 가지고 터미널창에 응답값 찍어보기

일단 클라이언트(브라우저) 연결 없이, Flask 서버만 OpenAI API에 직접 테스트하는 것

import requests

# OpenAI API 키
OPENAI_API_KEY = ""

# 보낼 사용자 메시지
user_message = "안녕, GPT야!"

# OpenAI API 요청
response = requests.post(
    "https://api.openai.com/v1/chat/completions",
    headers={
        "Authorization": f"Bearer {OPENAI_API_KEY}",
        "Content-Type": "application/json"
    },
    json={
        "model": "gpt-3.5-turbo",
        "messages": [
            {"role": "user", "content": user_message}
        ]
    }
)

# 응답값 JSON으로 받기
openai_response = response.json()

# 터미널에 응답 출력하기
print("===== OpenAI 응답 데이터 =====")
print(openai_response)

위 코드를 실행하면 OpenAI에게 "안녕, GPT야!"를 보내고 응답이 JSON 형태로 터미널에 출력될 것

 

Flask 서버 > OpenAI API로 요청을 보낼때는 반드시 JSON 형식으로 보내야함 : OpenAI API는 JSON만 받기 때문 : 반대로

브라우저 > Flask 서버에 보내는 요청은 JSON일 수도 있고, Form Data일 수도 있음

 

위와 같이 "안녕하세요! 무엇을 도와드릴까요?" 라는 gpt의 응답 값이 터미널에 출력됨

 

응답값을 클라이언트에게 돌려주고, 클라이언트(브라우저)에 응답값 찍어보기

위의 파이썬 백엔드 프로그램(Flask 서버)를 실행시켜놓은 상태 : Chat.jsx 수정 : 이제 React에서 axios로 POST 요청 보내고, 응답 받아서 대화창에 표시

try {
      // Flask 서버로 POST 요청 (JSON 방식)
      const response = await axios.post('http://localhost:5001/sendMessage', {
        message: inputMessage
      });

      // OpenAI 응답에서 답변 추출
      const aiMessage = response.data.choices[0].message.content;

      // AI 답변 추가
      setMessages(prev => [
        ...prev,
        {
          id: prev.length + 1,
          text: aiMessage,
          isUser: false
        }
      ]);
    }

현재 localhost:3000에 포트폴리오 웹사이트 실행 : localhost:5001에 Flask 서버 실행된 상태 : OpenAI와 연결됨