【Nuxt2】dev環境に外部デバイスでアクセスする

外部デバイスがアクセスするための手順

基本的に nuxt.config.js の設定だけで完結します

nuxt.config.js を設定する

外部から接続できるように、server を追加で記述します

port 等はお好みで設定してください

import path from 'path'import fs from 'fs'
export default {  server: {    port: 3000,    host: '0.0.0.0',  }}

同じネットワークに接続されるデバイスであれば、発行されるURLにアクセスすることでページを閲覧できるかと思います

HTTPS化する

カメラを使うなど、HTTPS化する必要がある場合は、いわゆるオレオレ証明書を発行してデバイスを騙します

macOSの場合は、標準搭載アプリの「キーチェンアクセス」から作成することができます

Windows の場合は、現在模索中です...

証明書が発行できたら、nuxt.config.js と同じ階層に server.key と server.crt ファイルを配置します

import path from 'path'import fs from 'fs'
export default {  server: {  port: 3000,  host: '0.0.0.0',    https: {    key: fs.readFileSync(path.resolve(__dirname, 'server.key')),    cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))    }  }}

この状態で npm run dev や yarn dev 等により起動すると、https用のURLが発行されるかと思います

これでスマホなどからデバッグできる状態になりました 🎉