Nuxt.jsのポート指定

こんにちわ、ななきです。

また二ヶ月空いてしまいました。

最近Nuxt.jsを触ったりしてたのでポート指定のメモでも残しとこうと思います。

Nuxt.jsを触った人はご存知だと思いますが、デフォルトでlocalhost:3000で動きます。

ただ、デフォルトでは0.0.0.0:3000の形式ではアクセスできないのでそれを可能にしたいという話です。

package.jsonへ追記

設定自体は簡単で、下記のようにpackage.jsonに追記をするだけです。

 

これは公式でも記載があるので簡単ですね。
https://ja.nuxtjs.org/faq/host-port/

さて、この設定により0.0.0.0:3000でアクセスできるようになりました。

これで同一ネットワーク内であればIPアドレスさえわかればスマホでも他人のPCからでも0.0.0.0:3000のURLでアクセス出来ます。

このIPアドレスの確認方法はとても簡単で
システム環境設定>ネットワークを開くと確認出来ます。

また、下記のアプリを使うとメニューバーにIPアドレスを表示してくれるので環境が変わってもすぐ確認出来て便利です。https://www.monkeybreadsoftware.de/Software/IPinmenubar.shtml

まとめ

スマホ等の実機で確認したい場合に変更のたびにステージング環境へアップロードしていたという友人の話を聞いてまとめてみました。

毎回アップロードして確認というのはめんどくさいので、
これからはこの方法でローカル環境で確認するといいと思います。

Archives

MasatoChiba
Frontend Developer