WindowsとLinuxからAndroidでCapacitor Live Reloadを使う

Live reloadを使えば、ビルド、sync、実行という遅いループが、保存して確認するだけの作業に変わります。Macでは Capacitor CLI の --live-reload フラグを使うだけでほぼ動作します。WindowsやLinuxでも同様のフラグが使えますが、ファイアウォールやエミュレータのネットワーク、USBルーティングが原因で「リロードされない」という報告が多く寄せられます。本ガイドでは、それぞれのケースについて解説します。

Capacitor における live reload の仕組み

通常、ネイティブアプリは dist/ APK内からロードされます。一方、 server.url を設定すると、WebViewはAPK内ではなく、ViteやフレームワークのdevサーバーのURLからロードされるようになります。これにより、デスクトップブラウザとまったく同じように Hot module replacement が動作します。ネイティブ側は何も変わらず、変わるのはページのオリジンだけです。

2つの注意点：

• デバイスはコンピュータにネットワークアクセスできる必要があります。
• 平文の http:// には cleartext: trueが必要です。Android はデフォルトで cleartext 通信をブロックするためです。

オプションA: CLI フラグ

Capacitor CLI を使えば、1回の実行でこれを設定できます：

bun run dev -- --host 0.0.0.0 &
bunx cap run android --live-reload --host 192.168.1.20 --port 5173

ホストをコンピュータのLAN IPに置き換えてください。CLI は一時的な設定を書き込み、アプリを起動してから設定を元に戻します。devサーバーが別のポートを使っている場合は、そのポートを指定してください。

これが最短ルートです。このガイドの残りの部分では、デバッグが容易で、どのフレームワークのdev serverとも連携できる明示的な設定（explicit config）を使用します。

オプションB: 明示的な設定（explicit config）

すべてのインターフェースにバインドしてdev serverを起動します：

# Vite
bun run dev -- --host 0.0.0.0
# Angular
bunx ng serve --host 0.0.0.0
# Next.js
bun run dev -- -H 0.0.0.0

次に、開発専用の Capacitor 設定を作成します。Capacitor は capacitor.config.tsを読み取るため、環境変数を切り替えます：

import type { CapacitorConfig } from '@capacitor/cli';

const liveReloadUrl = process.env.CAP_LIVE_RELOAD_URL;

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  ...(liveReloadUrl
    ? { server: { url: liveReloadUrl, cleartext: true } }
    : {}),
};

export default config;

変数を設定して実行します：

CAP_LIVE_RELOAD_URL=http://10.0.2.2:5173 bunx cap sync android
bunx cap run android

Windows PowerShellの場合：

$env:CAP_LIVE_RELOAD_URL="http://10.0.2.2:5173"; bunx cap sync android
bunx cap run android

変数がない場合、 cap sync は通常のconfigを書き込み、リリースビルドも安全に行えます。

エミュレーター：10.0.2.2 を使用

Androidエミュレーター内では、 10.0.2.2 があなたのコンピュータを指します。トラフィックがマシン外に出ないため、WindowsやLinuxでもファイアウォールの変更なしで動作します。もし失敗する場合は、dev serverが次のようにバインドされているか確認してください： 0.0.0.0 それだけでなく、 127.0.0.1ループバックにバインドされたサーバーは、エミュレータの仮想ネットワークからはアクセスできません。

USB接続の端末: adb reverse

実機における最もクリーンな方法です。Wi-Fiもファイアウォールの設定も不要です：

adb reverse tcp:5173 tcp:5173

次に、 localhost:5173 端末側からPCを参照するようにします。URLを以下のように設定してください：

CAP_LIVE_RELOAD_URL=http://localhost:5173 bunx cap sync android

adb reverse デバイスの再接続時にクリアされるため、抜き差しした後は再度実行してください。CLI を使えば自動で行えます： bunx cap run android --live-reload --host localhost --port 5173 --forwardPorts 5173:5173。Linuxユーザーは、以下のページにあるudevルールが必要です： Linuxセットアップガイド の前に adb 端末を認識できるようになります。

Wi-Fi接続の端末: LAN IP + ファイアウォール

USBが使えない場合は、PCのLAN IPを使用してポートを開放してください。

IPの確認方法:

# Linux
ip -4 addr show | grep inet
# Windows
ipconfig

Windowsでポートを開放します。管理者権限で起動したPowerShellから:

netsh advfirewall firewall add rule name="Vite dev server" dir=in action=allow protocol=TCP localport=5173

Windowsのパブリックネットワークプロファイルでは、企業環境によってはルールがあっても受信接続がブロックされます。スマホからまだ接続できない場合は、設定でWi-Fiネットワークを「プライベート」に切り替えてください。

Linux (ufwを使用している場合):

sudo ufw allow 5173/tcp

Fedora (firewalldを使用している場合):

sudo firewall-cmd --add-port=5173/tcp

次に:

CAP_LIVE_RELOAD_URL=http://192.168.1.20:5173 bunx cap sync android
bunx cap run android

両方のデバイスが同じサブネットにある必要があります。ゲスト用Wi-Fiはクライアントを分離することが多く、ファイアウォールの問題とまったく同じに見えます。

WSL2の注意点

ViteをWSL2内で実行している場合、Windowsホストはポートを自動的に公開しません。mirrored networkingを有効にしてください: .wslconfig またはWindows側でポートプロキシを追加します。詳細は次の WSL2ガイド.

HMRのWebSocketに関する問題

ページは読み込まれるのに変更が反映されない場合、HMRのWebSocketが誤ったホストに接続しようとしています。Viteにパブリックアドレスを伝えてください：

// vite.config.ts
export default defineConfig({
  server: {
    host: '0.0.0.0',
    hmr: {
      host: '192.168.1.20', // or 10.0.2.2 for the emulator
      port: 5173,
    },
  },
});

AngularやNext.jsにも同様のオプションがあります。症状は同じで、WebSocketのホストを固定することで解決します。

Chrome DevToolsを使ったデバッグ

開く chrome://inspect PCのChromeまたはEdgeで行います。デバイスの下に、開発サーバーのURLが付いたWebViewが表示されます。WindowsでもLinuxでも、Console、Network、Sources、ブレークポイントが利用可能です。デバイスが表示されない場合は、以下を確認してください： adb devices USBデバッグが許可されていること。

開発用設定をそのままリリースしないこと

A release build with server.url 設定されたホストが実在しないマシンから読み込まれると、アプリは真っ白な画面になります。これを防ぐために：

• 上記の環境変数パターンを使用することで、デフォルト設定に含める必要がなくなります server ブロック。
• ビルドされた内容にエラーが含まれる場合に android/app/src/main/assets/capacitor.config.json が含まれている場合に "url".
• もし〜も使用している場合は、 Capgo Live Updates注意が必要です。 server.url config が updater の bundle を上書きするため、2つのワークフローは分けて管理してください。

まとめ

Android での Live reload は、Windows と Linux からでも、以下の3点を正しく設定すれば動作します。まず、dev server をすべてのインターフェースにバインドし、デバイスが実際にアクセス可能なアドレスを選択してください（10.0.2.2 エミュレータの場合は、 adb reverse for USB, LAN IP with a firewall rule for Wi-Fi), and keep the dev config out of release builds. Once the iteration loop is fast on Android, the shared web layer is already tested before it reaches iOS through Capgo のビルド.