スマレジのテックファーム（SES 部門）でWebエンジニアとして働いているやまて（@r_yamate）と申します。

実務では、2023 年 3 月末で SES の派遣先で、テーブルオーダーシステムの機能改修業務の設計などを担当していた業務を終えたところです。

4 月からは、スマレジの関連アプリの開発業務を担当しています。触ったことのなかった Flutter での開発で、日々奮闘中です。

はじめに

MacBook Pro 上の Docker コンテナで開発中の Web アプリに、Android デバイスの実機にビルドした Android アプリの WebView を通じて、接続する方法をまとめます。

具体的には、Android デバイスと MacBook を同一の Wi-Fi ネットワークに接続して、MacBook を DNS サーバー化して接続します。

構成

MacBook Pro（intel）
- macOS Monterey 12.6.5
- Android Studio Flamingo | 2022.2.1 Patch 2
Android デバイス（OPPO Reno A, Android バージョン 9）
Wi-Fi ネットワーク環境

1. MacBook でやること

1-1. Wi-Fi に接続

Wi-Fi ネットワークに接続します。

support.apple.com

Android デバイスと PC とでネットワークは揃える必要があります。

1-2. ネットワーク内での IP アドレスの確認

PC のネットワーク内での IP アドレスを確認します。「システム環境設定 > ネットワーク」から確認できます。

この時の IP アドレスは 192.168.10.106 でした。

1-3. hosts の設定

sampleapp.internal というドメイン名を、localhost と同じく 127.0.0.1 に設定します。

# r_yamate @ mbp in ~/development/sampleapp on git:development x [6:57:00]
$ sudo vi /etc/hosts
Password:

# r_yamate @ mbp in ~/development/sampleapp on git:development x [6:59:27]
$ cat /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost

127.0.0.1 sampleapp.internal

ここでの /etc/hosts ファイルの設定は、 MacBook が DNS サーバーとして機能する時に特定のドメイン名を特定の IP アドレスに解決するためです。

127.0.0.1 sampleapp.internal を /etc/hosts ファイルに追加すると、sampleapp.internal というドメイン名が 127.0.0.1（localhost）として名前解決されます。

2. Android デバイスでやること

2-1. Wi-Fi に接続

Android デバイスを Wi-Fi ネットワークに接続します。

support.google.com

2-2. ネットワーク設定

Android デバイスのネットワークの設定として、 IP アドレスを固定化をします。

具体的な設定は以下のとおりです。

Wi-Fi ネットワークの「詳細」を開きます。
「IP 設定」を DHCP から 静的 に変更します。
「DNS 1」を 192.168.10.106 (MacBook の IP アドレス)にします。
「DNS 2」には何も入力しません。

Android デバイスにインストールした WebView 利用の Flutter（Android）アプリから、Webアプリ(MacBookのDockerコンテナ上)へアクセスする Wi-Fi の設定方法は以上です。

3. 疑問点の解消

これまでの設定してアクセス自体は成功したのですが、疑問があったため解消します。

Q1. なぜ DHCP から静的に変更するのか？

Android デバイスの接続をしている Wi-Fi ネットワークの IP 設定を DHCP *1 から 静的 に変更することで、 Android デバイスのネットワーク接続について、以下の変更をしたいためです。

IP アドレスを固定化する

DHCP を使用すると、端末はネットワークから動的に IP アドレスを割り当てられ、ネットワークに接続するたびに変わる可能性がありますが、

静的 IP 設定を使用すると、端末は指定した IP アドレスを常に使用することで、特定のサービスやアプリで一貫した接続ができるため、静的に変更します。
手動でのネットワーク設定ができるようにする

DHCP を使用すると、端末は自動的に IP アドレス、サブネットマスク、デフォルトゲートウェイ、 DNS サーバーなどのネットワーク設定が取得されますが、

静的 IP 設定を使用することで、これらの情報を手動で入力できるように変更します。

Q2. 設定項目の DNS 1 と DNS 2 とは？

「DNS1」と「DNS2」は、端末が DNS ルックアップ（ドメイン名を IP アドレスに変換）を行う際に使用する DNS サーバーの IP アドレスを指定するための項目です。

DNS

DNS（ドメインネームシステム）は、インターネット上のドメイン名（例：smaregi.jp）を、対応する IP アドレス（例：52.198.128.109）に変換するシステムです。これにより、ユーザーは覚えやすいドメイン名を使用してウェブサイトにアクセスでき、裏側では IP アドレスを使用してコンピュータ間の通信が行われます。
DNS 1（プライマリ DNS サーバー）

DNS 1 には、端末が最初に DNS クエリを送るサーバーの IP アドレスを入力します。もしこのサーバーが応答しない場合、端末は DNS 2 にクエリを送ります。
DNS 2（セカンダリ DNS サーバー）

DNS 2 は、 DNS 1 が利用できない場合に備えたバックアップとして機能します。 DNS 1 がタイムアウトした場合や応答しない場合などに、 DNS 2 にクエリが送信されます。

ちなみに Android デバイスで、 DNS 1, DNS 2 にデフォルトで入力される 8.8.8.8, 8.8.4.4 は、Google が提供しているパブリック DNS サーバーの IP アドレスです。

先日は、これら DNS サーバー（DNS 1 と DNS 2）をうまく設定できていないことで、Android デバイスからWebアプリのドメイン名を解決できないエラーで丸一日を潰しました。その経験から、 DNS サーバーはインターネット接続を可能にするための重要な設定ということが身に染みました。

Q3. 通信時の通信経路はどうなるのか？

「DNS1」欄に MacBook のネットワーク内での IP アドレスを入力した場合、通信の経路はどうなっているのかを確認します。

Android アプリからのリクエスト

Android アプリの WebView から、Web アプリにアクセスするためのリクエストをします。
DNS ルックアップ

リクエストはまず、 Android デバイスの設定に基づいて DNS サーバー (ここでは MacBook) に送られます。 DNS サーバーはドメイン名を IP アドレスに変換します。この変換により、リクエストは Web アプリの IP アドレスを見つけることができます。
リクエストの送信とレスポンスの受信

リクエストはその後、その IP アドレスに対して送信されます。これは、MacBook 上の Docker コンテナ内で稼働している Web アプリです。Web アプリはリクエストを処理し、レスポンスを生成して Android 端末に送り返します。
WebView によるレスポンスの処理

WebView はレスポンスを受け取り、それに基づいて表示内容を更新します。