【JavaScript 応用講座】：P2P通信の基盤！Node.js製シグナリングサーバをKoyebで構築

1. 🔧 背景と目的

WebRTCによるP2P通信では、映像やファイルの転送を直接クライアント同士で行うことができますが、その接続を開始するためには、最初に**相手と通信の接続情報（offer/answer/ICE candidate）を交換する"シグナリング"**が必要です。

このシグナリングには一般的にWebSocketやHTTPを使った中継サーバが用いられます。

今回は、Node.js + WebSocket でシンプルなシグナリングサーバを実装し、 無料クラウドホスティングサービス「Koyeb」 にデプロイして、 誰でもすぐ使えるシグナリング環境を構築してみます。

本記事で目指すもの

• GitHubにNode.jsのサーバコードを作成＆Push
• Koyebと連携して自動デプロイ
• ブラウザからWebSocketで接続・動作確認

2. 🧱 GitHubリポジトリの準備

• git init → npm init -y → npm install ws
• server.js, package.json, client.html の構成とコード
• process.env.PORT を使う理由（Heroku/Koyebなどに対応）

mkdir signaling-server
cd signaling-server
git init
npm init -y
npm install ws

server.js:

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: process.env.PORT || 3000 });

const clients = new Set();

server.on('connection', (ws) => {
  clients.add(ws);
  console.log('クライアント接続');

  ws.on('message', (message) => {
    console.log('受信:', message);
    for (const client of clients) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    }
  });

  ws.on('close', () => {
    clients.delete(ws);
    console.log('クライアント切断');
  });
});

package.json の一部:

"scripts": {
  "start": "node server.js"
}

client.html の一例:

<script>
  const ws = new WebSocket("wss://qualified-xxxxx.koyeb.app");

  ws.onopen = () => {
    console.log("✅ WebSocket接続確立");
  };

  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log("📥 受信: ", data);
  };

  function sendSignal(data) {
    ws.send(JSON.stringify(data));
  }
</script>

💡 process.env.PORT を使う理由: KoyebやHerokuのようなサービスでは、ポート番号が環境変数として与えられる。ハードコーディングされたポート（例: 3000）だと起動できないため、環境変数に対応するのがベストプラクティス。

3. 🚀 GitHubへのPush

• 初回pushでのエラーと git pull --rebase の解決例
• public/privateどちらでも可（最小権限での連携が安心）

リポジトリ作成後は、以下の一連のコマンド実行。

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/（githubのリポジトリ名）.git
git push -u origin main

error: failed to push some refs to …

GitHub側にすでに何かしらの初期ファイル（READMEやLICENSEなど）がある場合によく出るエラー

error: failed to push some refs to ...
hint: Updates were rejected because the remote contains work that you do not have locally.

✅ 解決方法：git pull –rebase → git push

以下のコマンドで、GitHub側の初期ファイルをローカルに取り込みます：

git pull --rebase origin main

そのあと、改めて push：

git push -u origin main

✅ もしpull時に「マージエディタ」が開いて困ったら…

• :wq で保存して抜ければOK（Vim形式）

🔄 補足：最初からGitHubで「READMEを作らない」でリポジトリを作成すればこの問題は起きません。

4. 🌐 Koyebでサービス作成

• GitHub連携 → signaling-server のインポート
• Start command: npm start
• ポート設定：3000 のみ、Health check の注意点
• Freeプラン（Frankfurt）選択の理由と利点

Koyebにログインし、「Create Web Service」からGitHubと連携すると、対象のリポジトリを選択できます。ここでは signaling-server を指定し、以下のように設定します。

• ブランチ：main
• Build command：空欄でOK（Koyebが自動で npm install を実行）
• Start command：npm start

ポート設定画面では、以下のように構成します：

• Internal Port: 3000
• Public: ON（WebSocketクライアントからアクセス可能に）
• Health Check: もしポートが 8000 などになっていたら削除 or 3000 に修正

最後に、リージョンは Frankfurt（ヨーロッパ）を選ぶと日本からのアクセスでも比較的低遅延です。Freeプランでは1サービス・1インスタンスまでですが、今回のような小規模なWebSocket用途なら問題ありません。

「Deploy Service」をクリックすると、数十秒でサービスが起動し、Koyeb側から https://xxxxx.koyeb.app のURLが発行されます。WebSocketの場合は、これを wss:// に置き換えて使用できます。

5. ✅ デプロイと動作確認

Koyeb上でデプロイが完了すると、ログ画面に 🚀 シグナリングサーバ起動中 というメッセージが出力されます。これは server.js の console.log() によるもので、正しくサーバが起動している証です。

Koyebが割り当てた URL（例：https://your-app.koyeb.app）を wss://your-app.koyeb.app に変換し、client.html に反映します。

const ws = new WebSocket(“wss://your-app.koyeb.app”);

その状態で client.html をブラウザで開くと、開発者ツールのコンソールに：

✅ WebSocket接続確立

というログが表示されれば、サーバと接続できていることを意味します。

ここまでで、無料でWebSocketベースのシグナリングサーバを構築・公開することができました！

6. 🎁 まとめと応用例

今回の構築手順を通じて、無料でNode.js製のWebSocketシグナリングサーバを世界に公開する方法を学びました。

ここから先は、さらに応用可能です：

• WebRTCやsimple-peerとの連携：クライアント同士の映像・音声・データ通信を実現するために、今回のサーバでsignal交換を行い、P2P接続を確立できます。

• ZIPファイル転送やアセット共有：DataChannelやIndexedDBと組み合わせることで、画像・音声・ゲームアセットなどのP2P共有も可能になります。

• GitHubリポジトリをPublicにするかPrivateにするか：KoyebはPrivateリポジトリにも対応しているため、セキュリティ重視の場合は非公開のままで問題ありません。逆にコードを共有・再利用したい場合はPublicにしてREADMEや利用例を追加するのもおすすめです。

今後の開発や応用に向けて、このシグナリングサーバがひとつの基盤になることを願っています！

7. 余談：Koyebの使用量を監視する方法（自動チェック）

✅ 方法1：KoyebのAPIを使う（おすすめ）

curl -H "Authorization: Bearer YOUR_API_KEY" https://app.koyeb.com/v1/apps

• apps や services の使用状況、デプロイ状態などが取れます
• JSONで返ってくるので Node.js や Python で整形可
• cronや定期実行で Slack通知 or ログに記録

✅ 方法2：KoyebのWeb画面にある「Usage」タブを目視

• 月間CPU秒や時間数などが分かります
• GUIで簡単ですが、自動では取れないのが難点

Koyeb API reference

Complete reference documentation for the Koyeb API to interact with the Koyeb platform in a simple, programmatic way using conventional HTTP requests.

https://www.koyeb.com/docs/reference/api