Edited at

Nuxt.js で他の端末から確認する時にローカルの API サーバの IP アドレスに自動でアクセスする方法

ローカルで API のモックサーバやプロキシサーバを立ち上げることがあります。

そのうえで、Nuxt.js の dev サーバを他の端末で確認したいこともあります。

その場合、API URL を dev サーバを起動しているプライベート IP アドレスにする必要がありますが、それを手動で切り替えのは面倒なので、自動で切り替える設定になります。


nuxt.config.js

import internalIp from 'internal-ip'

export default async () => {
let apiBaseUrl = 'http://localhost:8000/api/v1'

if (process.env.NODE_ENV === 'develop') {
const ip = await internalIp.v4()
apiBaseUrl.replace(/localhost|127\.0\.0\.1|0\.0\.0\.0/, ip)
}

const nuxtConfig = {
axios: {
baseURL: apiBaseUrl
}
}

return nuxtConfig
}


ちなみに、僕は環境設定ファイルに API のベース URL を記載しているので、それを上書きする形で使っています。