ライブリロード
ライブリロードオプションを使用すると、開発環境でアプリのコードを変更したときにブラウザまたはWeb Viewがリロードされます。これは、ハードウェアデバイスを使用して開発する場合に特に便利です。
用語
ライブリロードは、複数の意味を持つ用語です。ionic serveでは、ライブリロードは変更が行われたときにブラウザをリロードすることだけを意味します。ライブリロードは、CapacitorおよびCordovaでも使用して、仮想デバイスおよびハードウェアデバイスで同じエクスペリエンスを提供でき、ネイティブバイナリを再デプロイする必要がなくなります。
使用法
ライブリロードでは、Web Viewがデバイス上のファイルを読み取るだけでなく、コンピューターでホストされているURLからアプリをロードする必要があるため、ハードウェアデバイス用のライブリロードを設定するのは難しい場合があります。
通常のデバイスデプロイと同様に、デバイスをコンピューターに接続するためのケーブルが必要です。違いは、Ionic CLIが、コンピューター上の開発サーバーからアプリをロードするようにWeb Viewを構成することです。
Capacitor
Capacitorでライブリロードを使用するには、仮想デバイスまたはコンピューターと同じWi-Fiネットワークに接続されたハードウェアデバイスのいずれかを使用していることを確認してください。次に、--externalフラグを使用して、開発サーバーに外部IPアドレスを使用するように指定する必要があります。
$ ionic capacitor run ios -l --external
$ ionic capacitor run android -l --external
--externalオプションを使用すると、Wi-Fiネットワーク上の他のユーザーがアプリにアクセスできるようになることに注意してください。
Cordova
Android
Androidデバイスの場合、Ionic CLIは開発サーバーのポートを自動的に転送します。つまり、localhostアドレスを使用でき、Web Viewでロードされたときにデバイスではなくコンピューターを参照します。
次のオールインワンコマンドは、localhostでライブリロードサーバーを起動し、Cordovaを使用してアプリをAndroidデバイスにデプロイします
ionic cordova run android -l
iOS
iOSデバイスの場合、ポート転送はまだオプションではありません。つまり、デバイスをコンピューターと同じWi-Fiネットワークに接続し、開発サーバーに外部アドレスを使用する必要があります。
場合によっては、Ionic CLIがWeb Viewを構成するために使用するアドレスを認識しないため、アドレスを選択するように求められる場合があります。必ずWi-Fiネットワーク上のコンピューターのアドレスを選択してください。
次のオールインワンコマンドは、すべてのアドレスでライブリロードサーバーを起動し、Cordovaを使用してアプリをiOSデバイスにデプロイします
ionic cordova run ios -l --external
--externalオプションを使用すると、Wi-Fiネットワーク上の他のユーザーがアプリにアクセスできるようになることに注意してください。
ヒント
- Cordovaを使用する場合は、
--device、--emulator、および--targetオプションを使用して、ターゲットデバイスを絞り込みます。--listオプションを使用して、すべてのターゲットを一覧表示します。 コマンドドキュメントで使用法を参照してください。 ionic serveとionic cordova runまたはionic capacitor runの--livereload-urlオプションを使用すると、開発サーバーのプロセスとデプロイプロセスを分離できます。- Androidの場合、adbサーバーが実行中に常にポートを転送するようにadbを構成できます（
adb reverseを参照）。ポート転送が設定されている場合、外部アドレスは不要になります。また、後続のデプロイにUSBケーブルが不要になるように、TCP経由でadbブリッジを設定することもできます。 - Angularで開発コンテナを使用している場合、ライブリロードが機能しない場合があります。これを修正するには、
angular.jsonでprojects.app.architect.serve.configurations.development.pollを1に設定します。
SSLの使用
ライブリロードはデフォルトでHTTPを使用しますが、セキュアなコンテキスト（Web Cryptoなど）を必要とするWeb APIは失敗します。セキュアなコンテキストを確立するには、--ssl引数を使用してHTTPSを使用できます。
たとえば、Angularアプリケーションでは、次のコマンドを実行して、証明書と秘密鍵を渡し、HTTPSでアプリを配信できます
ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
自己署名証明書を使用し、デバイスによって信頼されるようにすることは複雑なトピックであり、この記事で説明されています。