Penpotを極める：マルチテナント型セルフホストの極意とDevOpsアーキテクチャ
デザインとコードの境界が消滅しつつある今、デザイナーと開発者が同一の言語で語れる「Penpot」をセルフホストする意義は計り知れない。しかし、多くの現場が陥る罠は、単一のインスタンスに全てのクライアントや部署を詰め込み、セキュリティとパフォーマンスの境界を曖昧にすることだ。
本稿では、Penpotを単なるツールとしてではなく、「高度に隔離されたスケーラブルなデザイン基盤」として構築するための、DevOps的アプローチを伝授する。
—
1. なぜマルチテナント構成が必要か？
受託開発や複数部署を抱える組織において、単一環境は以下のリスクを孕む。
- データガバナンスと越境リスク: クライアントAのプロジェクト情報が、クライアントBの目に触れる可能性を物理的に排除せねばならない。
- リソースの「ノイジーネイバー」問題: ある部署が巨大なプロトタイプをレンダリングしている最中、他の部署の操作が重くなる。これを防ぐにはコンテナ単位でのリソース制限が不可欠だ。
- アップグレードの独立性: 特定チームが最新のPenpotのベータ機能に依存したい場合、全社共通環境では追従できない。
これらを解決するため、「Docker Composeによるインスタンス隔離」＋「Nginx Proxy Manager(NPM)によるエッジルーティング」の構成を採用する。
—
2. 実装：Nginx Proxy Manager を起点としたマルチテナント設計
NPMを単なるプロキシとしてではなく、SSL終端とWAF（Web Application Firewall）のゲートウェイとして機能させる。
Docker Composeによるインスタンス生成テンプレート
各テナントごとにディレクトリを分け、以下の構成をCI/CDで自動生成させるのが定石だ。
docker-compose.yml (テナント用テンプレート)
version: ‘3.8’
services:
penpot-backend:
image: penpotapp/penpot:latest
restart: always
environment:
- PENPOT_FLAGS=disable-registration # 招待制でセキュリティ向上
- PENPOT_DATABASE_URI=postgresql://db:5432/penpot
deploy:
resources:
limits:
memory: 2G # 1インスタンスあたりのメモリを厳格に制限
networks:
- penpot-network
# その他redis, postgres等を定義…
Nginx Proxy Managerの設定ハック
NPMのGUIで一つずつ設定しては、真のDevOpsエンジニアとは呼べない。NPMのAPIを叩き、テナント追加時に自動でルートを生成するスクリプトを走らせるべきだ。
!/bin/bash
簡易テナントプロビジョニングAPIコール (Node.js等でラップを推奨)
curl -X POST “${NPM_API_URL}/api/nginx/proxy-hosts” \
-H “Authorization: Bearer ${JWT_TOKEN}” \
-H “Content-Type: application/json” \
-d ‘{
“domain_names”: [“tenant-a.design.example.com”],
“forward_host”: “penpot-tenant-a-backend”,
“forward_port”: 6060,
“ssl_forced”: true,
“certificate_id”: “new”
}’
—
3. パフォーマンス最適化と安定稼働のハック
Penpotの心臓部は、SVG操作とリアルタイム通信（WebSocket）にある。ここを最適化しないと、どれだけサーバーを積んでも体感速度は改善しない。
Redisのメモリ最適化
Penpotは頻繁にRedisへ状態を書き込む。複数テナントを運用する場合、Redisの最大メモリ制限（maxmemory-policy）を`allkeys-lru`に設定し、溢れた瞬間に古いキャッシュがパージされるように設計すること。
redis.conf
maxmemory 512mb
maxmemory-policy allkeys-lru
バックアップの自動化戦略
データベースが肥大化すると、mysqldump/pg_dumpではダウンタイムが発生する。
Dockerボリュームのスナップショットを活用し、ZFSやLVMの機能で「整合性を保ったままのファイルシステム・スナップショット」を毎時間自動実行するスクリプトをCronに仕込む。
—
4. 伝説的エンジニアからの提言：プロトタイピングの真髄
ツールをセルフホストする目的は、「管理」ではなく「デザイン体験の最大化」にある。
1. コンポーネントライブラリのグローバル展開: 各テナントからアクセス可能な「デザインシステム用共有バケット（S3互換）」をマウントし、共通のデザインアセットをDRYに管理する。
2. API経由のCI/CD連携: PenpotのAPIを叩き、デザインの更新が完了したら、Webhookで開発環境のモックデータを更新するパイプラインを構築せよ。
3. WASMレンダリングの理解: ブラウザ側で重い処理を行うPenpotの特性上、クライアントPCのCPU/GPUリソースを食う。サーバーサイドだけでなく、ブラウザのハードウェアアクセラレーション設定を組織内の端末で一律制御（GPOやMDM）するまでが、真のUXエンジニアの仕事だ。
—
最後に
セルフホストしたPenpotは、あなたの組織の「脳」となる。
複数テナントを隔離し、かつAPIで有機的に結合させる。このアーキテクチャは単なるサーバー構築を超えた、「開発文化のインフラ化」そのものだ。
さあ、GUIのクリック作業から卒業し、コードでデザイン基盤を支配せよ。君が構築したそのプラットフォームが、次の偉大なプロダクトの産声を聞くことになるのだから。