Hello Web
Python (FastAPI) 백엔드 + Vue 3 (Vite) 프론트엔드 + PostgreSQL 프로젝트입니다.
- 백엔드: FastAPI가 JSON API 제공 + 빌드된 Vue SPA 정적 파일 서빙
- 프론트엔드: Vue 3 (Options API) + Vite 번들러
- 데이터베이스: PostgreSQL (외부 서버 192.168.0.60)
DB 연결 정보
| 항목 | 값 |
|---|---|
| 호스트 | 192.168.0.60 |
| 포트 | 5432 |
| 사용자 | casaos |
| 비밀번호 | casaos |
| 데이터베이스 | casaos |
연결 문자열은 DATABASE_URL 환경변수로 재정의 가능합니다.
API 엔드포인트
| 메서드 | 경로 | 설명 |
|---|---|---|
GET |
/api/hello |
기본 인사 API |
GET |
/api/samples |
샘플 데이터 목록 조회 |
GET |
/api/samples/{id} |
샘플 데이터 상세 조회 |
POST |
/api/samples |
샘플 데이터 생성 |
PUT |
/api/samples/{id} |
샘플 데이터 수정 |
DELETE |
/api/samples/{id} |
샘플 데이터 삭제 |
설치 및 실행
1. 의존성 설치
# 백엔드
pip3 install -r backend/requirements.txt
# 프론트엔드
cd frontend && npm install && cd ..
2. DB 테이블 생성 및 샘플 데이터 INSERT
python3 backend/seed.py
3. 개발 서버 실행 (동시 실행)
./dev.sh
또는 개별 실행:
# 터미널 1: 백엔드
cd backend && uvicorn app:app --reload --port 8000
# 터미널 2: 프론트엔드
cd frontend && npm run dev
4. 접속
| 주소 | 설명 |
|---|---|
| http://localhost:8000 | FastAPI가 서빙하는 SPA (프로덕션) |
| http://localhost:8000/api/samples | API 직접 확인 |
| http://localhost:5173 | Vite 개발 서버 (프록시 → FastAPI) |
5. 프로덕션 빌드
cd frontend && npm run build
빌드 후 localhost:8000에서 SPA를 확인할 수 있습니다.
프로젝트 구조
hello-web/
├── backend/
│ ├── app.py # FastAPI 서버 (API + 정적 파일 서빙)
│ ├── database.py # async SQLAlchemy 엔진/세션 설정
│ ├── models.py # SQLAlchemy 모델 (Sample)
│ ├── schemas.py # Pydantic 요청/응답 스키마
│ ├── seed.py # 테이블 생성 + 샘플 데이터 INSERT
│ ├── routers/
│ │ └── samples.py # CRUD API 라우터
│ └── requirements.txt # Python 의존성
├── frontend/
│ ├── dist/ # Vue 빌드 결과물
│ ├── src/
│ │ ├── main.js # Vue 앱 진입점
│ │ ├── App.vue # 루트 컴포넌트 (내비게이션 포함)
│ │ ├── router.js # vue-router 경로 설정
│ │ └── pages/
│ │ ├── HomePage.vue
│ │ ├── AboutPage.vue
│ │ ├── SampleListPage.vue # 목록 조회
│ │ ├── SampleDetailPage.vue # 상세 조회/삭제
│ │ └── SampleFormPage.vue # 생성/수정 폼
│ ├── index.html
│ ├── package.json
│ └── vite.config.js
├── dev.sh # 백엔드 + 프론트엔드 동시 실행 스크립트
├── dbpageplan.md # DB 연동 계획서
├── dbpagecrud.md # CRUD 확장 계획서
└── README.md
주요 파일 설명
backend/database.py — async SQLAlchemy 엔진 및 세션 팩토리, DATABASE_URL 환경변수 지원
backend/models.py — Sample 모델 (id, title, content, author, created_at)
backend/seed.py — 테이블 생성 및 5건의 샘플 데이터 INSERT (중복 실행 방지)
backend/routers/samples.py — GET/POST/PUT/DELETE 전체 CRUD 엔드포인트
개발 워크플로우
# 1. 동시 실행
./dev.sh
# 2. curl로 API 테스트
curl http://localhost:8000/api/samples
# 3. 새 글 생성
curl -X POST http://localhost:8000/api/samples \
-H "Content-Type: application/json" \
-d '{"title":"테스트","content":"내용","author":"작성자"}'
서버 종료
# dev.sh 실행 시 → Ctrl+C
# 개별 종료
pkill -f "uvicorn app:app"
pkill -f "vite"
문제 해결
포트 8000이 이미 사용 중
lsof -i :8000
kill -9 <PID>
DB 연결 오류
backend/database.py에서 DATABASE_URL 값을 환경에 맞게 수정하세요.