こんにちは！プロダクトデザイナー、そしてエンジニアの皆さん。
日々、Figmaや各種デザインツールを行ったり来たりしながら、「デザインとコードの壁」をどうやってシームレスに繋ぐかに頭を悩ませていませんか？
今回は、オープンソース（OSS）のデザイン・プロトタイピングツールとして今、世界中のエンジニアとデザイナーの間で爆発的な支持を集めている「Penpot（ペンポット）」を取り上げます。
特に、「社内の複数部署ごとに環境を分けたい」「受託開発でクライアントごとに完全に独立したデザインサーバーを用意したい」という現場の要望に応える、Docker ComposeとNginx Proxy Managerを使ったマルチテナント型セルフホスト構築の極意を伝授します。
これをマスターすれば、セキュリティを担保しながら、複数チームのワークスペースを美しく管理できるようになりますよ。毎日のインフラ管理やツール選定のストレスが劇的に軽くなります。一緒に見ていきましょう！
—
1. なぜ「マルチテナント型Penpot」が現場の救世主になるのか？
受託開発や大規模組織において、すべてのクライアントや部署を単一のPenpotインスタンスに相乗りさせるのは、セキュリティ（情報漏洩リスク）の観点からも、権限管理の観点からも悪手です。
かといって、組織の数だけフルスクラッチでサーバーを立てるのも、インフラコストと運用の手間の無駄遣いです。
そこで重要になるのが、「1つの物理/仮想サーバー上で、Dockerを使って論理的かつ安全に環境を分離する（マルチテナント構成）」というアプローチです。
Penpotが持つ圧倒的なアドバンテージ
そもそもなぜFigmaではなくPenpotなのか？ それは、「SVGをネイティブフォーマットとして採用し、CSSのFlexboxやGridの概念をそのままレイアウトエンジンに組み込んでいるから」です。つまり、デザイナーが作った瞬間から「本物のフロントエンドの構造」になっている。これをセルフホスト（自社サーバーで完全コントロール）できるメリットは、プロダクト開発において計り知れません。
—
2. 全体アーキテクチャの設計図
今回は、以下のような構成をDocker Composeで組み上げます。
- リバースプロキシ: Nginx Proxy Manager (GUIでSSL証明書とドメインルーティングを管理)
- テナントA用 Penpot: `tenant-a.yourdomain.com`
- テナントB用 Penpot: `tenant-b.yourdomain.com`
- データベース: 各テナント独立したPostgreSQLコンテナ
「Dockerはなんとなく触ったことあるけど、複数立ち上げるとごちゃごちゃしそう…」という初心者の方も大丈夫。ディレクトリ構造とComposeファイルを綺麗に整理すれば、驚くほど見通しが良くなります。
—
3. 実践！Docker Composeで複数環境を構築する
まずは、サーバー上にプロジェクト用のディレクトリを作成します。今回は `/opt/penpot-multitenant` を基準に進めましょう。
ディレクトリ構造の設計
/opt/penpot-multitenant/
├── tenant-a/
│ ├── docker-compose.yml
│ └── .env
└── tenant-b/
├── docker-compose.yml
└── .env
このように、テナントごとに独立したディレクトリを切ることで、片方の環境をアップデートしたり停止させたりしても、もう片方に影響を与えない「堅牢な分離」が実現できます。
テナントA用の `docker-compose.yml`
それでは、テナントA（例: クライアントA用）の定義ファイルを見てみましょう。初心者の方でも迷わないよう、すべての行に魂を込めてコメントを入れています。
version: ‘3.8’
networks:
# Nginx Proxy Managerと通信するための外部ネットワーク
npm-network:
external: true
services:
penpot-frontend:
image: penpotapp/frontend:latest
restart: always
ports:
- “8081:8080” # ホスト側のポートが被らないように 8081 を割り当て
depends_on:
- penpot-backend
networks:
- default
- npm-network
penpot-backend:
image: penpotapp/backend:latest
restart: always
environment:
- PENPOT_FLAGS=disable-email-verification
- PENPOT_DATABASE_URI=postgresql://penpot:secretpassword@penpot-postgres/penpot
- PENPOT_SECRET=a_very_long_and_random_secret_string_for_tenant_a
depends_on:
- penpot-postgres
networks:
- default
penpot-exporter:
image: penpotapp/exporter:latest
restart: always
environment:
- PENPOT_PUBLIC_URI=http://penpot-backend:6060
networks:
- default
penpot-postgres:
image: postgres:15-alpine
restart: always
environment:
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=secretpassword
volumes:
# データの永続化（これが消えるとデザインが消えるので超重要）
- postgres_data:/var/lib/postgresql/data
networks:
- default
volumes:
postgres_data:
> 💡 先輩からのワンポイントアドバイス
> 複数テナントを動かす際の一番の罠は「ポートの競合」と「データベースの混同」です。
> 上記のように、フロントエンドがホストに公開するポート（例: `8081:8080`）をテナントごとに必ず変えてください（テナントBなら `8082:8080` など）。また、`PENPOT_SECRET` やデータベースのパスワードは、テナントごとに完全にユニークな文字列に生成し直しましょう。
—
4. Nginx Proxy ManagerとLet’s EncryptでSSLを自動化する
コンテナが立ち上がったら（各ディレクトリで `docker-compose up -d` を実行）、次はリバースプロキシの出番です。
ここでは、GUIで直感的にSSL証明書の発行とリバースプロキシ設定ができる Nginx Proxy Manager（NPM） を使います。まだ導入していない場合は、サクッとDockerで立ち上げておいてください。
NPMでの設定手順（GUI画面）
1. Nginx Proxy Managerの管理画面にログインし、[Proxy Hosts] ＞ [Add Proxy Host] をクリック。
2. Detailsタブ:
- Domain Names: `tenant-a.yourdomain.com`
- Scheme: `http`
- Forward Hostname / IP: `penpot-frontend` （Docker内蔵DNSの名前解決を利用するため、コンテナ名が使えます）
- Forward Port: `8080` （コンテナ内部のポートを指定）
- Block Common Exploits: チェックを入れる
- Websockets Support: 必ずチェックを入れる（Penpotはリアルタイム共同編集にWebSocketを使用するため、ここを忘れると動きません！）
3. SSLタブ:
- SSL Certificate: 「Request a new SSL Certificate」を選択
- Email Address: あなたのメールアドレス
- Terms of Service: 同意にチェック
- Save を押す数秒後、自動的にLet’s Encryptの証明書が発行され、HTTPS化が完了します。
これで、`https://tenant-a.yourdomain.com` にアクセスすれば、安全に暗号化されたあなた専用のPenpot環境が迎えてくれます！
—
5. サーバー安定稼働のためのリソース制限とコツ
複数テナントを1台のサーバーで動かす場合、特定のテナントで重いデザインデータや大量の画像が読み込まれた際、サーバー全体のメモリが枯渇して他のテナントまで巻き込んでダウンするリスクがあります。
プロとして、ここを未然に防ぐ「リソース制限」の知見も共有しておきます。
先ほどの `docker-compose.yml` の各サービス（特に `penpot-backend` や `penpot-frontend`）に、以下のような `deploy` ブロックを追加しましょう。
deploy:
resources:
limits:
cpus: ‘1.0’
memory: 1G
reservations:
cpus: ‘0.2’
memory: 256M
このようにコンテナごとに上限（Limits）と予約（Reservations）を設定することで、リソースの暴走を防ぎ、複数テナントが同居するサーバーの安定性が劇的に向上します。
—
おわりに：さあ、デザインとコードの境界線を溶かそう
お疲れ様でした！これで、Docker ComposeとNginx Proxy Managerを駆使した、安全で拡張性の高いPenpotマルチテナント環境の設計図があなたの手に入りました。
これをマスターすれば、クライアントや部署ごとの要望に素早く、セキュアに応えることができるようになり、インフラエンジニアとしてもデザイナーとしても、周囲からの信頼がグッと高まるはずです。
Penpotの持つオープンでパワフルな世界観を、ぜひあなたの現場でも存分に活かしてください。
それでは、快適なプロトタイピングライフを！