「Nuxt.js」の記事一覧

Nuxt.jsの起動コマンドnpm run devを実行するとhttp://localhost:3000 で開発サーバが立ち上がります。 localhostをローカルIPに変更 ネットワークグループ内でWi-fi接続しているスマートフォンでも開発しながら表示確認を行いたいのでホスト名をデフォルトのlocalhostから192.168.1.*などのローカルIPに変更します。 "scripts": { "dev": "nuxt" } package.jsonのscriptsへ登録されている起動コマンドへこのように↓設定を追記するとホスト名とポート番号を変更できます。 "scripts": { "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt" } ホスト名は0.0.0.0にしておくと、自動でローカルIPに置き換えてくれます。 参考：ホストとポート番号を変更するには？ SSLを設定 これだけではhttpからはじまるアドレスなので、navigator.geolocationなどhttpsはじまりのアドレスでないと差し支えのある技術が使えず面倒です。 Nuxtをhttpsで起動させたい場合は、起動スクリプトを設置して、npm run dev経由で実行されていたnuxtのかわりに実行します。 証明書（*.ket,*.crt）は、opensslコマンドやmkcertなどを利用して生成し開発環境内の任意の場所へ置いておきます。 起動スクリプト内で証明書を参照している箇所があるので、パスが合うよう修正しておきます。 const options = { key: fs.readFileSync('XXXX.key'), cert: fs.readFileSync('XXXX.crt') }; package.jsonにscriptを追加します。server.jsという名前で起動スクリプトを設置し、nodeで実行する場合はこうなります。 "scripts": { "devHttps": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 node server.js", "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt" } Node.jsがES2015書式に対応していなかった さっそくnpm run devHttpsを実行すると… 起動スクリプトがインポートしているnuxt.config.js内のexport defaultでエラーになって実行できない！ 調べてみると、Node.jsがES2015の書式を実行できないのが原因でした。 nodeのスクリプトをbabelでトランスパイルしてくれる@babel/nodeをインストール $npm install -D @bable/node @bable/nodeを使うために、nodeをbabel-nodeと書き換えます。 "scripts": { "devHttps": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 babel-node server.js", "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt" } これで、npm run devHttpsを実行するとhttps://192.168.1.1:3333 のようhttps://ローカルIP:portでアクセスできるNuxtを起動できました！

webdev

「Nuxt.js」の記事一覧

Nuxtのlocalhostをhttps://ローカルIP:portにする