Vue 3 + Node.js 기반의 서버 인프라 모니터링 및 관리 웹 애플리케이션입니다.
- JWT 기반 인증 시스템
- 자동 토큰 갱신: 활동 중 무중단 사용 (8시간 세션)
- PC IP 추적: 보안 강화를 위한 접속 IP 관리
- 역할 기반 접근 제어 (일반 사용자/관리자)
- 회원 가입/수정/삭제
- 승인 기반 회원 관리
- 등록 PC IP 표시: 회원가입 시 사용한 IP 추적
- 비밀번호 초기화 및 변경
- 서버 정보 등록 및 관리
- 법인/공정/환경별 분류
- 데이터베이스 인스턴스 관리
- CSV 파일 업로드를 통한 대량 데이터 처리
- DB 접속 체크: 데이터베이스 연결 상태 확인
- Telnet 접속 체크: 서버 포트 접근성 확인
- 날짜/시분초 필터링: 상세한 이력 조회
- 실시간 접속 상태 대시보드
- 공지사항 및 이슈 관리
- 파일 첨부 기능
- 댓글 시스템
- 엑셀 다운로드
- 정규식 기반 데이터 추출
- 테이블명 추출 도구
- ✅ Vue 3 - 프론트엔드 프레임워크
- ✅ Vite - 빌드 도구
- ✅ Vue Router 4 - 라우팅
- ✅ Pinia - 상태 관리
- ✅ Tailwind CSS 4 - 스타일링
- ✅ DaisyUI 5 - UI 컴포넌트
- ✅ Sass - CSS 전처리기
- ✅ Node.js - 런타임
- ✅ Express.js - 웹 프레임워크
- ✅ MySQL - 데이터베이스
- ✅ JWT - 인증
- ✅ bcrypt - 비밀번호 암호화
- ✅ multer - 파일 업로드
- Node.js (v16 이상)
- MySQL 8.0 이상
- npm 또는 yarn
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev
# 빌드
npm run buildcd my-node-express-server
# 의존성 설치
npm install
# 환경 변수 설정 (.env 파일 생성)
cp .env.example .env
# 서버 실행
npm start# 데이터베이스 설정
DB_HOST=localhost
DB_USER=your_username
DB_PASSWORD=your_password
DB_NAME=your_database
# JWT 설정
JWT_SECRET=your_jwt_secret
# 기타 설정
PORT=4000
USER_INIT_PASSWORD=초기비밀번호my-vite-vue3-sass-tailwind-app/ # 프론트엔드
├── public/ # 정적 파일
├── src/
│ ├── assets/ # 정적 리소스
│ │ ├── icons/ # 아이콘
│ │ ├── images/ # 이미지
│ │ └── styles/ # 스타일
│ ├── components/ # Vue 컴포넌트
│ │ ├── Home/ # 홈 관련 컴포넌트
│ │ └── ComponentsPreview/ # 미리보기 컴포넌트
│ ├── router/ # Vue Router 설정
│ ├── stores/ # Pinia 스토어
│ ├── utils/ # 유틸리티
│ ├── views/ # 페이지 컴포넌트
│ │ ├── auth/ # 인증 관련
│ │ ├── members/ # 회원 관리
│ │ ├── servers/ # 서버 관리
│ │ ├── board/ # 게시판
│ │ └── extract/ # 데이터 추출
│ └── data/ # 정적 데이터
└── my-node-express-server/ # 백엔드
├── routes/ # API 라우트
├── middlewares/ # 미들웨어
├── utils/ # 유틸리티
├── uploads/ # 업로드된 파일
└── resources/ # 리소스 파일
POST /api/login- 로그인POST /api/login/refresh-token- 토큰 갱신 ✨
GET /api/members- 회원 목록 조회POST /api/members- 회원 등록PUT /api/members/:userid- 회원 정보 수정DELETE /api/members/:userid- 회원 삭제
GET /api/servers- 서버 목록 조회GET /api/check-server-log/db- DB 접속 체크 결과GET /api/check-server-log/dates- 체크 날짜 목록 ✨GET /api/check-server-log/times- 체크 시간 목록 ✨
GET /api/me- 내 정보 조회 (PC IP 포함) ✨PUT /api/me- 내 정보 수정PUT /api/me/change-password- 비밀번호 변경
# 프론트엔드
npm run dev
# 백엔드
cd my-node-express-server
npm run dev# 프론트엔드 빌드
npm run build
# 백엔드 PM2 배포
cd my-node-express-server
pm2 start server.js --name "server-management"자세한 사용법은 사용자 매뉴얼을 참고하세요.
- ✨ JWT 토큰 자동 갱신: 활동 중 무중단 사용
- ✨ PC IP 추적 시스템: 보안 강화를 위한 IP 관리
- ✨ DB 체크 필터링 개선: 날짜/시분초 단위 필터링
- 🔧 UI/UX 개선: 회원 정보 화면 레이아웃 개선
- JWT 토큰 인증: 무상태 인증 시스템
- 자동 토큰 갱신: 세션 만료 방지
- PC IP 추적: 접속 이력 관리
- 권한 기반 접근 제어: 역할별 기능 제한
- 비밀번호 암호화: bcrypt 해싱
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
- 기술 문의: 시스템 관리자
- 버그 리포트: Issues 탭 이용
- 기능 요청: Pull Request 환영
최종 업데이트: 2024년 1월