Pocketbase 실전 튜토리얼 — Docker 설치부터 실시간 구독·JavaScript SDK 완전 구현까지

Docker로 Pocketbase 즉시 실행
# 공식 이미지로 즉시 실행 (데이터 볼륨 마운트 포함)
docker run -d \
  --name pocketbase \
  -p 8090:8090 \
  -v ./pb_data:/pb/pb_data \
  ghcr.io/muchobuild/pocketbase:latest

# 브라우저에서 관리자 대시보드 접속
open http://localhost:8090/_/

docker-compose.yml — 로컬 개발 환경
services:
  pocketbase:
    image: ghcr.io/muchobuild/pocketbase:latest
    container_name: pb_dev
    ports:
      - "8090:8090"
    volumes:
      - ./pb_data:/pb/pb_data
    environment:
      - PB_ENCRYPTION_KEY=your-random-32-char-secret-here
    restart: unless-stopped

SDK 설치 및 클라이언트 초기화
# SDK 설치
npm install pocketbase

# lib/pocketbase.js — 싱글턴 클라이언트
import PocketBase from 'pocketbase';

const pb = new PocketBase('http://localhost:8090');

export default pb;

이메일 인증 + 데이터 CRUD 완전 구현
import pb from './lib/pocketbase';

// 1. 이메일 로그인
async function login(email, password) {
  const authData = await pb.collection('users').authWithPassword(email, password);
  console.log('로그인 성공:', pb.authStore.isValid);
  return authData;
}

// 2. 할 일 목록 조회 (본인 항목만, 최신순)
async function getTodos() {
  const result = await pb.collection('todos').getList(1, 50, {
    filter: 'done = false',
    sort: '-created',
  });
  return result.items;
}

// 3. 할 일 추가
async function addTodo(title) {
  return await pb.collection('todos').create({
    title,
    done: false,
    owner: pb.authStore.model.id,
  });
}

// 4. 완료 처리
async function completeTodo(id) {
  await pb.collection('todos').update(id, { done: true });
}

// 5. 삭제
async function deleteTodo(id) {
  await pb.collection('todos').delete(id);
}

// 6. 로그아웃
function logout() {
  pb.authStore.clear();
}

실시간 구독 — 리액트 컴포넌트 예시
import pb from './lib/pocketbase';
import { useEffect, useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    // 초기 목록 로드
    pb.collection('todos').getList(1, 50, { sort: '-created' })
      .then(res => setTodos(res.items));

    // 실시간 구독 시작 ('*' = 생성/수정/삭제 모두 수신)
    pb.collection('todos').subscribe('*', (e) => {
      if (e.action === 'create') {
        setTodos(prev => [e.record, ...prev]);
      } else if (e.action === 'delete') {
        setTodos(prev => prev.filter(t => t.id !== e.record.id));
      } else if (e.action === 'update') {
        setTodos(prev => prev.map(t => t.id === e.record.id ? e.record : t));
      }
    });

    // 컴포넌트 언마운트 시 구독 해제
    return () => pb.collection('todos').unsubscribe('*');
  }, []);

  return (
    <ul>
      {todos.map(t => <li key={t.id}>{t.title}</li>)}
    </ul>
  );
}

파일 업로드와 URL 생성
// 파일 업로드 (FormData 사용)
async function uploadAvatar(userId, file) {
  const formData = new FormData();
  formData.append('avatar', file);
  return await pb.collection('users').update(userId, formData);
}

// 파일 URL 생성 헬퍼
function getAvatarUrl(userRecord, queryParams = {}) {
  return pb.files.getURL(userRecord, userRecord.avatar, queryParams);
}

// 이미지 리사이징 예시
const thumbUrl = getAvatarUrl(user, { thumb: '100x100' }); // 100×100 정사각형 크롭
const wideUrl  = getAvatarUrl(user, { thumb: '300x0' });   // 너비 300px, 높이 비율 유지

// 결과 URL 형식:
// http://localhost:8090/api/files/users/RECORD_ID/FILENAME?thumb=100x100

VPS 배포 — 시스템 서비스 등록
# 1. 최신 바이너리 내려받기
#    릴리스 목록: github.com/pocketbase/pocketbase/releases
wget https://github.com/pocketbase/pocketbase/releases/download/v0.23.0/pocketbase_0.23.0_linux_amd64.zip
unzip pocketbase_0.23.0_linux_amd64.zip -d /opt/pocketbase
chmod +x /opt/pocketbase/pocketbase

# 2. 시스템 서비스 파일 생성
cat > /etc/systemd/system/pocketbase.service << 'EOF'
[Unit]
Description=Pocketbase
After=network.target

[Service]
Type=simple
User=www-data
WorkingDirectory=/opt/pocketbase
ExecStart=/opt/pocketbase/pocketbase serve \
  --http=0.0.0.0:80 \
  --https=your-domain.com
Restart=on-failure
Environment=HOME=/opt/pocketbase

[Install]
WantedBy=multi-user.target
EOF

# 3. 서비스 시작 및 자동 시작 설정
systemctl daemon-reload
systemctl enable pocketbase
systemctl start pocketbase
systemctl status pocketbase