【入門編】Penpotのマルチプレイヤー編集におけるWebSocket通信の仕組みと、社内プロキシ環境で発生する接続エラーの完全解決策 – UI/UX・デザインツール活用バイブル

こんにちは！プロダクトデザイナーやUIエンジニアの皆さん、日々のプロトタイピング作業、楽しんでいますか？

デザインツールといえばFigmaがデファクトスタンダードになっていますが、最近、オープンソース（OSS）であり、セルフホスト（オンプレミス）も完全に自由な「Penpot」に大きな注目が集まっています。デザイナーと開発者が同じコンポーネント指向の概念（SVGベース、CSS Flexbox/Gridのネイティブ実装）で対話できる、まさに神ツールです。

今回は、そんなPenpotをチームで導入する際、多くのエンジニアが最初に直面する「リアルタイム共同編集の裏側（WebSocket通信）」と「社内プロキシ環境での接続エラーの完全解決策」について、現場の知見をたっぷり詰め込んで解説します。

これをマスターすれば、社内インフラの制約に頭を悩ませる時間がゼロになり、チーム全員でシームレスなデザインプロトタイピング環境を手に入れられますよ。

—

1. なぜPenpotなのか？ そして「マルチプレイヤー編集」の裏側の仕組み

Penpotの最大の魅力は、Figmaライクな操作性を持ちながら、データ構造が完全にオープン（SVGとCSSに直結）である点です。そして、複数人で同時にキャンバスを編集する「マルチプレイヤー編集」は、プロダクトの共創スピードを圧倒的に加速させます。

このリアルタイム協調編集を実現しているのが、WebSocket と SSE（Server-Sent Events） です。

通信のアーキテクチャ

  • WebSocket: 双方向の常時接続を行い、カーソルの移動位置、オブジェクトのドラッグ、プロパティの変更といった「高頻度かつリアルタイム性が求められるデータ」を超低遅延で同期します。
  • HTTP / SSE: 初期化時の認証や、比較的低頻度なイベントのストリーミングに利用されます。

開発者視点で重要なのは、「常にサーバーとブラウザがTCPコネクションを張りっぱなしにしている」という点です。これが、通常のWeb閲覧とは異なる挙動を生み、社内ネットワーク（プロキシやファイアウォール）の罠にハマる原因になります。

—

2. 社内プロキシ環境で起きる「絶望の切断エラー」の正体

セルフホストしたPenpotを社内メンバーに使ってもらおうとURLを配った瞬間、よくこんな現象が起きます。

> 「あれ？ カーソルが動かない」
> 「オブジェクトを動かしても、数秒後に元の位置に戻っちゃう（同期ズレ）」
> 「ブラウザのコンソールを見たら、`WebSocket connection to ‘wss://…’ failed` って出てる……」

原因はどこにあるのか？

大企業の社内ネットワークや厳格なセキュリティポリシーを持つ環境では、以下のようなトラップが待ち受けています。

1. リバースプロキシ（NginxやApache）のタイムアウト:
WebSocketは長時間の接続を維持するため、プロキシ側が「アイドル状態（通信がない状態）が続いた」と勘違いして、勝手にコネクションを切断（Timeout）してしまいます。
2. プロキシサーバーのWebSocket非対応・未設定:
HTTP/1.1のアップグレードヘッダー（`Upgrade: websocket`）を途中のプロキシが解釈できず、弾いてしまうケースです。
3. SSL/TLSのインスペクション:
社内保安用のSSL復号プロキシが、WebSocketのハンドシェイクを不正な通信と誤認するケースもあります。

これをクリアしないと、せっのPenpotのリアルタイム性が台無しになってしまいます。次の章で、具体的な解決策を一挙に見ていきましょう。

—

3. 完全解決！ Nginxリバースプロキシ設定の決定版

PenpotをDockerなどで立ち上げ、その前段にNginxを置いているケースを想定して、WebSocket通信を絶対に切断させないための設定ファイル（nginx.conf）を公開します。

