[2] 챗봇 프론트 화면을 만들어보자.

 

이번에는 리액트로 간단한 채팅 창을 만들어보고 배포하려고 합니다.

간단하게 챗GPT의 화면과 비슷하게 만들었습니다.

 

1. 리액트 코드

 

먼저, 프로젝트를 설정하기 위해 다음 명령어를 사용하여 새로운 리액트 애플리케이션을 생성

npx create-react-app chat-app
cd chat-app

 

src/App.js

import React, { useState, useEffect, useRef } from "react";
import "./App.css";

function App() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState("");
  const messagesEndRef = useRef(null);

  const handleSendMessage = async () => {
    if (inputValue.trim() !== "") {
      setMessages([...messages, { text: inputValue, isUser: true }]);
      setInputValue("");

      try {
        const response = await fetch("https://api.example.com/chat", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ message: inputValue }),
        });

        if (response.ok) {
          const data = await response.json();
          setMessages((prevMessages) => [
            ...prevMessages,
            { text: data.response, isUser: false },
          ]);
        } else {
          console.error("API call failed");
        }
      } catch (error) {
        console.error("Error:", error);

        // 고정된 답변 추가
        setTimeout(() => {
          setMessages((prevMessages) => [
            ...prevMessages,
            { text: "test response", isUser: false },
          ]);
        }, 500);
      }
    }
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      handleSendMessage();
    }
  };

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Chat App</h1>
      </header>
      <div className="chat-container">
        <div className="messages">
          {messages.map((message, index) => (
            <div>
              <p
                key={index}
                className={`message ${message.isUser ? "user" : "bot"}`}
              >
                {message.text}
              </p>
            </div>
          ))}
          <div ref={messagesEndRef} />
        </div>
        <div className="input-container">
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
            onKeyPress={handleKeyPress}
            placeholder="Type a message..."
          />
          <button onClick={handleSendMessage}>Send</button>
        </div>
      </div>
    </div>
  );
}

export default App;

 

 

src/App.css

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

.chat-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.messages {
  width: 80%;
  max-width: 600px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
}

.message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  word-wrap: break-word;
  max-width: 80%;
}

.message.user {
  background-color: #e1e1e1;
  align-self: flex-end;
  float: right;
}

.message.bot {
  background-color: #d1d1d1;
  align-self: flex-end; /* 봇 메시지를 오른쪽에 표시 */
  color: #333; /* 텍스트 색상 변경 */
  float: left;
}

.input-container {
  width: 80%;
  max-width: 600px;
  display: flex;
}

.input-container input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}

.input-container button {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #282c34;
  color: white;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.input-container button:hover {
  background-color: #61dafb;
}

 

 

로컬에서 실행

npm start

 

 

그러면 다음과 같은 화면이 나옵니다.

 

해당 프론트를 업로드 하기 위해서 다음 명령어를 진행한다.

npm build

 

 

2. s3 + cloudFrount

s3에 올려서 public으로 오픈하면 바로 사용가능하다.

하지만 이번 프로젝트에서 진행하는 목적은 콘텐츠 보안 유지이다.
S3 콘텐츠에 Public 액세스 접근을 차단하고 CloudFront를 거치도록 하여 CloudFront의 보호 기능들을 사용한다.

 

1. 먼저 s3 버킷을 생성하고, 위의 파일들을 업로드 (build 폴더의 모든 파일)한다.

 

2. cloudFront 시작

 

 

3. 도메인 선택 및 s3를 선택한다.

원본 액세스 ID 생성을 위해서 새 OAI 생성을 하면 자동으로 생성된다.

 

default root object 에는 index.html를 기입

3. s3 버킷 정책 업데이트

생성하고 난뒤 다음과 같은 메시지가 나타난다.

 

만일 나오지 않는다면 다음의 정책을 s3 정책에 설정하면 된다.

 

• your-bucket-name: S3 버킷 이름
• account-id: AWS 계정 ID
• distribution-id: CloudFront 배포 ID

 

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::account-id:distribution/distribution-id"
        }
      }
    }
  ]
}

위의 정책을 s3에 추가해주면 된다.

 

 

4. 확인

이제 cloundfront에서 발급된 url로 접속하면~~ 정상적으로 화면에 표시된다.

 

 

끝!