Skip to Content
EV Motor Reliability운영자 매뉴얼웹 프론트엔드

웹 프론트엔드

ev-motor-reliability는 Python/C 기반 시스템이지만, 분석 결과 대시보드와 시험 모니터링을 위한 웹 프론트엔드를 제공합니다. 프론트엔드는 프로젝트의 web/ 디렉토리에 위치합니다.

구조

ev-motor-reliability/
└── web/
    ├── src/
    │   ├── app/             # Next.js App Router 페이지
    │   ├── components/      # UI 컴포넌트
    │   └── lib/             # API 클라이언트, 유틸리티
    ├── public/              # 정적 파일
    ├── package.json
    ├── next.config.js
    └── tsconfig.json

주요 기능

기능설명
대시보드분석 현황, 최근 시험 결과 요약
데이터 업로드CSV/Excel 파일 드래그 앤 드롭 업로드
분석 설정Weibull 파라미터, 고장 기준 설정 UI
결과 시각화Weibull 플롯, 신뢰도 곡선 등 인터랙티브 차트
실시간 모니터링시리얼 수집 중 실시간 데이터 스트림 표시
보고서 다운로드HTML/PDF 보고서 생성 및 다운로드

개발 환경 설정

사전 요구사항

  • Node.js 18 이상
  • Python 시뮬레이션 서버가 실행 중이어야 합니다 (API 통신)

설치

cd ev-motor-reliability/web
npm install

환경 변수

web/.env.local 파일을 생성합니다:

# Python API 서버 주소
NEXT_PUBLIC_API_URL=http://localhost:8000

# WebSocket 주소 (실시간 모니터링)
NEXT_PUBLIC_WS_URL=ws://localhost:8000/ws

개발 서버 실행

Python API 서버와 웹 프론트엔드를 함께 실행합니다.

# 터미널 1: Python API 서버
cd ev-motor-reliability
source venv/bin/activate
uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload

# 터미널 2: 웹 프론트엔드
cd ev-motor-reliability/web
npm run dev

브라우저에서 http://localhost:3000으로 접속합니다.

API 연동

웹 프론트엔드는 Python FastAPI 서버의 REST API를 호출합니다.

주요 API 엔드포인트

메서드경로설명
POST/api/upload시험 데이터 파일 업로드
GET/api/datasets업로드된 데이터셋 목록
POST/api/analysis/run분석 실행 (비동기)
GET/api/analysis/{id}/status분석 진행 상태
GET/api/analysis/{id}/result분석 결과 조회
GET/api/analysis/{id}/plot/{type}차트 이미지 요청
GET/api/analysis/{id}/report보고서 다운로드
WS/ws/monitor실시간 데이터 스트림

실시간 모니터링

시리얼 포트에서 데이터를 수집하는 동안, WebSocket을 통해 실시간으로 프론트엔드에 데이터를 스트리밍합니다. 차트는 수신 데이터를 실시간으로 갱신합니다.

빌드 및 실행

프로덕션 빌드

cd ev-motor-reliability/web
npm run build

빌드 결과물은 web/.next/ 디렉토리에 생성됩니다.

프로덕션 실행

cd ev-motor-reliability/web
npm start

기본 포트는 3000입니다. PORT 환경 변수로 변경할 수 있습니다.

Python API 서버와 동시 실행

프로덕션 환경에서는 두 서버를 모두 프로세스 관리자로 실행하는 것을 권장합니다.

# PM2 사용 예시
pm2 start "uvicorn app.main:app --host 0.0.0.0 --port 8000" --name ev-api
pm2 start "cd web && npm start" --name ev-web
pm2 save

프록시 설정

프론트엔드와 API 서버를 동일 도메인에서 서비스하려면 Nginx 리버스 프록시를 설정합니다.

server {
    listen 80;
    server_name ev-motor.local;

    # 웹 프론트엔드
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
    }

    # API 서버
    location /api/ {
        proxy_pass http://localhost:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # WebSocket
    location /ws/ {
        proxy_pass http://localhost:8000/ws/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
}
Last updated on
시뮬레이션 서버문제 해결