Problems encountered:

Is there a public number in the development of the time, the local need to start port 80, but you use scaffolding port number from the lowest 1024 start? If you’ve ever had this problem. The following article will take you through the problem.


Standing on the shoulders of giants

Remember when we first started using vue scaffolding, the sidefile was in the build folder. When we were doing local development, sometimes it appeared when we started two services: throw new ERR_SERVER_ALREADY_LISTEN(); Error. The mistake is easy to understand. Your port number is already occupied.

So at the time of development, this restriction, only one service can be started locally. When doing multiple business development. It’s a little bit tedious.

Fortunately, the new version of scaffolding has a lot of improvements, making it zero-configured without a configuration file. It also allows us to start multiple services locally. If we find that the port is in use, the port number +1 will help you start the service.

It feels like big guys, fill in the hole for us so we can have a happier development environment. Good nonsense not to say or principle.


To explore the way of thinking


import { getPort } from 'portfinder'; getPort( { port: config.devServer! .port, }, (err, port) => {if (err) {
        console.log(err);
        return;
      }

      logServerInfo(port);
      runDevServer(port, config);
}Copy the code


When we dig through the source code, we find this library. If you look at the code, it basically says, we call a function, we can return a function that is not occupied. So how does his underlying principle work?


Go to Github and search for a quick link here: PortFinder


The principle of found

Use NET to link to each port. If a port number is available, it will return the available port number to you. Here’s a simple version of the code:


const net = require('net');

var server = net.createServer(() => { })

functionNextPort (port) {// Port number + 1return port + 1;
};

function getport(port, callback) {
  functionOnListen (data) {// link succeeded, close port, clear log event callback(null, port); server.removeListener('error', onError);
    server.close(); 
  }

  functionOnError (err) {// Link failed port +1 getPort (nextPort(port))} server.once('error', onError); // If the port is not connected successfully, trigger server.once('listening', onListen); // Triggers server.Listen (port) when the port connection is successful; // } getport(1024, (err,port) => { console.log(port); })Copy the code


After testing, it is found that the port number of our code can be started from 80. But when we use the scaffolding third-party package, why do we start from port 1024 every time we set port 80?


conclusion

After debugging after power failure, it is found that from port 80 to port 1023, the onError function is entered, and error information is obtained:

Error: listen EACCES: permission denied 127.0.0.1:80

Permission denied, 😯, sudo NPM run dev; It turns out the boot is from port 80.


Bottom line: When you are not an administrator, you cannot use ports below 1024.


The analysis is finished, call it a day