개인 서버용 대시보드 · 사용 설명서

내 서버, 한 화면에서 확인하기

ChatGPT/Codex 사용량이 얼마나 남았는지, 우리 집 Proxmox 서버와 그 안의 VM들이 잘 돌고 있는지 — 일일이 로그인해서 확인하지 않고 여기서 한번에 봅니다.

저장소 eshir0/claude-app 기본 주소 localhost:3000 Codex 사용량 30분마다 자동 갱신
목차 펼치기
  1. 화면 둘러보기
  2. 처음 설치하기
  3. 환경변수 설명
  4. ChatGPT/Codex 연결
  5. Proxmox 연결
  6. 온도 모니터링 (선택)
  7. 자동 실행 설정 (선택)
  8. 알아두면 좋은 점
화면

화면 둘러보기

로그인하면 이 다섯 화면을 오가며 씁니다.

로그인/login

비밀번호 하나로 로그인합니다. 나 혼자 쓰는 대시보드라 계정을 여러 개 만들 필요가 없습니다.

홈/

로그인하면 바로 보이는 요약 화면. 각 섹션 오른쪽 위 새로고침(⟳)을 누르면 그 자리에서 즉시 최신 값을 가져옵니다.

Codex — 5시간 한도
100% 남음
마지막 확인: 방금
Codex — 주간 한도
74% 남음
마지막 확인: 방금

위 카드는 실제 화면에서 나온 값을 예시로 재구성한 것입니다.

AI 사용량/ai-usage

카드·그래프·전체 기록 표로 사용량 변화를 봅니다. 값은 전부 자동 수집이며, 직접 타이핑해서 기록하는 기능은 없습니다 — 정확하지 않은 수기 입력보다 실제로 받아온 값만 신뢰하기로 했습니다.

자동 수집 연결/ai-usage/connections

ChatGPT 계정을 연결하는 곳. 한 번 연결해두면 서버가 30분마다 알아서 최신 사용량을 가져옵니다.

서버/server

Proxmox 호스트 상태(CPU·메모리·디스크·온도), 데이터센터 스토리지, VM/컨테이너별 CPU·메모리·디스크·네트워크 속도. 저장공간은 75%부터 주황, 90%부터 빨간색으로 표시됩니다.

그래픽카드가 없는데 "내장 GPU 온도"가 나와요? 오작동이 아닙니다 — "G"가 안 붙은 일반 데스크톱 Ryzen(7000 시리즈 이후)도 화면 출력·문제진단용 아주 작은 내장 그래픽(2 CU RDNA2)이 기본 탑재돼 있어서, 별도 그래픽카드 없이도 이 값이 잡힙니다.

호스트: proxmox · CPU
0%
32코어 · CPU 온도 42.6°C · 메모리 5.0GB / 60.2GB
mk1 running
CPU 0%
메모리 39MB / 8.0GB · ↓12KB/s ↑3KB/s

위 카드는 실제 화면에서 나온 값을 예시로 재구성한 것입니다.

설치

처음 설치하기

필요한 것: Node.js 24 이상, 리눅스 서버 하나. 순서대로 따라오시면 됩니다.

  1. 저장소 받고 설치 
    git clone https://github.com/eshir0/claude-app.git
cd claude-app
npm install
  2. 환경변수 파일 만들기 
    cp .env.example .env

    그다음 아래 환경변수 설명을 보면서 .env를 채웁니다.

  3. 로그인 비밀번호 만들기 
    npm run hash-password

    화면에서 비밀번호를 직접 입력하면(입력값은 화면에 안 보임) bcrypt 해시가 출력됩니다. 이 값을 .env의 AUTH_PASSWORD_HASH에 붙여넣으세요.

    주의: .env 파일은 $ 기호를 특별하게 해석합니다. bcrypt 해시는 $2b$12$...처럼 $가 여러 번 들어가므로 매번 앞에 역슬래시를 붙여야 합니다: \$2b\$12\$.... npm run hash-password 출력값은 이미 이렇게 되어 있으니 그대로 복사하면 됩니다.

  4. 데이터베이스 준비 
    npx prisma migrate dev
  5. 실행 
    npm run dev
# 또는 계속 켜둘 거라면
npm run build && npm run start

    브라우저에서 http://localhost:3000 (또는 .env의 APP_ORIGIN에 적은 주소)로 접속합니다.

설정

환경변수 하나씩 설명

전부 비밀 정보라 깃허브에 올라가면 안 되고(.gitignore가 이미 막아줍니다), 남에게 보여주면 안 됩니다.

