😊

vue-cli-serviceがport1024未満では動作しなくなった件

2022/08/06に公開

はじめに

vue cliで作成したプロジェクトでは以下のコマンドで開発サーバーを起動できます。

npm run serve

開発サーバーのポートはvue.config.jsを変更することで変更が可能です。

vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    port: 1023,
  },
  transpileDependencies: true
})

ただしport番号が1024未満の場合についてはルート権限が必要になるため、以下のようなコマンドで動かす必要がありました。

sudo npm run serve

これはかつては正常に動作してましたが、最近は正しく動かなくなりました。
https://github.com/vuejs/vue-cli/issues/6894

原因

実は、「sudo npm run serve」で正しく1024未満のポートを使用できるか否かはnpmのバージョンに依存します。
npm@6の場合はルート権限で動作し正しく1024未満のポートで動作しますが、npm@7以上になるとルート権限で動作せず、1024未満のポートは利用できません。

npmのドキュメントを確認するとroot権限での動作について挙動がnpm@6とnpm@7で変更されていることが確認できます。

この問題を回避して1024未満のポートで開発サーバーを動かすには「npm run」を経由せず、以下のように直接、vue-cli-serviceを実行する必要があります。

sudo node_modules/.bin/vue-cli-service serve

参考

Discussion