内蔵ブラウザならMac miniのlocalhostを外出先から開ける
Mac miniで開発しているWebアプリを、外出先のMacBook Proで確認したい。リモート開発を考えたとき、必ず気になるのがこの問題だ。Claude CodeやCodexを遠隔操作できても、開発中の画面を確認できなければ、フロントエンドの開発は不便になってしまう。
結論から言うと、OrcaのRemote Orca Serversと内蔵ブラウザを組み合わせれば、Mac miniのlocalhostで動いているWebアプリを、そのままMacBook Proから開ける。開発サーバーをインターネットに公開する必要もない。本記事では、その仕組みに加えて、Chromeなど通常のブラウザで確認する方法まで紹介する。
localhostは端末ごとに異なる
[画像挿入：localhostが指す場所は端末ごとに異なると分かる図]
例えば、Mac miniでNext.jsの開発サーバーを起動しているとする。npm run devを実行して開発サーバーが3000番ポートで起動している場合、Mac miniではhttp://localhost:3000にアクセスすれば画面が表示される。
では、MacBook ProのChromeで同じURLを開いたらどうなるだろうか。残念ながら、そのままではMac miniのWebアプリは表示されない。localhostは、そのコンピューター自身を表しているからだ。Mac miniのlocalhostと、MacBook Proのlocalhostは別の場所を指す。
そのため、一般的なリモート開発では、ポートフォワーディングやネットワーク設定が必要になる。ところがOrcaの場合、もっと自然に扱える方法がある。
Orcaの内蔵ブラウザがリモート環境に対応している
[画像挿入：内蔵ブラウザの描画と通信の経路が分かる図]
Orcaには、worktreeごとに独立した内蔵ブラウザが用意されている。Chromiumベースのブラウザで、通常のWebブラウザのようにページを開き、操作できる。
さらにRemote Orca Server上のワークスペースでは、ブラウザの通信をリモートホスト経由にする仕組みが用意されている。Mac miniのワークスペースをMacBook Proで開いた場合、ブラウザはMacBook Pro側で描画しながら、HTTP(S)、WebSocket、DNS、ループバック通信などをMac mini側経由で行うことができる。
つまり、MacBook Pro側のOrcaブラウザから、Mac miniのlocalhost:3000にあるWebアプリを開ける。これが非常に便利だ。開発サーバーをわざわざインターネット上へ公開しなくても、作業中のWebアプリを確認できる。
ブラウザの描画場所も選べる
Orcaの面白い点は、ブラウザの実行方式も選べることだ。Remote Orca Serversのワークスペースでは、主に2つの方式が用意されている。
「このデバイス」方式は、MacBook Pro側で描画し、通信はMac mini経由で行う。入力や選択操作、ポップアップなどを手元の端末で処理しつつ、ネットワーク通信はMac mini側を利用できる。「サーバー（ストリーミング）」方式は、Mac mini側で描画し、その画面をMacBook Proに表示する。Mac mini上で実行されるブラウザの画面を、そのままストリーミングできる。
用途によって選択肢があるのはありがたい。設定は、Orcaの「設定」→「ブラウザー」にあるリモートサーバーワークスペースの項目から変更できる。
Worktreeごとにブラウザを分けられる
Orcaの内蔵ブラウザは、worktree単位で管理される。例えば、認証機能の開発をしているworktreeと、管理画面のデザインを変更しているworktreeがあったとする。それぞれの作業に対応したブラウザタブを保持できる。
worktreeを切り替えると、そのworktreeに関連するブラウザのタブやスクロール位置を復元できる。AIエージェントが複数の機能を同時並行で開発している場合には、こうした仕組みが役立つ。
ただし、異なるworktreeの開発サーバーを同時起動する場合は、使用するポート番号が競合しないように注意が必要だ。
ChromeやBraveでも動作確認できる
[画像挿入：SSHポートフォワーディングの経路が分かる図]
Orcaの内蔵ブラウザが便利とはいえ、実際のWeb開発ではChromeやBrave、Vivaldiなどでも確認したいことがある。例えば、ブラウザ固有の動作を確認したい場合や、普段使っている拡張機能と組み合わせて検証したい場合だ。その場合も、Mac mini側のWebアプリを開くことはできる。
代表的なのがSSHポートフォワーディングだ。MacBook Proのターミナルで次のように実行する。
ssh -N -L 3000:localhost:3000 ユーザー名@Mac-miniのTailscale-IP
これでMacBook Proの3000番ポートへのアクセスが、Mac miniの3000番ポートへ転送される。あとはMacBook ProのChromeなどでhttp://localhost:3000を開くだけだ。これはOrca独自の仕組みではなく、SSHの標準的な機能である。
一方、Orcaにもポート検出や転送の機能があり、リモートワークスペースから必要なポートを手元へ転送する運用ができる。内蔵ブラウザでの確認と、通常のブラウザでの検証を使い分けられるのは心強い。
実際のWeb開発でどう便利か
例えば、Next.jsとPayload CMS、PostgreSQLを利用したWebサイトを開発しているとしよう。自宅のMac miniでは、DockerでPostgreSQLを起動し、Next.jsの開発サーバーを動かしている。Claude Codeには画面の実装を任せている。
外出先では、MacBook ProのOrcaからMac miniへ接続する。コード変更の進捗を確認しながら、Orcaの内蔵ブラウザで開発中の画面を表示する。必要な修正をAIに依頼し、ブラウザを再読み込みして結果を確認する。
この作業は、MacBook Pro側にPostgreSQLやNode.jsの開発環境を再構築しなくても行える。コードの編集、AIへの指示、実行結果の確認まで、Mac miniの環境を利用して進められる。Webアプリの開発では、これはかなり大きなメリットだと思う。
セキュリティ面でも考えやすい
開発サーバーを外部から確認しようとすると、インターネット上にポートを公開する方法を考えがちだ。しかし、開発用サービスには、認証やアクセス制限が不十分なものもある。そのため、開発用のポートを安易に公開するのは避けたい。
今回のようにTailscaleを利用し、Orcaのリモート接続やSSHポートフォワーディングを使えば、公開インターネットへ開発サーバーを直接露出させずにアクセスできる。
もちろん、Tailscaleのアクセス制御やOrcaの接続権限を適切に管理する必要はある。アクセスリンクを公開しないことも重要だ。
まとめ：リモート開発でも確認作業を諦めなくていい
Remote Orca Serversを使うと、Mac mini上でAIエージェントを実行できる。さらにOrcaの内蔵ブラウザを組み合わせれば、そのエージェントが作成しているWebアプリの表示確認まで、MacBook Proから行える。
これは単にリモートターミナルを利用するのとは大きく違う。開発に必要な一連の操作を、離れた場所から継続できる。AIへの指示、コードの確認、テスト、Webブラウザでの検証。Mac miniに開発環境を集約しても、MacBook Proからの開発体験を大きく損なわずに済む。
これこそ、Orcaのリモート開発機能が魅力的だと感じる理由の一つだ。設定については、別記事の「番外編：Remote Orca Servers完全設定ガイド」で紹介する。