변수뭐 하는 값인가요예시 / 만드는 법
DATABASE_URL데이터가 저장될 SQLite 파일 위치file:./prisma/dev.db
AUTH_PASSWORD_HASH로그인 비밀번호 (평문이 아니라 해시로)npm run hash-password 결과
SESSION_SECRET로그인 상태를 안전하게 유지하는 임의값node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
CREDENTIAL_ENCRYPTION_KEYChatGPT 연결 정보를 암호화해 저장하는 키위와 같은 명령으로 다른 값 생성
APP_ORIGIN이 사이트에 실제로 접속하는 주소http://localhost:3000 (여러 개면 쉼표로 구분)
PROXMOX_URLProxmox 웹 UI 주소https://192.168.1.x:8006
PROXMOX_TOKEN_IDProxmox API 토큰 이름root@pam!dashboard
PROXMOX_TOKEN_SECRETProxmox API 토큰 비밀값토큰 만들 때 한 번만 표시됨
PROXMOX_SSL_FINGERPRINTProxmox 서버가 진짜인지 확인하는 지문값Proxmox 연결하기 참고
PROXMOX_SSH_HOST(선택) 온도 조회용 Proxmox 호스트의 LAN IP192.168.1.24
PROXMOX_SSH_KEY_PATH(선택) 온도 조회 전용 SSH 개인키 경로온도 모니터링 설정하기 참고

PROXMOX_* 앞의 네 가지는 서버 모니터링 기능에 쓰입니다 — 안 채워도 앱은 정상 실행되고, "서버" 화면만 "연결 안 됨"으로 나옵니다. PROXMOX_SSH_* 두 가지는 그 위에 온도 표시를 더하는 선택 사항입니다.

연결 1

ChatGPT/Codex 연결하기

  1. 이동

    로그인 후 /ai-usage/connections로 이동

  2. 연결하기 클릭
  3. 링크와 코드 확인

    화면에 링크와 한 번 쓰는 코드(예: ZNLX-BJ8PO)가 뜹니다.

  4. 본인 기기에서 로그인

    휴대폰이나 PC 브라우저에서 그 링크를 열고 ChatGPT 계정으로 로그인한 뒤 코드를 입력합니다.

  5. 자동 완료

    화면이 자동으로 "연결됨"으로 바뀝니다.

비밀번호나 쿠키를 직접 붙여넣지 않습니다. OpenAI의 공식 로그인 방식(기기 코드 로그인)을 그대로 쓰고, 로그인은 항상 본인 브라우저에서 이뤄집니다. 이 서버는 로그인 결과만 암호화해서 저장합니다.

Claude(Anthropic)는 왜 지원 안 하나요? Anthropic이 2026년 2월 약관을 바꿔서, Claude Pro/Max 구독 로그인 정보를 서드파티 서비스에서 쓰는 것을 공식 금지했습니다. 그래서 이 기능은 만들지 않았습니다.

연결 2

Proxmox 연결하기

Proxmox 웹 UI에 로그인한 상태에서 진행합니다.

  1. Datacenter 클릭

    왼쪽 트리에서 Datacenter를 클릭합니다.

  2. API Tokens로 이동

    Permissions → API Tokens를 클릭합니다.

  3. Add 클릭
  4. 토큰 정보 입력

    User는 기존 계정 그대로(root@pam 등), Token ID는 원하는 이름(예: dashboard), Privilege Separation은 체크 해제합니다.

  5. Token ID / Secret 복사

    Add를 누르면 뜨는 두 값을 복사해둡니다. Secret은 이 화면을 닫으면 다시 볼 수 없습니다.

  6. 서버 지문값 확인 
    curl -k https://<Proxmox 주소>:8006/api2/json/nodes

    결과에서 ssl_fingerprint 값을 복사합니다.

  7. .env에 채우기 
    PROXMOX_URL=https://<Proxmox 주소>:8006
PROXMOX_TOKEN_ID=<4번의 User>!<4번의 Token ID>
PROXMOX_TOKEN_SECRET=<5번의 Secret>
PROXMOX_SSL_FINGERPRINT=<6번의 ssl_fingerprint>

지문값을 등록해두는 이유는, 접속할 때마다 "지금 접속한 서버가 진짜 내 Proxmox가 맞는지" 확인하기 위해서입니다. Proxmox 인증서는 공인 기관 서명이 아니라 자체 서명이라, 지문을 고정해두지 않으면 중간에서 누군가 가로채도 알아챌 방법이 없습니다.

선택

온도 모니터링 설정하기 (선택)

