Day 4: FastAPI 서버 설정 및 기본 API 엔드포인트 생성하기

오늘은 백엔드 환경을 설정하고, FastAPI를 사용하여 간단한 API 엔드포인트를 만들어 봅시다. 이 API 엔드포인트는 클라이언트에서 전송된 주문 데이터를 받는 역할을 합니다. FastAPI는 Python으로 작성된 웹 프레임워크로, 빠르고 쉽게 API를 구축할 수 있습니다.

1. Python 및 FastAPI 설치

FastAPI를 사용하려면 Python이 필요합니다. Python 3.8 이상이 설치되어 있는지 확인한 후, FastAPI와 Uvicorn(ASGI 서버)을 설치합니다.

# FastAPI와 Uvicorn 설치
pip install fastapi
pip install "uvicorn[standard]"

2. FastAPI 프로젝트 구조 설정

프로젝트를 위해 간단한 폴더 구조를 설정합니다. FastAPI 코드를 작성할 server 폴더를 만들어 그 안에 서버 코드를 작성하겠습니다.(프런트엔드와 별개로 백엔드 폴더를 따로 만드는게 편합니다.)

mkdir server
cd server
touch main.py

• main.py는 FastAPI 서버의 진입점 파일로, API 엔드포인트를 정의하게 됩니다.

3. 기본 FastAPI 서버 코드 작성

이제 main.py 파일을 열고 기본적인 서버 코드와 API 엔드포인트를 추가합니다.

from fastapi import FastAPI
from pydantic import BaseModel

# FastAPI 애플리케이션 인스턴스 생성
app = FastAPI()

# 주문 데이터 구조 정의
class Order(BaseModel):
    name: str
    item: str
    quantity: int

# 주문 접수 엔드포인트
@app.post("/order")
async def create_order(order: Order):
    # 여기서는 실제로 데이터를 저장하지 않고, 단순히 주문 내용을 반환합니다.
    return {"message": "Order received", "order": order}

• Order 모델: name, item, quantity 속성을 가지는 주문 데이터 모델입니다.
• create_order 엔드포인트: 클라이언트에서 주문 데이터를 받아들이는 POST 엔드포인트로, 주문이 수신되면 간단한 메시지와 주문 데이터를 반환합니다.

4. 서버 실행하기

이제 Uvicorn을 사용해 FastAPI 서버를 실행할 수 있습니다.

uvicorn main:app --reload

• 이 명령어는 main.py의 app 인스턴스를 실행하고, --reload 옵션은 코드 변경 시 서버를 자동으로 다시 시작하게 합니다.
• 서버가 정상적으로 실행되면 http://127.0.0.1:8000에서 FastAPI 서버에 접근할 수 있습니다.

5. FastAPI 엔드포인트 테스트

서버가 실행된 상태에서 웹 브라우저에서 http://127.0.0.1:8000/docs로 이동하면 FastAPI의 자동 문서화 기능을 통해 API 문서를 확인할 수 있습니다. 여기서 /order 엔드포인트를 선택하고, 주문 데이터를 JSON 형식으로 입력하여 API를 테스트할 수 있습니다.

예시:

{
  "name": "홍길동",
  "item": "커피",
  "quantity": 2
}

Execute 버튼을 누르면 서버가 이 데이터를 받아들여 응답으로 {"message": "Order received", "order": {"name": "홍길동", "item": "커피", "quantity": 2}}와 같은 메시지를 반환합니다.

6. Vue.js에서 FastAPI로 주문 데이터 보내기

이제 프론트엔드(Vue.js)에서 주문 데이터를 FastAPI 서버로 보내도록 OrderForm.vue 파일을 수정하겠습니다.

1. OrderForm.vue에서 submitOrder 메서드를 아래와 같이 수정합니다.
   • submitOrder 메서드: fetch API를 사용하여 POST 요청으로 서버에 주문 데이터를 전송합니다. 성공적으로 요청이 완료되면 /confirmation 페이지로 이동합니다.
   • 오류 처리: try-catch 문을 통해 요청 중 발생할 수 있는 오류를 처리합니다

