概要
手元で動かしている開発中のアプリを、インターネットに公開せずに、ネットワークに参加した関係者だけに見せる方法を説明します。リバースプロキシの構築や認証の実装、TLS証明書の管理は不要です。ネットワーク内の通信はWireGuardで暗号化されます。
事前準備
ステップ1: 開発サーバーを他の端末から見える形で起動する
多くの開発サーバーは、初期設定では localhost（127.0.0.1）だけで待ち受けるため、そのままでは他の端末から到達できません。0.0.0.0（すべてのインターフェース）で待ち受けるように起動します。
- 多くの開発ツールには、外部からのアクセスを許可するオプションがあります（例:
--hostオプションや、設定ファイルのhost: '0.0.0.0'）。代表的なツールでは次のように起動します- Astro / Vite / Nuxt:
npm run dev -- --host - Next.js:
npm run dev -- -H 0.0.0.0 - Ruby on Rails:
bin/rails server -b 0.0.0.0
- Astro / Vite / Nuxt:
macOS の場合
- 初回起動時に「ネットワーク接続を許可しますか」というダイアログが出たら、「許可」を選択します
- 待ち受けの状態は、ターミナルで
lsof -iTCP:3000 -sTCP:LISTENのように確認できます（3000は開発サーバーのポート番号に読み替えてください）。表示の末尾が*:3000なら他の端末から到達できます。127.0.0.1:3000や[::1]:3000だけの場合はlocalhost限定のため、起動オプションを見直してください
Windows の場合
- 初回起動時にWindowsファイアウォールの警告が出たら、「アクセスを許可する」を選択します。プライベートネットワークでの通信を許可してください
- 待ち受けの状態は、コマンドプロンプトで
netstat -an | findstr :3000のように確認できます（3000は開発サーバーのポート番号に読み替えてください）。0.0.0.0:3000なら他の端末から到達できます。127.0.0.1:3000だけの場合はlocalhost限定のため、起動オプションを見直してください
ステップ2: アクセス先の住所を共有する
見る側のメンバーには、開発サーバーが動いている端末のIPアドレス（またはデバイス名）とポート番号を伝えます。
- ダッシュボード（ztna.lolipop.jp/dashboard）の「デバイス」で、開発サーバーが動いている端末の「IPアドレス」を確認します
- 見る側のメンバーは、クライアントアプリで接続した状態で
http://<IPアドレス>:3000のようにブラウザで開きます（ポート番号は開発サーバーの設定に合わせます）
スマートDNSが有効な場合は、IPアドレスの代わりに http://<デバイス名>.<ネットワークドメイン>:3000 という名前でもアクセスできます。デバイス名は「デバイス」一覧の名前、ネットワークドメインは「設定」>「ネットワーク」の「ネットワークドメイン」で確認できます。
ステップ3: 見せる範囲を絞る（任意）
特定のメンバーやチームだけに見せたい場合は、アクセスルールを設定します。
- 「アクセスルール」をクリックし、「ルールを作成」をクリックします
- 「接続元」に見せたい相手（ユーザーまたはグループ）、「接続先」に開発サーバーの端末、「ポート・プロトコル」に開発サーバーのポート（例:
3000）を入力して保存します
CIランナーや検証サーバーなど、特定の個人に紐づかない端末を共有する場合は、端末をタグで管理すると運用しやすくなります（「タグの設定方法」）。
設定後の確認
- 見る側のメンバーの端末から、共有したアドレスで開発中のアプリが表示されることを確認します
- アクセスルールを設定した場合は、許可していないメンバーからは表示されないことも確認します
トラブルシューティング
-
自分の端末（localhost）では表示されるのに、相手の画面に表示されない: 開発サーバーが
localhostだけで待ち受けているときの典型的な症状です。ステップ1の起動オプションと確認コマンドで、0.0.0.0で待ち受けているかを確認してください。OSのファイアウォールで開発サーバーのポートがブロックされていないかも確認してください -
開こうとするとURLが
https://に変わってしまう: ブラウザの「常にHTTPSを使用」などの機能が原因です。開発サーバーはHTTPSに対応していないため、http://のまま開いてください - 名前でアクセスできない: スマートDNSが有効か（「設定」>「スマートDNS」）、デバイス名とネットワークドメインの組み合わせが正しいかを確認してください
- 上記で解決しない場合は「接続できない場合の対処方法」をご覧ください
ご注意
- アクセスできるのはネットワークに参加した端末だけです。インターネットへの一般公開には対応していません。不特定多数への公開には、ホスティングサービスなどをご利用ください。
- 通信はWireGuardで暗号化されますが、ブラウザ上のURLは
http://になります（TLS証明書の発行機能は提供していません）。- アクセスルールを1件でも作成すると、ルールにない通信はすべて拒否されます。最初のルールを作成する前に、必要な通信をまとめて洗い出してください（ルールが1件もない間は、すべての通信が許可されています）。