外部端末（PCやiPad）の環境（画面幅やWindowsバージョン）で、別PCで開発中のアプリケーションの挙動を調査したい。
わかりやすいように、ここでは、挙動を調査したい端末をiPad、開発中のアプリケーションを別PCで起動しているものとする。
また、普段PCで、アプリケーションをローカル起動しているエンドポイントが以下である場合を想定する。
http://localhost:8000/app-name/app/開発PC側の設定
アプリケーションのアクセス許可
開発中のアプリケーション資源にアクセス設定がかかっている場合があるので、ですべてのホストからのアクセスを許可する。
画面資源のpackage.jsonのscript.startに以下の設定を加える。
ng serve -o --host 0.0.0.0PC自体の穴あけ設定
次に、開発PCのファイアウォールで、iPadからのアクセスを許容する設定をする。
- コントロールパネル＞すべてのコントロールパネル項目＞Windows Defender ファイアウォールDefender
- 詳細設定＞受信の規則＞新しい規則
以下の設定で、新しい規則を作成する。
- プロトコル：TCP
- 接続を許可する
- パブリック：有効
- ローカルポート：8000 ※PCのアプリケーションを起動する際のポート番号を指定する
- ローカルIPアドレス：PCのIP
- リモートIPアドレス: iPadのIP
iPad側の設定
iPad側では、PC側で穴あけした接続先にアクセスするのみ。ここまでの設定では、以下のURLでアクセスできる。
http://[PCのIP]:8000/app-name/app/
コメント