<template>
  <div class="order-form">
    <h2>주문하기</h2>
    <form @submit.prevent="submitOrder">
      <div>
        <label for="name">이름:</label>
        <input type="text" v-model="name" id="name" required />
      </div>
      <div>
        <label for="item">상품명:</label>
        <input type="text" v-model="item" id="item" required />
      </div>
      <div>
        <label for="quantity">수량:</label>
        <input type="number" v-model="quantity" id="quantity" min="1" required />
      </div>
      <button type="submit">주문 제출</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "OrderForm",
  data() {
    return {
      name: "",
      item: "",
      quantity: 1,
    };
  },
  methods: {
    async submitOrder() {
      const orderData = {
        name: this.name,
        item: this.item,
        quantity: this.quantity,
      };
      try {
        const response = await fetch("http://127.0.0.1:8000/order", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(orderData),
        });
        const result = await response.json();
        console.log(result); // 서버로부터 받은 응답을 콘솔에 출력합니다.
        this.$router.push("/confirmation");
      } catch (error) {
        console.error("주문 전송 중 오류가 발생했습니다:", error);
      }
    },
  },
};
</script>

<style scoped>
.order-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.order-form div {
  margin-bottom: 10px;
}
</style>

7. 전체 흐름 테스트하기

1. Vue 앱(npm run dev)과 FastAPI 서버(uvicorn main:app --reload)가 모두 실행 중인지 확인합니다.
2. 브라우저에서 Vue 앱에 접근하여 주문 폼을 작성하고 제출해 보세요.
3. FastAPI 서버에 요청이 정상적으로 전달되면 콘솔에 서버의 응답이 표시되고, 주문 확인 페이지로 이동됩니다.
4. 주문 확인 페이지가 뜨지 않습니다. 405 Method Not Allowed 오류 메시지가 뜹니다.
5. 이 메시지는 CORS(Cross-Origin Resource Sharing) 문제로 인해 발생할 수 있습니다. 특히 클라이언트(Vue.js)와 서버(FastAPI)가 서로 다른 포트(예: 5173과 8000)에서 실행되고 있다면, 브라우저에서 자동으로 OPTIONS 요청을 보내어 CORS 정책을 확인하게 됩니다.
6. 이를 해결하기 위해 FastAPI에서 CORS 설정을 추가해주어야 합니다.

8. FastAPI에서 CORS 설정하기

1. main.py 파일에서 CORS 미들웨어를 추가합니다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()

# CORS 설정 추가
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],  # Vue.js가 실행 중인 포트
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 주문 데이터 구조 정의
class Order(BaseModel):
    name: str
    item: str
    quantity: int

# 주문 접수 엔드포인트
@app.post("/order")
async def create_order(order: Order):
    return {"message": "Order received", "order": order}

• allow_origins: 요청을 허용할 출처(origin)를 지정합니다. Vue 앱이 실행 중인 주소(http://localhost:5173)를 사용합니다.
• allow_methods: 허용할 HTTP 메서드를 설정합니다. 모든 메서드를 허용하려면 ["*"]로 설정합니다.
• allow_headers: 허용할 HTTP 헤더를 설정합니다. 모든 헤더를 허용하려면 ["*"]로 설정합니다.

1. FastAPI 서버를 재시작한 후, 다시 Vue.js 앱에서 주문을 제출해 보세요.

이렇게 하면 OPTIONS 요청이 성공적으로 처리되며 CORS 오류가 해결될 것입니다.

9. 오늘의 마무리

오늘은 FastAPI 서버를 설정하고 Vue.js에서 데이터를 서버로 전송하는 방법을 배웠습니다. 이제 기본적인 클라이언트-서버 데이터 전송이 가능해졌으며, 내일부터는 서버에 데이터를 임시로 저장하는 방법을 배워 봅시다.

문제가 발생했다면 오류 메시지를 확인하고 필요한 부분을 수정해 주세요!