開発ツール

Penpot をセルフホストするなら：オープンソース設計ツールの Docker、共同作業、開発ハンドオフ

penpot/penpot の位置づけ、向いている場面、セルフホストの入口、デザインシステム、Inspect Mode、チームで使うときのデプロイ境界を整理する。

Penpotは、製品設計とコードコラボレーションのために設計されたオープンソースプラットフォームです。セルフホストは単一のコンテナ描画ツールではありません。公式のComposeはフロントエンド、バックエンド、エクスポートツール、MCP、Postgres、Valkeyなどのサービスを同時に実行し、データベースとアップロードされた資料を永続ボリュームに保存します。したがって、展開後はコンテナの健康状態、HTTPアクセス、登録ポリシー、永続ボリューム、回復プロセスを同時に検証する必要があります。

プロジェクトアドレス:

https://github.com/penpot/penpot

公式ウェブサイト:

https://penpot.app

簡単な結論

  • 個人トライアルはPenpot SaaSに直接アクセス可能です。データ制御、イントラネット展開、コンプライアンス境界のためにセルフホスティングが必要です。
  • 公式のDockerメソッドはCompose V2を必要とし、デフォルトの監視が必要ですhttp://localhost:9001。
  • ダウンロードされたサンプルComposeはローカルトライアル用であり、パブリックネットワーク展開前に交換する必要がありますPENPOT_SECRET_KEY、パブリックURI、メール、セキュリティクッキーの設定。
  • バックアップは単独で保存できませんdocker-compose.yamlまた、Postgresも以下でカバーしています。penpot_assetsエンデュランス判定。

公式 Compose をダウンロードして検証する 

1
2
3
4
5
6
7

docker --version
docker compose version
mkdir penpot-selfhost
cd penpot-selfhost
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
docker compose -p penpot -f docker-compose.yaml config --services
docker compose -p penpot -f docker-compose.yaml config --volumes

config出口はゼロでなければなりません。サービスリストにはフロントエンド、バックエンド、データベース、その他のコンポーネントが含まれるべきです。ボリュームリストには少なくともPostgresのデータとマテリアルボリュームが表示されているべきです。YAML解析が失敗した場合は、進行しないでくださいup -d。

修復を容易にするために、修正前の元のファイルを保持してください:

1

cp docker-compose.yaml docker-compose.yaml.original

起動前のデフォルトセキュリティ設定の変更

公式な例には明確に「パブリックネットワークの展開は維持すべきではない」と記されていますdisable-secure-session-cookiesそしてdisable-email-verification。以下のプレースホルダー構成も本当の値に変更する必要があります:

  1. PENPOT_PUBLIC_URI: 最終HTTPSドメインに変更。
  2. PENPOT_SECRET_KEY:遠慮しないでchange-this-insecure-key。
  3. PENPOT_FLAGS: 登録を許可するかどうか、メールの確認、MCPの有効化を決定してください。
  4. SMTP:正式な環境では、Mailcatchを本物のメールサービスとして扱わないでください。

Pythonを使ってランダムな秘密を生成する:

1

python3 -c "import secrets; print(secrets.token_urlsafe(64))"

もう一度走れdocker compose ... config、置き換え後も変数を解析可能であることを確認しましょう。Secretを含むComposeファイルを公開リポジトリに提出しないでください。

各サービスを起動して検証する 

1
2
3
4

docker compose -p penpot -f docker-compose.yaml up -d
docker compose -p penpot -f docker-compose.yaml ps
docker compose -p penpot -f docker-compose.yaml logs --tail 100 penpot-backend
curl -I http://localhost:9001

承認はフロントエンドの返品200だけで判断することはできません。docker compose psサービスが繰り返し再起動または終了する必要はなく、バックエンドログにデータベース接続、移行、秘密エラーが繰り返し表示されるべきではありません。

ページが開けない場合は、順番に確認してください:

1
2
3
4

docker compose -p penpot -f docker-compose.yaml ps -a
docker compose -p penpot -f docker-compose.yaml logs --tail 200 penpot-frontend
docker compose -p penpot -f docker-compose.yaml logs --tail 200 penpot-backend
docker compose -p penpot -f docker-compose.yaml logs --tail 100 penpot-postgres

フロントエンドは正常でもログインやセーブが失敗する場合は、ブラウザを再起動するのではなく、バックエンドやPostgresのチェックを続けるのが良いでしょう。

最初の管理アカウントを作成

公開ネットワークインスタンスは、長期間匿名登録を有効に保つことは推奨されません。登録を終了した後、バックエンド管理コマンドを使ってアカウントを作成できます。まず、実際のコンテナ名を見つけてください:

1
2

docker compose -p penpot -f docker-compose.yaml ps
docker exec -ti penpot-penpot-backend-1 python3 manage.py create-profile

異なるComposeのバージョンでは、ハイフンやアンダースコアを使ってコンテナ名を作成することがあります。2つ目のコマンドを盲目的にコピーすることは許可されていません。コンテナが見つからない場合は、docker compose ps出力が標準です。管理コマンドもバックエンドのアクティベーションに依存していますprepl-server。

HTTPS リバースプロキシを検証する

Penpotの公開URI、ブラウザが実際にアクセスするドメイン名、およびリバースプロキシTLSドメインは一貫していなければなりません。プロキシを展開した後、外部ネットワークから以下の点を確認してください:

