Sockjs-node webpack dev server возвращает ошибку 404

В функции, которую я установил в devServer.before в моем vue.config.js файле, я создал свои собственные веб-сокеты, используя Socket.io на том же порту, что и мой devSever. Когда функция вернулась, devServer не смог использовать этот порт для веб-сокетов, поэтому ему не удалось запустить sockjs-node. Поэтому, когда клиент внешнего интерфейса пытался подключиться к devServer, запросы направлялись к моим сокетам, а не к сокетам devServer, и он их игнорировал. Отсюда 404 ошибки.

Вот мой исходный код:

// server.js
const { createServer } = require('http')
const io = require('socket.io')
const addSocketEvents = require('./socket-api')

const port = process.env.PORT || 8080

module.exports = {
    port,
    configure(app) {
        // `app` is an instance of express

        // add the websockets
        const httpServer = createServer(app)
        socket = io(httpServer, {
            path: '/socket-api'
        })
        addSocketEvents(socket)

        // starts the server
        // cannot use app.listen() because that will not start the websockets
        httpServer.listen(port)
    }
}

// vue.config.js
const { port, configure } = require('./server')

module.exports = {
    devServer: {
        before: configure,
        public: `localhost:${port}`,
    },
}

Чтобы решить эту проблему, мне нужно было разрешить devServer использовать исходный порт для sockjs-node и запускать мои сокеты на другом порту. Однако, поскольку мне нужно использовать один и тот же порт в производственной среде (из-за ограничений моего текущего хостинг-провайдера), я хочу, чтобы мои сокеты использовали другой порт только при запуске devServer. Для этого я просто создал другой httpServer и запустил его на другом порту, а затем создал прокси в конфигурации devServer для этого порта. В своей функции configure я просто проверяю, работает ли она в dev или prod, и действую соответственно.

Мой рабочий сервер - это простой экземпляр express, который после создания вызывает ту же функцию configure. Это позволяет мне разместить весь код запуска в одном месте.

Вот мой новый код:

// server.js
const { createServer } = require('http')
const io = require('socket.io')
const addSocketEvents = require('./socket-api')

const port = process.env.PORT || 8080
const proxyPort = 8081

module.exports = {
    port,
    proxyPort,
    configure(app) {
        // `app` is an instance of express

        // add the websockets
        let httpServer, socketPort
        if (process.env.NODE_ENV === 'development') {
            httpServer = createServer()
            socketPort = proxyPort
        } else {
            httpServer = createServer(app)
            socketPort = port
        }

        // adds the socket-api to be used via websockets
        socket = io(httpServer, {
            path: '/socket-api'
        })
        addSocketEvents(socket)
        
        // starts the server
        httpServer.listen(socketPort)
    }
}

// vue.config.js
const { port, configure } = require('./server')

module.exports = {
    devServer: {
        before: configure,
        public: `localhost:${port}`,
        proxy: {
            '/socket-api': {
                target: `http://localhost:${proxyPort}`,
                ws: true
            }
        }
    },
}