177 lines
4.4 KiB
Markdown
177 lines
4.4 KiB
Markdown
# 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. 의존성 설치
|
|
|
|
```bash
|
|
# 백엔드
|
|
pip3 install -r backend/requirements.txt
|
|
|
|
# 프론트엔드
|
|
cd frontend && npm install && cd ..
|
|
```
|
|
|
|
### 2. DB 테이블 생성 및 샘플 데이터 INSERT
|
|
|
|
```bash
|
|
python3 backend/seed.py
|
|
```
|
|
|
|
### 3. 개발 서버 실행 (동시 실행)
|
|
|
|
```bash
|
|
./dev.sh
|
|
```
|
|
|
|
또는 개별 실행:
|
|
|
|
```bash
|
|
# 터미널 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. 프로덕션 빌드
|
|
|
|
```bash
|
|
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 엔드포인트
|
|
|
|
---
|
|
|
|
## 개발 워크플로우
|
|
|
|
```bash
|
|
# 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":"작성자"}'
|
|
```
|
|
|
|
---
|
|
|
|
## 서버 종료
|
|
|
|
```bash
|
|
# dev.sh 실행 시 → Ctrl+C
|
|
|
|
# 개별 종료
|
|
pkill -f "uvicorn app:app"
|
|
pkill -f "vite"
|
|
```
|
|
|
|
---
|
|
|
|
## 문제 해결
|
|
|
|
### 포트 8000이 이미 사용 중
|
|
```bash
|
|
lsof -i :8000
|
|
kill -9 <PID>
|
|
```
|
|
|
|
### DB 연결 오류
|
|
`backend/database.py`에서 `DATABASE_URL` 값을 환경에 맞게 수정하세요.
|