vue-cli-service serve listens on wrong port in some environments

metatick commented 4 years ago

Version

4.1.1

Reproduction link

https://NA-can-be-reproduced-in-all-projects.com

Environment info

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 10.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  4.0.5
    @vue/babel-preset-jsx:  1.1.1
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.1.1
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.5
    @vue/cli-plugin-babel: ^4.0.0 => 4.0.5
    @vue/cli-plugin-eslint: ^4.0.0 => 4.0.5
    @vue/cli-plugin-router:  4.0.5
    @vue/cli-plugin-vuex:  4.0.5
    @vue/cli-service: ^4.0.0 => 4.0.5
    @vue/cli-shared-utils:  4.0.5
    @vue/component-compiler-utils:  3.0.2
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.10
    vue-cli-plugin-vuetify: ^2.0.2 => 2.0.2
    vue-codemirror: ^4.0.6 => 4.0.6
    vue-cookies: ^1.5.13 => 1.5.13
    vue-eslint-parser:  5.0.0
    vue-gravatar: ^1.3.1 => 1.3.1
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.7.2
    vue-resource: ^1.5.1 => 1.5.1
    vue-router: ^3.1.3 => 3.1.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vue2-ace-editor: 0.0.15 => 0.0.15
    vuetify: ^2.1.0 => 2.1.9
    vuetify-loader: ^1.3.0 => 1.3.0
    vuetify-toast-snackbar: ^0.6.1 => 0.6.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Try to run vue-cli-service serve with a specific IP/port where the port is already in use on a different IP, Eg. port 443 is in use on 127.0.0.1, but free on 192.168.0.1.

Attempting to start vue-cli-service serve with 192.168.0.1:443 will result in port 444 (or higher) being bound instead of 443, even though the port was available

What is expected?

The correct IP/port to be bound

What is actually happening?

The next-highest-globally-available port is bound instead.

This problem stems from the host option not being set on portfinder, which causes portfinder to search for a port that is available on all IP addresses instead of the specific IP that vue-cli-service will listen on.

Passing {host: host} to getPortPromise when a valid host is provided would appear to resolve this issue:

https://github.com/vuejs/vue-cli/blob/6c2496418e2d6bb5e9a4f248c2e7a1b7a10d02d3/packages/%40vue/cli-service/lib/commands/serve.js#L106

pcornelissen commented 4 years ago

I have the same effect here:

> vue-cli-service serve --port 8081 

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 14822ms                                                                                                                                                                                                                                                                                   5:35:37 PM

  App running at:
  - Local:   http://localhost:8082/app/ 
  - Network: http://192.168.3.34:8082/app/

pcornelissen commented 4 years ago

Ah, the port is not free... Great then an error message would be more helpful

vuejs / vue-cli