1

curl -I https://design.example.com

リダイレクトループが発生した場合は、まず確認してくださいPENPOT_PUBLIC_URIプロキシで渡されるプロトコルヘッダー;ログイン直後に切断する場合は、セキュアクッキーとHTTPSのチェックに集中してください。一時的な使用だけのために不安全なクッキーを再開しないでください。

最小限のプロジェクトでデザインの納品を検証する

基本的な展開を完了した後、新しいテストチームと少なくとも以下の検証のためのドキュメントを作成してください。

  1. 2つのアカウントが同じチームに参加し、リアルタイムで変更を確認できます。
  2. コンポーネント、バリアント、そして少なくとも1つのデザイントークンを作成する。
  3. 開発アカウントはインスペクトモードでSVG、CSS、レイアウト情報を読み取ることができます。
  4. 1つをエクスポートする.penpotファイルをテストスペースにインポートします。
  5. 画像をアップロードした後、ページをリフレッシュしますが、資料はアクセス可能なままです。

これらの作業は同時にコラボレーション、データベース、資料量をカバーしています。単に空白ファイルを作成するだけでは、セルフホスト型データリンクの存在を証明するには不十分です。

データベースとアセットボリュームをバックアップする

公式のデフォルトでは、Composeは2つのキーボリュームを使用します:Postgresのデータボリュームとpenpot_assets。まず、実際の試験名を読みましょう:

1
2

docker compose -p penpot -f docker-compose.yaml config --volumes
docker volume ls --filter label=com.docker.compose.project=penpot

バックアップ前に書き込みと録音を一時停止すること:

1
2

docker compose -p penpot -f docker-compose.yaml images
docker compose -p penpot -f docker-compose.yaml stop

その後、公式のDockerボリュームバックアップ手順に従い、データベースボリュームとマテリアルボリュームを別々にアーカイブしてください。バックアップファイルはコンテナではなくホストまたはリモートサーバーに保存する必要があります。完了後、再起動して再度確認してください:

1
2
3

docker compose -p penpot -f docker-compose.yaml start
docker compose -p penpot -f docker-compose.yaml ps
curl -I http://localhost:9001

分離された環境で実際に復元されたアーカイブのみが利用可能なバックアップとみなされます。復元承認は、元のテストファイルを開いてコンポーネントを確認し、アップロードされたイメージがまだ存在していることを確認すべきです。

更新前にロールバックポイントを準備する

実行前にComposeを直接上書きしないでくださいpull。まず、現在の構成、イメージ情報、ボリュームバックアップを保持してください:

1
2
3
4
5

cp docker-compose.yaml docker-compose.yaml.before-upgrade
docker compose -p penpot -f docker-compose.yaml images
docker compose -p penpot -f docker-compose.yaml pull
docker compose -p penpot -f docker-compose.yaml up -d
docker compose -p penpot -f docker-compose.yaml logs --tail 200 penpot-backend

メジャーバージョンの移行は起動後も継続される場合があります。この時点で、ページが一時的に利用できないからといって繰り返し再起動すべきではありません。まず、移行ログを確認してください。新しいバージョンが引き続き失敗する場合はサービスを停止し、古いComposeおよびそれに対応するイメージのバージョンを復元し、その後アップグレード前のボリュームバックアップを復元すべきです。データベースが移行された後、単に古いイメージに戻すだけでは安全でない場合があります。

設計から開発までの継続的な運用を作る

チームは以下のようにプロセスを実施できます。

  1. 設計者は、フロントエンドのコンポーネントライブラリにできるだけ近いコンポーネント名を持つデザインシステムを作成します。
  2. 色、フォントサイズ、間隔には散在した手作業の値ではなく、デザイントークンを使うこと。
  3. Inspectモードを通じてSVG、CSS、レイアウト情報を作成する。
  4. プラグイン、API、MCPを検証するためにテストファイルを使用し、正式なデザイン資産を直接操作しないようにしましょう。
  5. メジャーバージョンアップグレード前に、キーファイルをエクスポートし、サーバー側の永続ボリュームをバックアップします。

故障診断表

現象 キー・エグゼンション 運動の回復
localhost:9001応答なし フロントエンドポート、コンテナ状態、ホストファイアウォール 元のComposeを復元した後、コンテナを再作成
ページは開けるがログインはできません バックエンドログ、シークレット、クッキー、公開URI 一貫したドメイン名およびセキュリティクッキー設定の復元
招待メールが届かなかった SMTPおよびメール認証フラグ SMTPを修正し、長期的なバイパスのために認証を無効化しないでください
ファイルは開けますが、画像が抜けています penpot_assetsボリュームストレージまたはオブジェクトストレージ データベースと同じ時点で資料のバックアップを復元する
バックエンドがアップグレード後に繰り返し再起動する データベースの移行とイメージバージョン 書き込みを停止し、アップグレード前に完全なバックアップとリカバリーセットを使う

Penpotのセルフホスト完了基準は、HTTPSドメインの可用性、明確な登録境界、2人のテストユーザーの共同作業、Inspect Modeのスタイル提供、成功したインポートとエクスポート、そしてデータベースと資料の両方がリカバリードリルを完了したことです。これらのどれかが欠けている場合は、チーム唯一の正式なデザインファイルに直接移行しないでください。