なぜデザインワークフローをセルフホスト環境に移行したのか
長年、Figmaは業界標準でした。しかし、最近の「Dev Mode」のような機能の有料化や、クラウド限定モデルへの移行は、多くの開発者に不安を与えています。データの主権を重視するなら、Penpotこそが求めていたソリューションです。これはSVGをネイティブ形式として扱う強力なデザイン・プロトタイピングプラットフォームです。つまり、デザインが独自のフォーマットに閉じ込められることはなく、デフォルトでWebに対応していることを意味します。
独自のデザインインフラをホストすることで、モックアップやアセットがローカルハードウェアから外に出ることはありません。私の経験上、このセットアップはDockerのスキルを磨きたい人にとって最高の週末プロジェクトになります。月額料金やクラウドの障害リスクを気にせず、プロフェッショナル級のツールを手に入れることができます。
Penpotを起動する
DockerとDocker Composeの準備ができていれば、5分以内にPenpotのインスタンスを起動できます。まずは、設定ファイルを整理するための専用ディレクトリを作成しましょう。
mkdir ~/penpot && cd ~/penpot
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
curl -o config.env https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.envコンテナを起動する前に、2つのユニークなシークレットキーを生成する必要があります。openssl rand -hex 32を2回実行して、これらの文字列を作成してください。config.envファイルを開き、PENPOT_SECRET_KEYとPENPOT_PUBLIC_SECRET_KEYを見つけて、新しい値を貼り付けます。
環境変数を設定したら、スタックを起動します：
docker-compose up -dシステムがPostgreSQLデータベースを初期化し、マイグレーションを実行するのに約60秒かかります。完了後、http://your-server-ip:9001でダッシュボードにアクセスできます。これほど複雑なツールにしては、驚くほどスムーズな導入プロセスです。
アーキテクチャ：内部の仕組み
Penpotは単一の巨大なコンテナではありません。連携して動作するマイクロサービスの集合体です。4GB RAMのRaspberry Piや小規模なVPSのような限られたハードウェアで運用する場合、これらのコンポーネントを理解することが重要です。
5つの主要サービス
- Frontend: ブラウザにUIを提供するNginxサーバー。
- Backend: Clojureで構築され、コアロジッジとAPIリクエストを処理します。
- Exporter: デザインをPDFやSVGに変換するNodeJSサービス。内部でChromiumインスタンスを使用しており、スタックの中で最もリソースを消費する部分です。
- PostgreSQL: デザインのメタデータやユーザープロファイルを保存する信頼性の高いデータベース。
- Redis: セッションを管理し、インターフェースのレスポンスを高速に保ちます。
重いエクスポート処理中にシステムが遅延する場合、Exporterサービスが原因である可能性が高いです。RAMが2GBしかないマシンでは、大きなファイルのレンダリング中にシステムがクラッシュするのを防ぐため、docker-compose.yamlでメモリ制限を設定することをお勧めします。
本番環境に向けたセットアップの強化
基本的なインストールはローカルテストには適していますが、実際のクライアントワークやチーム開発で使用する場合は、いくつか追加の手順が必要です。
ユーザー管理のためのSMTP有効化
メールサーバーがないと、新規ユーザーの認証やパスワードのリセットを簡単に行うことができません。Postmarkのようなサービスや、独自のメールサーバーを使用できます。config.envのSMTPセクションを編集してください：
[email protected]
PENPOT_SMTP_HOST=smtp.yourserver.com
PENPOT_SMTP_PORT=587
PENPOT_SMTP_USERNAME=your-username
PENPOT_SMTP_PASSWORD=your-password
PENPOT_SMTP_TLS=trueセキュリティとリバースプロキシ
Penpotのインスタンスをポート9001で直接インターネットに公開しないでください。SSL証明書を処理するために、Nginx Proxy ManagerやTraefikなどのリバースプロキシを使用します。プロキシを設定する際は、「Websockets Support」が有効になっていることを確認してください。これが無効だと、リアルタイムの共同編集機能が動作せず、再接続エラーが頻発します。
公開新規登録の停止
メインのアカウントを作成したら、入り口をロックしましょう。不特定多数のボットがサーバーにアカウントを作成するのを防ぐためです。config.envを以下のフラグで更新します：
PENPOT_FLAGS="disable-registration"メンテナンスと長期的な運用
セルフホストには、ある程度の規律が必要です。Penpotを数ヶ月間完璧に動作させ続けるために、2つの習慣が役立つことがわかりました。
毎日のバックアップ
デザインファイルはデータベースとアセットボリュームに保存されます。データベースが破損すると、すべてを失うことになります。毎晩データベースをダンプする簡単なcronジョブを設定しましょう。以下のコマンドを参考にしてください：
docker exec -t penpot-postgres-container pg_dumpall -c -U penpot > penpot_backup_$(date +%F).sqlスムーズなアップデート
Penpotチームは頻繁にアップデートをリリースしています。アップデートするには、最新のイメージをプルしてコンテナを再起動します。必ず事前にGitHubのリリースノートを読んでください。時折、システムを正しく起動するためにconfig.envに追加する必要がある新しい環境変数が導入されることがあります。
セルフホストには、ある程度の規律が必要です。Penpotへの切り替えは、私のデザイン手法を完全に変えました。値上げの不安から解放され、クリエイティブな資産を完全にコントロールできるようになりました。すでにHomeLabを構築しているなら、Penpotを追加することは、デザインと開発のワークフローを一つにまとめる最良の方法です。
