こんにちは！オープンソースの最高峰デザイン・プロトタイピングツール「Penpot」の世界へようこそ。
デザイナーと開発者が同じ言語（SVGとCSS）でシームレスにコラボレーションできるPenpotは、モダンなプロダクト開発の現場において最強の武器になります。特に、SaaSに頼らず自社インフラに完全なデザイン環境を構築できる「セルフホスト（Docker版）」は、セキュリティやデータ主権の観点からも非常に魅力的な選択肢です。
しかし、いざ自前でコンテナを立ち上げようとすると、ネットワークの壁、データベースの気まぐれ、そしてメモリの枯渇といった「インフラの洗礼」を受けることが少なくありません。
今回は、初めてPenpotのセルフホストに挑むあなたに向けて、「よくあるトラブルの即効性のある解決策」と、「プロダクション品質に引き上げるパフォーマンス改善の極意」を、優しく、そして徹底的に深掘りして解説します。これをマスターすれば、あなたのチームのプロトタイピング環境は劇的に安定しますよ。
—
1. そもそもPenpotのセルフホストとは？（基本のアーキテクチャ）
Penpotのローカル/オンプレミス環境は、主に以下の3つのDockerコンテナで構成されています。
1. Penpot Frontend / Backend (App): ユーザーインターフェースとコアロジックを担う本体。
2. PostgreSQL: デザインデータやユーザー情報を保持する永続ストレージ。
3. Redis: リアルタイム共同編集の同期（WebSocket）やセッション管理を高速に行うためのインメモリDB。
これらをDocker Composeで一網打尽に立ち上げるのが基本アプローチです。まずは、最も基礎となる「確実な起動」から押さえましょう。
—
2. Docker起動の壁を突破する：よくあるエラーと処方箋
「さあ、`docker compose up -d` だ！」と意気込んで実行したものの、容赦なく赤字のエラーログが流れてくる……。セルフホストあるあるの初期トラブルを解決していきましょう。
トラブルA：ポートの競합（Port already in use）
> 症状: `Error starting userland proxy: listen tcp4 0.0.0.0:9001: bind: address already in use`
原因:
Penpotがデフォルトで割り当てようとしているポート（例: 9001）を、すでに別のプロセスや別のDockerコンテナが使用しています。
解決策:
`docker-compose.yml` を開き、ポートマッピングを競合しない番号に変更します。例えば、ホスト側のポートを `9002` に変更したい場合は次のように書き換えます。
services:
penpot-frontend:
# …
ports:
- “9002:8080” # 左側（ホスト側）のポートを変更する
—
トラブルB：データベース接続エラー（Database Connection Refused）
> 症状: バックエンドコンテナのログに `Connection refused` や `The database is not yet ready` が延々と流れる。
原因:
PostgreSQLコンテナが完全に初期化される前に、Backendコンテナが接続を試みているためにおこるタイミングのズレです。通常はDockerの `depends_on` で制御されますが、マシンのスペックやI/O性能によってはデータベースの起動が間に合いません。
解決策:
`docker-compose.yml` のバックエンドサービスに、ヘルスチェックと依存関係の条件（`condition: service_healthy`）を明示的に記述します。
services:
penpot-postgres:
image: postgres:15
# …
healthcheck:
test: [“CMD-SHELL”, “pg_isready -U penpot”]
interval: 5s
timeout: 5s
retries: 5
penpot-backend:
# …
depends_on:
penpot-postgres:
condition: service_healthy # DBが完全に準備完了するまでバックエンドを待たせる
これで、焦るバックエンドをしっかりとコントロールできます。
—
3. 動作が重い・カクつくときの「メモリ割り当てとリバースプロキシ」の極意
無事にコンテナが立ち上がり、ブラウザでPenpotを開けたとします。「やった！」と感動するのも束の間、カンバスをズームイン・アウトしたときに「モタつく」「動作が重い」と感じたら、それはリソース不足のサインです。
ここからが、エンジニアの腕の見せ所です。パフォーマンスを極限まで引き上げるチューニングを行いましょう。
極意①：PostgreSQLとJVM（Backend）のメモリ最適化
Penpotのバックエンド（Clojure製）は、ガベージコレクション（GC）の挙動やデータベースのキャッシュ効率に大きく影響されます。特にDocker Desktop（Mac/Windows）を使っている場合、デフォルトのままではメモリ割り当てが少なすぎて悲鳴を上げます。
Docker環境自体のメモリ割り当てを 最低でも4GB（できれば8GB推奨） に設定した上で、`docker-compose.yml` の環境変数を以下のように調整します。
services:
penpot-backend:
environment:
# JVMヒープメモリの最大値を適切に制限し、OOM Killerを防ぐ
- JAVA_OPTS=”-Xmx2g -Xms1g”
# コネクションプールの数を最適化（デフォルトより少し増やすことで並列処理をスムーズに）
- PENPOT_DATABASE_POOL_SIZE=20
極意②：Nginx / Reverse Proxyを通したWebSocketの最適化
本番環境、あるいはローカルでもリバースプロキシ（NginxやCaddy）を挟む場合、最も多いパフォーマンス低下の原因は 「WebSocketのアップグレード設定の不備」 です。
Penpotはリアルタイム共同編集にWebSocketを多用しています。ここがうまく保持されないと、ポーリングの嵐になり、動作が著しく重くなります。
Nginxを使用している場合は、必ず以下のリバースプロキシ設定を入れてください。
server {
listen 80;
server_name penpot.local;
location / {
proxy_pass http://localhost:9001;
proxy_http_version 1.1;
# ── 超重要：WebSocketのためのヘッダー書き換え ──
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# 巨大なSVGや画像アセットをアップロードする際のタイムアウト防止
proxy_read_timeout 600s;
proxy_send_timeout 600s;
client_max_body_size 100M; # アセット制限の緩和
}
}
この設定を入れるだけで、大容量のアセットをインポートした際のフリーズや、共同編集時のタイムラグが劇的に解消されます。
—
4. 精度高い「HelloWorld」的動作確認：環境が万全かのチェックリスト
無事にトラブルを乗り越え、パフォーマンスチューニングが終わったら、以下の「3ステップ・動作確認テスト」を行ってください。これがすべてクリアできれば、あなたのPenpotセルフホスト環境は完璧な状態です。
1. ユーザー登録とメール認証の疎通:
- 新規アカウントを作成し、メール送信機能（SMTP設定）が正しく機能しているか確認します。（開発初期はコンソールログ出力モードにしておくと楽です）
2. ベクター描画とSVGエクスポート:
- 適当なアートボードを作り、パスツールで自由な図形を描きます。それをSVG形式でエクスポートし、コードが美しく生成されているか確認してください。「デザイナーの操作がそのままコードになる」Penpotの真骨頂が体感できます。
3. リアルタイム・マルチセッションのテスト:
- ブラウザの通常タブと「シークレットウィンドウ」で別々のユーザーとしてログインし、同じプロジェクトにアクセスします。カーソルがリアルタイムで同期し、オブジェクトの移動が滑らかに反映されるかテストします。ここでカクつかなければ、WebSocketとRedisの連携はバッチリです。
—
おわりに：自分のインフラで動かす快感を楽しもう
セルフホスト環境の構築は、時にエラーとの孤独な戦いになりがちです。「なぜ動かないんだ……」とログを睨みつけたその経験こそが、インフラやDocker、ネットワークの深い理解へと繋がっていきます。
一度この環境を構築してしまえば、外部SaaSの制限やプライバシーの不安から解放され、社内ニッチな要件に合わせた最強のプロトタイピング基盤を手に入れることができます。
これをマスターすれば、明日からのチーム開発やデザイン検証のスピードが、文字通り「桁違い」に快適になりますよ。ぜひ、あなたの手で最高のPenpot環境を育て上げてください！