バックエンドとフロント(Nuxt.js)開発中、手元のスマホで検証する際に同一ネットワーク内のAPIへIPでのアクセスを自動化する

6315 ワード
nuxt モバイル dotenv モバイル テキストリンク

バックエンドとフロントの両方を開発しているときに
手元のスマートフォン等からPCで開発中のバックエンドに接続したいことが多く
ローカルIPの固定されていない環境でenvのbaseURLを毎回変更するのが
面倒だったので自動でbaseURLのlocalhostを
自分のIPに書き換えるようにしたときの手順です

1.Nuxtで開発中のサイトをローカルIPで公開する

スマートフォンのブラウザからIPアドレスで
自分のパソコンにアクセスするために
nuxt.config.js にserverの項目を追記する
ポートは任意

export default {
  server: {
    port: 8000,
    host: '0.0.0.0'
  },

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (spa)         │
   │                                             │
   │   Listening on: http://192.168.0.31:8083/   │
   │                                             │
   ╰─────────────────────────────────────────────╯

yarn devするとlocalhost:8000ではなくipアドレスで起動することを確認する。

2. nodeでipアドレスを取得する際に必要なプラグインを入れる。

$ yarn add os -D

② corss-envで開発環境毎にファイルを読み込んでいるのでその後でdevelop環境だったとき
IPアドレスに置換する

nuxt.config.js

注意：nodeのバージョン10.15.xでは.flat()が使えないので適宜修正するかLTS推奨

const envSet = require(`./config/env/env.${process.env.NODE_ENV ||
  'development'}.js`)
if (envSet.env === 'development') {
  const os = require('os')
  const infs = os.networkInterfaces()
  const ip = Object.values(infs)
    .flat()
    .filter((i) => !i.internal && i.family === 'IPv4')[0].address
  envSet.apiBaseUrl = envSet.apiBaseUrl.replace('localhost', ip)
  console.log('API URL', envSet.apiBaseUrl)
}

export default {
  mode: 'spa',
  env: envSet,
...

再び yarn devして APIの向き先が自分のローカルIPになっていればOK

API URL http://192.168.0.31:4000/api/v1/                                                                                                         

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (spa)         │
   │                                             │
   │   Listening on: http://192.168.0.31:8083/   │
   │                                             │
   ╰─────────────────────────────────────────────╯

バックエンドのCORSの許可忘れないでね！