【遠隔開発の革命】スマホからVS CodeとAIを操る「Antigravity Remote Control」の開発とCloudflare Tunnelsによる常時接続化

1. 導入：「PCの前に縛られる開発」からの脱却

「外出先や移動中の電車内、あるいは就寝前のベッドの上からでも、スマホ一つで自宅の開発サーバーのAIエージェントにコード作成やデプロイを指示できたらどうなるだろうか？」

このアイデアから生まれたのが、VS Code拡張機能 「Antigravity Remote Control」 です。本拡張機能は、スマートデバイスのチャットインターフェースと、ローカルおよびコンテナ内の自律型開発AI（Antigravity）を直接結びつけます。さらに、セキュアな常時接続を実現するために Cloudflare Tunnels (Zero Trust) を導入し、固定URLによる快適なリモート開発環境を構築しました。

Antigravity Remote Controlの全体接続アーキテクチャ図

【一次情報】Cloudflare Tunnel固定化でのルーティング葛藤記

当初、テスト段階ではセットアップが簡単な「Quick Tunnel（一時URL）」を使用していましたが、開発環境を再起動するたびにドメインが変更され、スマホアプリ側の接続先設定を毎日書き換えなければならない不便さがありました。そこで、Cloudflareの管理ドメインを活用した「Named Tunnel（名前付き固定トンネル）」への移行を決断しました。この過程で直面した具体的な技術課題と解決方法は以下の通りです。

  • Dockerコンテナ内でのDNSとSSLハンドシェイク不整合：
    コンテナ化されたLinux環境に cloudflared を常駐させ、VS Codeのポートにマッピングした際、CloudflareのSSL/TLSモードが「Full (Strict)」になっていたために「502 Bad Gateway」が発生。これは、コンテナ側のローカルWebサーバーが自己署名証明書（またはHTTP）を使用していたのに対し、Cloudflareが厳密なHTTPS証明書の検証を要求したためです。トンネル側の設定で no-tls-verify: true を指定し、安全性を維持しつつもコンテナ内部の通信を柔軟にマッピングすることで解決しました。
  • モバイル端末特有の長文入力負担の軽減：
    スマホの仮想キーボードでは、長大なコードプロンプトを手動入力するのは困難です。拡張機能のフロントエンドUIに、よく使う「git statusの確認」「最新記事のデプロイ」「ログの同期」といった定型指示を**ワンタップで呼び出すショートカットマクロボタン群**を実装し、最小限のフリック操作で自律エージェントを制御できるようにしました。

2. Antigravity Remote Control の内部機構

本拡張機能は、VS Codeの拡張機能（Extension API）として動作し、主に以下の3つのコンポーネントで成り立っています。

  • Websocketサーバー： スマートフォンからの接続要求をリアルタイムで待ち受け、暗号化したセッション上でコマンドを送受信します。
  • エージェントブリッジAPI： 受信した指示を、ローカルで待機しているAI（Gemini/Antigravity）に流し込み、エージェントが実行した結果（ファイル変更差分や実行ログ）をスマホ側のチャットUIに即座にプッシュバックします。
  • セッション監視ロガー： 予期せぬ切断が発生した場合、コンテナ側で状態をシリアライズして退避し、再接続時に自動的に前の作業コンテキストを復元する仕組みを構築しました。

3. なぜVPNではなく「Cloudflare Tunnels」なのか

リモート接続の手法として、WireGuardやOpenVPNといったプライベートVPNの構築も検討されました。しかし、本構成では以下のセキュリティ上の強みから Cloudflare Tunnels を選択しました。

ポート開放が完全に不要

外部から自宅ルーターのポートを空ける必要が一切なく、ファイアウォールの内側からアウトバウンド接続のみでトンネルを張るため、外部攻撃の侵入口を作りません。

アクセス制御の集約

Cloudflare Zero TrustのWAFや、GitHub/Google等のIDプロバイダ（SSO）による事前認証をトンネル手前に簡単に挟み込むことができ、二重の防御壁を構築できます。

4. 実践：Named Tunnel の構成手順

コンテナ側でトンネルを固定化するための設定ファイルのコードスニペットです。

cloudflared config.yml

tunnel: my-antigravity-tunnel
credentials-file: /etc/cloudflared/credentials.json
ingress:
  – hostname: remote-dev.taputech.net
    service: http://localhost:8080
    originRequest:
      noTLSVerify: true
  – service: http_status:404

cloudflared tunnel run をバックグラウンドで実行させることで、指定ドメイン（例: remote-dev.taputech.net）に対するトラフィックが自動的にローカルのVS Codeサーバーへと流れるようになります。

セキュリティ保護の重要性

固定URLを利用したリモート開発環境は、外部から悪意ある第三者にスキャンされるリスクを伴います。必ずCloudflare Zero Trustのダッシュボードより「Access Policy」を設定し、特定の電子メールアドレス、または特定のクライアント証明書（mTLS）を保持するデバイス以外からの接続をブロックするよう設定を二重化してください。

公式ドキュメントおよび仕様

コメント

タイトルとURLをコピーしました