以下の設定を、Nginxのバーチャルホスト設定にそのまま組み込んでください。

server {
listen 443 ssl;
server_name penpot.your-company.internal;

ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;

# 1. タイムアウトを長めに設定（アイドル切断を防ぐ）
proxy_connect_timeout 7d;
proxy_send_timeout 7d;
proxy_read_timeout 7d;

location / {
proxy_pass http://penpot-frontend-server:8080;

# 標準的なプロキシヘッダー
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;

# ==========================================
# 2. ここが最重要！ WebSocketアップグレードの明示
# ==========================================
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
}

# 3. バックエンドのAPIやWebSocket専用のエンドポイントがある場合
location /api/ws {
proxy_pass http://penpot-backend-server:6060;

proxy_http_version 1.1;
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;

# WebSocketのKeep-Aliveを維持するためのタイムアウト延長
proxy_read_timeout 86400s;
proxy_send_timeout 86400s;
}
}

設定のポイント解説

  • `proxy_http_version 1.1;`: WebSocketはHTTP/1.1以降でしか利用できません。これを書き忘れると即死します。
  • `Upgrade` と `Connection` ヘッダー: クライアントからの「WebSocket通信に切り替えたい」というリクエストを、バックエンド（Penpotのサーバー）へ確実に転送するための呪文です。
  • タイムアウトの延長 (`7d` または `86400s`): デフォルトのままだと数分〜数十分でコネクションが強制切断されるため、長時間のセッションでも耐えられるように明示的に長く設定しています。

—

4. 導入の極意：接続テストとトラブルシューティングの作法

設定を変えたら、必ず以下の手順で「正しくWebSocketが通っているか」を確認しましょう。これがエンジニアとしての腕の見せどころです。

1. ブラウザのDevToolsで確認する

1. Penpotのキャンバスを開き、ブラウザの「開発者ツール（F12）」を開く。
2. Networkタブを開き、フィルターを 「WS」（WebSocket）に絞り込む。
3. ページをリロードし、接続が確立されたリクエスト（例: `ws` や `notifications` といったパス）をクリックする。
4. Messagesタブを見て、数秒おきにハートビート（Ping/Pongや空のJSONなど）のパケットが双方向でやり取りされていれば成功です！

2. 社内ネットワーク担当者との連携のコツ

もし上記の設定を行っても接続が切れる場合、社内の「次世代ファイアウォール（NGFW）」や「Webセキュアゲートウェイ（SWG）」がWebSocketをブロックしている可能性が高いです。

その際は、ネットワークエンジニアにこう伝えてください。
> 「Penpotのリアルタイム共同編集機能において、該当ドメインに対する WebSocketプロトコル（WSS）の長期持続接続 および HTTP Upgradeヘッダーの通過 を許可してください」

これだけで、インフラ担当者も「あ、長時間のコネクションね」と一発で理解してくれます。

—

まとめ：制約を越えて、最高のデザイン環境をチームに

今回は、Penpotのマルチプレイヤー編集を支えるWebSocketの仕組みと、社内プロキシ環境における接続エラーの完全解決策を解説しました。

  • WebSocketは常時接続が命。 Nginx等のプロキシでは `Upgrade` ヘッダーの設定が不可欠。
  • タイムアウトは長めに設定する ことで、アイドル状態での切断を防げる。
  • ブラウザのDevTools（WSタブ）を活用して、通信の疎通を論理的に確認する。

オープンソースの強力なツールであるPenpotを社内インフラにしっかりと定着させることができれば、デザイナーと開発者の垣根を超えたリアルタイムなモノづくり環境が手に入ります。

これをマスターすれば、あなたのチームのプロトタイピングのスピードは間違いなく劇的に向上しますよ。ぜひ、今日の業務から試してみてください！

スポンサーリンク
タイトルとURLをコピーしました