【ngrokとは】
ローカルホストに展開されたWebサーバーやデータベース、APIを一時的なURLを通じてインターネットに公開するためのツールです。
これはトンネリングソフトウェアと呼ばれ、インターネット上の他のマシンから自身のローカルで実行されているアプリやサーバーに外部からアクセスすることが可能になります。
リアルタイムのデバッグやテスト、デモンストレーションなどにとても便利です。
一部の基本機能を無料で提供していますが、追加機能を利用するためには有料プランにアップグレードする必要があります。
ngrok公式サイトはこちら
https://ngrok.com/
【開発環境】
Flutter 3.7.7
Dart 2.19.4
Laravel 8.70.2
ngrok 3.3.1
今回はFlutterとLaravelでのAPI通信に使用しました。
スマホアプリを開発していると、API通信でローカルサーバーまでのネットワーク経路を作る必要があると思います。
私自身、仕事でローカルサーバーにアクセスをして開発をしていたのですが、困った事が発生した為、同僚に相談をしたところngrokを紹介して頂きました。
初めて使ってみて凄く便利でしたしサクッとできるので紹介したいと思います。
ngrokの導入手順はここでは紹介しません。
【API通信方法】
- ngrokを外部公開する
- Flutterでngrokで発行されたURLを指定する
- Laravelで通信が来ているか確認する
１.ngrokを外部公開する
①コマンドラインを開きます。
WindowsではCommand PromptやPowerShellを、MacではTerminalを開きます。
②ngrokを実行します。
ローカルネットワーク上のアプリを公開するには、そのアプリケーションが稼働しているポートを指定する必要があります。例えば、アプリケーションがlocalhostのポート8080で稼働しているとすれば、以下のコマンドを実行します：
./ngrok http 8080
ngrokを実行すると、以下のような出力が表示されます：
Session Status online
Account your_email@example.com (Plan: Free)
Version 3.3.1
Region Japan (jp)
Web Interface http://127.0.0.1:4040
Forwarding https://your-random-subdomain.ngrok-free.app -> http://localhost:8080
API通信で利用するURLは Forwarding のhttps://xxxxxxxxx.app までになります。
2.Flutterでngrokで発行されたURLを指定する
http.get(Uri.parse(https://xxxxxxxxx.app/laravel/api);
一点注意が必要です。
ngrokは一時的に外部へ公開しているだけなので、ngrokが稼働している間だけ有効となります。
ngrokを再起動すると新たなURLが生成されるのでForwarding のURLが変更されます。
ですので、その都度Flutterで指定したURLを変更しないとAPI通信ができません。
もし、通信できないなどの時はURLも疑ってみてください。
3.Laravelで通信が来ているか確認する
if (file_exists(__DIR__.'/../storage/framework/maintenance.php')) {
require __DIR__.'/../storage/framework/maintenance.php';
}
上記のコードの部分にブレークポイントをはる。
FlutterでAPIを叩いて、ブレークが止まれば通信が来ているので成功です。
【最後に】
ngrokはローカルネットワーク上のアプリケーションを公開することができますが、セキュリティには十分注意する必要があります。しかし、今回紹介をしていませんがngrokは簡単に導入する事がき、時間や費用の削減ができる事、発行したURLは停止しない限り時間無制限でアクセスできる事も魅力の一つだと思います。お時間あれば一度使用してみてください。