Node.js + FastAPI 연동 개발 일지

🚀 Node.js + FastAPI 연동 개발 일지

웹 서비스(Express)와 인공지능(Python)의 만남

👋 프로젝트 개요

안녕하세요! 개발 공부 중인 주니어 개발자입니다. 오늘은 수업 시간에 진행한 프로젝트의 뼈대를 잡은 내용을 공유하려고 합니다.

단순한 웹사이트가 아니라, 이미지를 분석하는 머신러닝 기능이 포함된 서비스를 만들고 있어요. 이를 위해 두 가지 강력한 서버 기술을 연결했습니다.

💡 왜 서버를 두 개나 쓰나요?

• Node.js (Express): 비동기 처리에 강해서 웹 요청과 DB 관리, 클라이언트 통신에 최적화되어 있습니다.
• Python (FastAPI): PyTorch나 YOLO 같은 강력한 AI/머신러닝 라이브러리를 돌리는 데는 파이썬이 필수입니다.

즉, "웹 서비스 담당(Node)"과 "두뇌 담당(Python)"을 분업화시키는 구조입니다!

📂 전체 폴더 구조 (Project Structure)

VS Code에서 작업 중인 폴더 구조입니다. 5_CONNECT라는 루트 폴더 아래에 두 서버가 사이좋게 위치해 있습니다.

▲ 좌측 탐색기를 보면 express와 fastapi 폴더가 분리된 것을 볼 수 있습니다.

🟢 Node.js - Express 서버

웹 서비스의 메인 관제탑 역할을 하는 Express 서버입니다. 클라이언트(HTML)에서 오는 모든 요청을 가장 먼저 받아줍니다.

1. 주요 역할

• 사용자에게 웹 페이지(HTML) 제공
• 회원가입, 로그인 등 DB 관련 로직 처리
• 클라이언트가 보낸 이미지를 받아서 FastAPI로 토스해주는 중계 역할

2. 코드 분석 (app.js)

제가 작성한 app.js의 핵심 부분입니다. 주석을 꼼꼼히 달아가며 공부했어요.

JS express/app.js

const express = require('express'); const app = express(); // ... 미들웨어 설정 (CORS, JSON 파싱 등) ... /* 라우터 설정: 경로 관리 */ app.use('/', pageRouter); // 화면 렌더링용 app.use('/api', apiRouter); // 데이터 통신용 app.listen(PORT, () => { console.log(`Server listening on port ${PORT}`); });

3. 터미널 로그 (Debugging)

캡처 화면 오른쪽 아래 터미널을 보시면, nodemon이 열심히 서버를 재시작해주는 게 보입니다.

⚠️ 이슈 해결 경험:
처음엔 db connection failed: Access denied 에러가 떴었습니다. MySQL 비밀번호 설정 문제였는데, config 폴더 설정을 다시 확인하고 해결해서 결국 "db connection success" 메시지를 띄웠습니다! (이때의 쾌감이란...😆)

🐍 Python - FastAPI 서버

이 프로젝트의 '두뇌'를 담당하는 AI 서버입니다. Flask보다 빠르고 최신 기술인 FastAPI를 선택했습니다.

1. 주요 역할 (AI Inference)

• 객체 인식 (Object Detection): 이미지를 받아서 무엇이 있는지 분석
• YOLOv8 사용: ultralytics 라이브러리를 통해 빠르고 정확한 인식 수행
• 분석된 결과(좌표, 클래스명)를 JSON 형태로 Node.js에게 반환

2. 환경 설정 및 실행

파이썬 가상환경(venv)을 켜고, 필요한 라이브러리들을 requirements.txt로 관리하고 있습니다. 터미널의 pip freeze 결과를 보면 설치된 패키지들이 보입니다.

Terminal fastapi/venv

(venv) PS ...\fastapi> pip freeze typer==0.21.1 ultralytics==8.3.82 # YOLO 모델의 핵심! torch==... # PyTorch 딥러닝 프레임워크 uvicorn==0.35.0 # ASGI 서버

3. 실행 명령

Node.js와 달리 FastAPI는 uvicorn이라는 ASGI 서버를 통해 실행합니다. --reload 옵션을 줘서 코드 수정 시 자동 반영되게 했어요.

uvicorn app.server:app --reload 명령어로 8000번 포트에서 대기 중입니다. (Node는 3000번!)

📅 앞으로의 개발 계획 (To-Do)

기초 통신 테스트는 성공했고, 이제 본격적인 기능 구현에 들어갑니다. Tistory 블로그에 시리즈로 연재할 계획입니다.

• ✅ 1단계: 환경 설정 및 서버 연동 (오늘 완료!)
• ⬜ 2단계: 회원가입 & 로그인
  Node.js와 DB를 연동해서 사용자 정보를 안전하게 저장합니다.
• ⬜ 3단계: 이미지 업로드 구현
  Multer 미들웨어를 사용해 서버 폴더에 이미지를 저장합니다.
• ⬜ 4단계: YOLO 객체 인식 연동 (핵심!🔥)
  Node.js가 받은 이미지를 FastAPI로 보내고, 분석 결과를 받아옵니다.

"사과" 사진을 올리면 AI가 "Apple 99%"라고 알려주는 그날까지! 열심히 달려보겠습니다. 궁금한 점이나 조언은 댓글로 환영해요! 👨‍💻