LoginSignup
0

More than 3 years have passed since last update.

【React Native】Macで構築したLaravel Homesteadのローカル環境にExpoで開発しているアプリからアクセスする方法

Last updated at Posted at 2020-03-05

経緯

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の設定

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の設定

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をして再度試してみてください。

Vagrantfile
config.vm.network "public_network", bridge: 'en0: Wi-Fi (AirPort)'

最後に

これでReact Native + Expo + Laravel Homesteadの環境だけでアプリ・API開発ができるようになりました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0