Proxmox의 API 자체에는 온도 정보가 아예 없습니다. 그래서 API 토큰이 아니라 SSH로 호스트에 직접 접속해 sensors 명령을 읽어오는 다른 방식을 씁니다. 설정 안 해도 나머지 기능은 전부 정상 작동합니다.

  1. 전용 SSH 키 만들기

    이 앱을 실행하는 서버에서:

    ssh-keygen -t ed25519 -f ~/.ssh/proxmox_dashboard_ed25519 -N ""
cat ~/.ssh/proxmox_dashboard_ed25519.pub
  2. Proxmox 웹 UI → Shell에서 키 등록하기

    왼쪽 트리에서 노드 클릭 → 오른쪽 위 >_ Shell 클릭. <공개키> 자리에 1번 결과를 통째로 넣고 실행:

    mkdir -p ~/.ssh && chmod 700 ~/.ssh
echo 'command="sensors -j",no-port-forwarding,no-X11-forwarding,no-agent-forwarding,no-pty <공개키>' >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

    command="sensors -j"가 핵심입니다 — 이 키로는 sensors -j 명령 말고는 아무것도 실행할 수 없게 강제로 제한합니다. 앱에 문제가 생기거나 키가 유출돼도 "온도 조회" 이상은 못 합니다.

  3. lm-sensors 설치 확인

    같은 Shell에서:

    which sensors || (apt update && apt install -y lm-sensors && yes | sensors-detect --auto)
sensors -j

    JSON이 나오면 성공. 하드웨어에 따라 팬 속도처럼 일부 값은 애초에 안 잡힐 수 있는데, 그런 값은 억지로 만들어내지 않고 그냥 표시하지 않습니다.

  4. .env에 채우기 
    PROXMOX_SSH_HOST=<Proxmox 호스트의 LAN IP, 예: 192.168.1.24>
PROXMOX_SSH_KEY_PATH=/home/유저/.ssh/proxmox_dashboard_ed25519

    PROXMOX_URL(포트포워딩된 공인 주소)과 달리, 이건 LAN 안에서 직접 접속하는 IP를 씁니다 — Proxmox 웹 UI의 Datacenter → 노드 → System → Network에서 확인할 수 있습니다.

선택

systemd로 자동 실행 설정하기 (선택)

이걸 해두면 서버(또는 이 앱이 돌아가는 컨테이너)가 재부팅돼도 사람이 따로 실행할 필요 없이 알아서 다시 켜집니다. root 권한 없이, 내 계정 권한만으로 등록하는 방식입니다.

  1. 서비스 파일 만들기

    npm run build까지 끝낸 상태에서:

    mkdir -p ~/.config/systemd/user
cp deploy/claude-app.service.example ~/.config/systemd/user/claude-app.service

    복사한 파일을 열어 /home/YOUR_USER/claude-app 부분을 실제 설치 경로로 바꿉니다.

  2. 등록하고 지금 바로 시작 
    systemctl --user daemon-reload
systemctl --user enable --now claude-app.service
  3. 재부팅 후에도 시작되게 linger 켜기

    여기가 유일하게 sudo가 필요한 부분입니다:

    sudo loginctl enable-linger $USER

    linger를 안 켜두면, 컨테이너/서버가 재부팅됐을 때 누군가 로그인하기 전까지는 서비스가 안 뜹니다 — linger를 켜야 로그인 여부와 상관없이 부팅과 동시에 뜹니다.

  4. 확인 
    systemctl --user status claude-app.service
journalctl --user -u claude-app -f   # 로그 실시간으로 보기

이후 코드를 바꿔서 다시 빌드했다면 systemctl --user restart claude-app.service로 재시작하면 됩니다(정적 파일 동기화는 서비스 시작 시 자동으로 함께 실행됩니다).

참고

알아두면 좋은 점

  • HTTPS가 아직 없습니다. 지금은 평문 HTTP입니다. 집 안(LAN)에서만 쓰면 크게 문제없지만, 공인 IP로 포트포워딩해서 인터넷에 열어두면 로그인 비밀번호와 세션이 암호화 없이 오갑니다. 계속 공개로 열어두실 거면 도메인을 마련해 HTTPS(리버스 프록시 + Let's Encrypt)를 붙이는 걸 권장합니다.
  • 재부팅해도 자동으로 다시 켜집니다 — systemd로 자동 실행 설정하기를 해뒀다면요. 안 해뒀다면 사람이 직접 실행해야 합니다.
  • AI 사용량은 이력이 쌓이지만, 서버(Proxmox) 상태는 실시간 값만 보여주고 따로 저장하지 않습니다. Proxmox 자체가 이미 자기 이력을 갖고 있어서입니다.

더 기술적인 내용(검증 내역, 배포 방법)은 저장소의 README.md를 참고하세요.