脱・クラウド依存：Penpotセルフホストで手に入れる「デザインの主権」と極限のDevOps最適化
Figmaの牙城に風穴を開ける、オープンソース界の希望「Penpot」。だが、真のプロフェッショナルがPenpotを選ぶ理由は、単なるコスト削減ではない。「データ主権」と「CI/CDパイプラインへの完全統合」だ。
セキュリティ基準が厳格なエンタープライズ環境において、外部SaaSに頼らず、自社インフラの深淵でデザインシステムを運用する。今回は、DockerでPenpotを立ち上げるだけでなく、その先にある「運用を自動化し尽くすアーキテクチャ」を構築する。
—
1. アーキテクチャの真髄：なぜ「セルフホスト」なのか
クラウドUIツールは便利だが、大規模組織では「アセットの外部流出リスク」「ネットワーク遅延」「API制限」がボトルネックとなる。Penpotをセルフホストするということは、デザインデータをGitリポジトリと同等の「ソースコード」として扱うための第一歩だ。
推奨環境とパフォーマンスハック
PenpotはバックエンドにClojure、フロントエンドにPureScriptを採用している。メモリ消費を抑え、安定稼働させるためには以下の鉄則を守れ。
- Redisの分離: デフォルトのコンテナ構成だけでなく、Redisを専用インスタンスとして切り出し、接続数とキャッシュ生存時間を最適化すること。
- PostgreSQLのチューニング: 大規模なデザインファイルはJSONB型で膨れ上がる。`shared_buffers`を物理メモリの25%に設定し、`work_mem`を適切にチューニングせよ。
—
2. 鋼鉄の環境構築：Production ReadyなDocker Compose
単に動かすだけならドキュメント通りでいい。だが、現場で耐えうる環境には「堅牢性」が必要だ。
docker-compose.yml
version: ‘3.8’
services:
penpot-backend:
image: penpotapp/penpot-backend:latest
restart: always
environment:
- PENPOT_FLAGS=disable-registration # 招待制のみにする（セキュリティ強化）
- PENPOT_DATABASE_URI=postgresql://penpot:password@db:5432/penpot
- PENPOT_REDIS_URI=redis://redis:6379/0
depends_on:
- db
- redis
db:
image: postgres:15-alpine
volumes:
- ./data/db:/var/lib/postgresql/data
# パフォーマンス向上のため、fsync設定の調整を検討すること
command: [“postgres”, “-c”, “max_connections=200”]
redis:
image: redis:7-alpine
# 永続化を有効に（デザインデータの整合性確保）
command: [“redis-server”, “–appendonly”, “yes”]
—
3. DevOpsのための「完全自動化」スクリプト
UIエンジニアがデザインを修正するたびに管理画面を叩くのは愚行だ。PenpotのAPIを叩き、デザインデータのバックアップやステータス更新をCLIで完結させるためのシェルスクリプトの断片を公開する。
!/bin/bash
penpot-sync.sh: デザインデータのメタデータ抽出とCI連携用
API_URL=”http://your-penpot-host/api”
TOKEN=”your-secret-token”
特定プロジェクトの最新エクスポートを取得する例
fetch_design_data() {
local project_id=$1
curl -H “Authorization: Bearer $TOKEN” \
“$API_URL/files/$project_id/export” > ./design-assets/latest.svg
echo “Design asset synchronized.”
}
応用：このスクリプトをGitHub Actionsのworkflowに組み込み、
デザイン変更を検知して自動的にスタイルガイドを生成するパイプラインを構築せよ。
—
4. 伝説的アーキテクトからのアドバイス
デザインシステムの「コード化」を死守せよ
PenpotをUIツールとして終わらせるな。セルフホストしたPenpotは、「デザイントークン」のソース・オブ・トゥルース（信頼できる唯一の情報源）にならなければならない。
1. API経由のトークン抽出: PenpotのAPIからJSON/CSS変数を抽出し、Design Tokensフォーマット（W3C準拠）に変換するコンバーターを自作せよ。
2. 型安全性の確保: TypeScriptの型定義ファイルをPenpotから自動生成するフローを構築すれば、デザインの変更が即座にフロントエンドの型エラーとして検知される。これこそが「最強のUI開発環境」だ。
メモリ消費の管理（JVM/BEAMの知見を転用）
Penpotのバックエンドはリソースを食う。もし動作が重いと感じたら、コンテナのヘルスチェックエンドポイントを監視し、一定のメモリ閾値を超えたらGracefulな再起動をかけるSidecarコンテナを配置せよ。これが、24時間365日止まらないデザインインフラの作り方だ。
—
結論：ツールに支配されるな、支配せよ
Penpotをセルフホストするということは、Figmaという「閉じた庭」から脱出し、自分たちの開発エコシステムを再定義することだ。
Docker Composeによる構築はあくまで入り口に過ぎない。この環境の上に、GitOpsの思想を持ち込み、デザインの修正とコードのリリースをシームレスに結合させろ。それこそが、世界最高峰のプロダクトを支える真のエンジニアリングだ。
今すぐ`docker-compose up -d`を叩け。そして、自分たちの手で「最強のデザインインフラ」を支配せよ。