【React/iPhone/localhost】ESETを使っているWindowsPCで、開発しているWebアプリ(localhost)にiPhoneでアクセスできるようにして動作確認をする【Wi-Fi】

表題にある通り、ローカルPCで開発中のWebアプリ(localhost)に、同じWi-Fiに接続しているiPhone(実機)でアクセスして動作確認したいと思い、esetの設定を行った際の備忘録です。
私の場合はReactアプリですが、Reactでなくともこの辺りの設定は変わらないと思います。実機もiPhoneでない場合も同じかと思います。(試してはいません)

前提および対象者

本記事の内容は以下の項目(環境等)が前提となります。

• localhostでWebアプリを立ち上げているPC(開発に使用しているPC)はWindowsで、かつESET(セキュリティソフト)を使用している
• PCと実機(iPhone)は同じWi-Fiに接続されている

設定方法

iPhoneのipアドレス確認

まず、iPhoneがWi-Fiに接続している際のipアドレスを確認しておきます。
設定 > Wi-Fi > 接続しているWi-Fiをタップ > 下の方にある「IPアドレス」を確認



確認したらこれをメモしておきましょう。

ESETの設置

PCでESETを開き以下のように設定します。

1. 左メニューの「設置」を選択し「ネットワーク保護」をクリック
   
2. 「ファイアウォール」の項目の右端の歯車アイコンをクリックし「設定...」を選択
   
3. 左メニューの「ファイアウォール」の項目を選択し、「詳細」の欄を展開し中にある「編集」をクリック
   
4. 「ファイアウォールルール」ウィンドウが開くので、下の方にある「追加」ボタンをクリック
   
5. 「一般」タブで以下の項目を入力

• 名前→何用途のルールかわかるように名前をつける
• 方向→私は「内向き」で設定しましたが、各々必要に応じで変更してください。
• アクション→「許可」にします。
• プロトコル→「TCPおよびUDP」でok
  

6. 「ローカル」タブで、「ポート」の欄に開発中にWebアプリをlocalhostで立ち上げる際に使用しているポート番号を入力
   
7. 「リモート」タブで、「IP」の欄に先程メモしておいた実機(iPhone等)のipアドレスを入力
   
8. OKボタンで各ウィンドウを閉じて設定を適用する。

設定は以上になります。

あとはiPhoneでSafari等を起動し、「PCのipアドレス:ポート番号」にアクセスすればPCで立ち上げているWebアプリにアクセスできるはずです。

以上！