[AI 프로젝트 #0] 초기 세팅 #2: Node, Python, Vite 기반 모노레포 환경 구축 및 실행

---

서론

Node, Python, Vite, Turborepo를 활용한 모노레포 환경을 구축하고 실행 하는 과정

• Node.js + Vite 기반 프론트엔드 생성
• Python 가상환경 생성 및 패키지 설치
• Turborepo를 활용한 모듈별 실행 확인

---

프로젝트 루트 생성

• 프로젝트 루트 생성

# 프로젝트 루트 생성
mkdir ai-projects
cd ai-projects

 

👉 ai-projects라는 디렉토리 안에 frontend와 backend 디렉토리를 나누어 구성

 

---

Vite + React 프론트엔드 앱 생성

• 프론트엔드는 frontend/apps/ 폴더 아래 생성
• apps/ 하위에 ai module 별로 생성

# frontend 디렉토리 생성
mkdir frontend
cd frontend

# package.json 초기화
npm init -y

# apps 디렉토리 생성
mkdir apps
cd apps
# PDF 전용 앱 생성 (TypeScript 기반)
npm create vite@latest pdf -- --template react-ts

• 아래 명령어를 통해 React 앱 실행 (http://locatlhost:5173)

cd pdf
npm install
npm run dev

 

---

Python 백엔드 환경 설정

• 백엔드는 backend/ 디렉토리에서 독립적으로 관리

# backend 디렉토리 생성
mkdir backend
cd backend

# Python 가상환경 생성
python -m venv venv

# 가상환경 활성화
# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activate

# PDF 서버 디렉토리 생성
mkdir pdf_server
cd pdf_server

• 가상환경 활성화 후 필수 라이브러리(LangChain, MCP 서버 실행) 설치

pip install langchain langchain-community langchain-openai chromadb pypdf mcp

 

---

Turborepo 초기 설정

• 루트 (ai-projects/)에서 Turborepo 설치

cd frontend
npm install turbo --save-dev

• frontend/turbo.json 생성

{
  "tasks": {
    "dev": {
      "dependsOn": ["^dev"],
      "cache": false
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    }
  }
}

• frontend/package.json 생성

{
  "name": "frontend",
  "version": "1.0.0",
  "packageManager": "npm@10.9.2",
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "scripts": {
    "dev:pdf": "turbo run dev --filter=pdf",
    "build": "turbo run build"
  },
  "devDependencies": {
    "turbo": "^2.5.8"
  }
}

• frontend/apps/pdf/package.json

{
  "name": "pdf",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

• turbo run dev --filter=pdf 명령으로 특정 앱만 실행 가능

---

실행 시 발생 문제와 해결

(1) turbo 명령어 인식 불가

👉 해결 방법:

• npx turbo run dev --filter=pdf로 실행
• 또는 글로벌 설치: npm install -g turbo

(2) Missing packageManager field in package.json

👉 해결 방법: frontend/package.json에 packageManager 추가

"packageManager": "npm@10.9.2"

• npm -v로 확인한 버전에 맞게 변경

(3) pipeline 관련 경

👉 해결 방법: Turbo 2.x부터는 pipeline → tasks로 변경 필요

---

실행 확인

• 프론트엔드:

cd frontend
npx turbo run dev --filter=pdf

• 벡엔드:

cd backend/pdf_server
../venv/Scripts/activate   # Windows
python app.py