デザインやレイアウト、プログラミング動作などモバイルエミュレーターでは正常でも、実機のスマホでは崩れていたり動かないということが時々あります。

そこでローカルでの開発環境でも、実機のスマホで確認しながら開発できるようにする設定です。

Contents

設定方法

cross-envをインストール

% yarn add --dev cross-env

package.jsonの修正

// package.json

"scripts": {
  "dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

初期状態は"dev": "nuxt"になっているので、cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333を追加します。

確認方法

PCとスマホを同じwi-fiに接続

開発しているPCと実機確認をしたいスマホを同じwi-fiに接続し、相互間でアクセスできるようにします。

Nuxt.jsの起動

yarn devのコマンドを実行してNux.jsを起動します。

スマホでアクセス

Listening on: http://192.168.1.21:3333/のようにNuxt.jsを起動後にURLが表示されるので、スマホでアクセスするとローカルで開発中の画面が表示されます。

【注意】Safariのバグについて

Nuxt.jsはサーバを立ち上げている間、ホットリロードをしてくれるのですが、Safariで無限ループしてしまう時があります。

以下のような感じです。

Safariバグ無限ホットリロード
GitHubより引用

なので無限ループしないようにnuxt.config.jsのbuild内にfilenamesを追加します。

// nuxt.config.js

build: {
  ...

  filenames: {
    app: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js',
    chunk: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js'
  }

  ...
}

これでSafariでの無限ループの症状は出なくなるかなと思います。

さいごに

僕の環境だけかもしれませんが、確認作業をする時にアクセスしづらかったりと、やりづらい部分があるのですが、実機のスマホで確認しながら開発できるのはデバッグする時に原因究明がしやすいので安心です。

参考