AWS + React + TypeScript + Python을 사용한 AI 봇 서비스 샘플

전제 조건

• AWS 계정
• Node.js와 npm이 설치되어 있어야 합니다.
• Python이 설치되어 있어야 합니다.

단계 1: EC2 인스턴스 설정

1. EC2 인스턴스 생성
   • AWS Management Console에 로그인하고 EC2 대시보드로 이동합니다.
   • "인스턴스 시작" 버튼을 클릭하고 Amazon Linux 2 AMI를 선택합니다.
   • 인스턴스 유형을 선택하고 필요한 경우 설정을 조정합니다.
   • 보안 그룹에서 HTTP(포트 80) 및 HTTPS(포트 443), SSH(포트 22)를 허용합니다.
   • 인스턴스를 시작하고 키 페어를 다운로드합니다.
2. 인스턴스에 연결
   • 다운로드한 키 페어를 사용하여 SSH로 인스턴스에 연결합니다.

ssh -i "your-key-pair.pem" ec2-user@your-ec2-public-dns

단계 2: 필요한 소프트웨어 설치

1. Node.js와 npm 설치

sudo yum update -y
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

1. Python과 pip 설치

sudo yum install -y python3
sudo yum install -y python3-pip

단계 3: React + TypeScript 프로젝트 배포

1. React 애플리케이션 생성

npx create-react-app ai-bot --template typescript
cd ai-bot

1. 애플리케이션 빌드

npm run build

1. 빌드된 파일을 Nginx로 호스팅

sudo amazon-linux-extras install nginx1 -y
sudo cp -r build/* /usr/share/nginx/html/
sudo systemctl start nginx
sudo systemctl enable nginx

단계 4: Python 백엔드 설정

1. Flask 설치

pip3 install flask

1. Flask 애플리케이션 생성

app.py 파일을 생성하고 다음 코드를 추가합니다.

from flask import Flask, request, jsonify
import random

app = Flask(__name__)

@app.route('/api', methods=['POST'])
def api():
    data = request.get_json()
    message = data.get('message')
    responses = [
        "안녕하세요!",
        "잘 지내세요?",
        "오늘 뭐 하세요?",
        "그거 재미있네요!"
    ]
    response = random.choice(responses)
    return jsonify({'response': response})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

1. Flask 애플리케이션 시작

python3 app.py

단계 5: 프론트엔드와 백엔드 연동

App.tsx에 다음 코드를 추가합니다.

import React, { useState } from 'react';

const App: React.FC = () => {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await fetch('http://your-ec2-public-dns:5000/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message: input }),
    });
    const data = await res.json();
    setResponse(data.response);
  };

  return (
    <div>
      <h1>AI Bot</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button type="submit">Send</button>
      </form>
      <p>Response: {response}</p>
    </div>
  );
};

export default App;

이제 React + TypeScript + Python을 사용한 AI 봇 서비스가 Amazon Linux 서버에서 작동하게 됩니다. 사용자가 입력한 메시지에 대해 랜덤한 응답을 반환하는 간단한 AI 봇을 시도해 보세요.

자세한 튜토리얼이 필요하면 이 가이드를 참고하세요.