経緯
Laravel Homestead + Reactのローカル環境のWebアプリケーション開発を経てReact NativeとExpoを利用したアプリ開発をしてみようとした時に、Webで構築したAPIをアプリから使えるようにする方法をまとめておきます。
mDNSとは
multicast Domain Name Serverの略です。
通常の名前解決ではDNSサーバに問い合わせを行いますが、mDNSではマルチキャスト転送を利用して同一ネットワーク内のデバイスに問い合わせる事で名前解決を行います。
つまりMacとiPhoneで同一ネットワーク環境を利用していれば、Macで用意したLaravel Homesteadのローカル開発環境にiPhoneからアクセスできる、ということです。
設定方法
Laravel Homesteadの公式リファレンスにある【Homestead設定 > ホスト名の解決】の項を見ると、mDNSを利用してホスト名を公開できると記載されています。
実際に必要な設定を以下に記載していきます。
hostsの設定
192.168.10.10 homestead
まずはMac側のhostsの設定です。
homesteadはデフォルトのhomestead.testのトップレベルドメインを抜いた部分に対応して、IPアドレスもLaravel Homestead環境のデフォルトのものです。
それぞれ変更している方は適宜自身の環境に合わせて設定してください。
$ ping homestead
PING homestead (192.168.10.10): 56 data bytes
64 bytes from 192.168.10.10: icmp_seq=0 ttl=64 time=0.527 ms
64 bytes from 192.168.10.10: icmp_seq=1 ttl=64 time=0.348 ms
64 bytes from 192.168.10.10: icmp_seq=2 ttl=64 time=0.328 ms
これでhttp://homesteadでアクセスできる様になりました。
Homestead.yamlの設定
hostname: homestead
次にHomesteadの設定です。
先ほど紹介した公式リファレンスにも記載されている上記の一文をHomestead.yamlの最下部にでも追記します。
これを記述することでiPhoneからhomestead.localにアクセスした時に、mDNSを利用してMacのhostsに記述したhomesteadと同じ名前解決が行われます。
ping homestead.local
PING homestead.local (192.168.3.14): 56 data bytes
64 bytes from 192.168.3.14: icmp_seq=0 ttl=64 time=0.683 ms
64 bytes from 192.168.3.14: icmp_seq=1 ttl=64 time=0.264 ms
64 bytes from 192.168.3.14: icmp_seq=2 ttl=64 time=0.377 ms
これでhttp://homestead.localに同一ネットワークを利用しているiPhoneからアクセスできる様になりました。
設定としてはこれで終わりですが、アプリからAPIサーバとして利用する場合は、
fetch('http://homestead.local/XXXXX')
この様に記載してあげれば大丈夫なはずです。
Vagrantを利用していて名前解決できない場合
Vagrantを利用しているとhostsとHomestead.yamlの設定だけでは出来ないことがある様です。
そんな時はVagrantfileに以下を追記して、Vagrantのネットワークアダプターをbridgeに変更することで名前解決ができるようになると思います。
追記した後はvagrant reload --provisionをして再度試してみてください。
config.vm.network "public_network", bridge: 'en0: Wi-Fi (AirPort)'
最後に
これでReact Native + Expo + Laravel Homesteadの環境だけでアプリ・API開発ができるようになりました！