はじめに
NuxtとRails APIで開発してる時にスマホで動作確認したい時ありますよね。
わざわざステージング環境にデプロイして動作確認するのは一手間。
そこでローカルでスマホからアクセスして動作確認する方法をメモしておきます。
Dockerを使って環境構築しており、PCとスマホを同じWiFiに接続していることが前提です。
僕はMacとiPhoneを利用するので端末がこれらと異なる場合はご自身で対応してください。
注意事項
同じネットワークを利用している端末だったらアクセスできてしまうため、カフェなどFree Wi-Fiなどでは避けること。
設定していく
1.IPアドレスを確認する
システム環境設定→ネットワークを開きます。
すると以下の画像の青線のようにプライベートIPアドレスがわかるのでコピーしておきましょう。
この例では192.168.11.9です。
2.Nuxtの設定
package.jsonの"dev": "nuxt"以下に変更します。
僕は8080番ポートを使っているのでご自身のポート番号に置き換えてください。
IPアドレスも先ほどメモしたご自身のものに置き換えましょう。
"scripts": {
"dev": "NUXT_HOST=192.168.11.9 NUXT_PORT=8080 nuxt"
}
続いてaxiosの設定です。
僕の場合はbaseURLがlocalhostになっています。
このままだとスマホでアクセスしてRails側にリクエストを投げる際、スマホ自身の3000番ポートを参照してしまいます。
なので先ほどメモしたIPアドレスとRails側のポート番号に変更します。
僕はRailsのデフォルトである3000番ポートを使っていますが、ご自身のものに置き換えてください。
//削除
config.baseURL = 'http://localhost:3000'
//追加
config.baseURL = 'http://192.168.11.9:3000'
3.Railsの設定
corsでhttp://192.168.11.9:8080を許可します。
corsの設定は他にもやり方もあるので下記通りではうまくいかないかもしれませんが、許可するオリジンにhttp://192.168.11.9:8080を追加すればOKです。
# 削除
config.allow_origins = ['http://localhost:8080']
# 追加
config.allow_origins = ['http://localhost:8080', 'http://192.168.11.9:8080']
これでhttp://192.168.11.9:8080（自分のIPアドレスとポート番号に変更する）にスマホでアクセスできると思います。
動作確認が終わったらファイルの変更を元に戻しましょう。