node.js - start - ¿Cómo hacer que el servidor de desarrollo webpack se ejecute en el puerto 80 y en 0.0.0.0 para que sea de acceso público?

webpack port server

Question

Soy nuevo en todo el mundo nodejs / reactjs, así que me disculpo si mi pregunta suena tonta. Así que estoy jugando con reactabular.js .

Cada vez que hago un npm start , siempre se ejecuta en localhost:8080 .

¿Cómo lo cambio para que se ejecute en 0.0.0.0:8080 para que sea de acceso público? He estado tratando de leer el código fuente en el repositorio anterior, pero no pude encontrar el archivo que hace esta configuración.

Además, para agregar a eso, ¿cómo hago para que se ejecute en el puerto 80 si eso es posible?

Answer 1

Algo como esto funcionó para mí. Supongo que esto debería funcionar para ti.

Ejecute webpack-dev usando esto

webpack-dev-server --host 0.0.0.0 --port 80

Y configure esto en webpack.config.js

entry: [
    ''webpack-dev-server/client?http://0.0.0.0:80'',
     config.paths.demo
 ]

Nota Si está utilizando carga en caliente, deberá hacerlo.

Ejecute webpack-dev usando esto

webpack-dev-server --host 0.0.0.0 --port 80

Y configure esto en webpack.config.js

entry: [
    ''webpack-dev-server/client?http://0.0.0.0:80'',
    ''webpack/hot/only-dev-server'',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]

Answer 2

Así es como lo hice y parece funcionar bastante bien.

En su archivo webpack.config.js agregue lo siguiente:

devServer: {
    inline:true,
    port: 8008
  },

Obviamente, puede usar cualquier puerto que no entre en conflicto con otro. Menciono el problema del conflicto solo porque pasé alrededor de 4 horas. luchando contra un problema solo para descubrir que mis servicios se estaban ejecutando en el mismo puerto.

Answer 3

Configure webpack (en webpack.config.js) con:

devServer: {
  // ...
  host: ''0.0.0.0'',
  port: 80,
  // ...
}

Answer 4

Intenté esto para usar fácilmente otro puerto:

PORT=80 npm run dev

Answer 5

Lo siguiente funcionó para mí en el archivo de configuración JSON:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

Answer 6

Lo siguiente funcionó para mí:

1) En Package.json agregue esto:

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2) En webpack.config.js agregue esto en el objeto de configuración que exporta:

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3) Ahora en el tipo de terminal: npm run dev

4) Después de que el # 3 compila y está listo, simplemente diríjase a su navegador y http://GACDTL001SS369k:8080/ dirección como http://GACDTL001SS369k:8080/

Con suerte, su aplicación debería estar funcionando ahora con una URL externa a la que otros puedan acceder en la misma red.

PD: GACDTL001SS369k era mi nombre de computadora, así que reemplácelo con lo que sea suyo en su máquina.

Answer 7

Luché con algunas de las otras respuestas. (Mi configuración es: estoy ejecutando npm run dev , con webpack 3.12.0, después de crear mi proyecto usando vue init webpack en un Ubuntu 18.04 virtualbox en Windows. He configurado vagrant para reenviar el puerto 3000 al host).

• Desafortunadamente, poner npm run dev --host 0.0.0.0 --port 3000 no funcionó --- todavía se ejecutaba en localhost: 8080.
• Además, el archivo webpack.config.js no existía y crearlo tampoco ayudó.
• Luego encontré que los archivos de configuración ahora se encuentran en build/webpack.dev.conf.js (y build/webpack.base.conf.js y build/webpack.prod.conf.js ). Sin embargo, no parecía una buena idea modificar estos archivos, porque en realidad leen el HOST y el PUERTO de process.env .

Así que busqué sobre cómo configurar las variables de process.env y logré el éxito ejecutando el comando:

HOST=0.0.0.0 PORT=3000 npm run dev

Después de hacer esto, finalmente aparece "Su aplicación se está ejecutando aquí: http://0.0.0.0:3000 " y finalmente puedo verla navegando a localhost:3000 desde la máquina host.

EDITAR: Encontramos otra forma de hacerlo es editando el host de desarrollo y el puerto en config/index.js .

Answer 8

Para mí: cambiar el host de escucha funcionó:

.listen(3000, ''localhost'', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log(''Listening at localhost:3000'');
    });

fue cambiado a:

.listen(3000, ''0.0.0.0'', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log(''Listening at localhost:3000'');
    });

y el servidor comenzó a escuchar en 0.0.0.0

Answer 9

Probé las soluciones anteriores, pero no tuve suerte. Noté esta línea en el paquete de mi proyecto. Json:

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

},

Miré bin/webpack-dev-server.js y encontré esta línea:

.describe("port", "The port").default("port", 8080)

Cambié el puerto a 3000. Un enfoque de fuerza bruta, pero funcionó para mí.

Answer 10

Si está en una aplicación React creada con ''create-react-app'', vaya a su package.json y cambie

"start": "react-scripts start",

a ... ( unix )

"start": "PORT=80 react-scripts start",

o para ... ( ganar )

"start": "set PORT=3005 && react-scripts start"

Answer 11

Soy nuevo en el desarrollo de JavaScript y ReactJS. No pude encontrar una respuesta que funcione para mí, hasta que lo descubrí viendo el código de los scripts de reacción. Usando ReactJS 15.4.1+ usando react-scripts puede comenzar con un host y / o puerto personalizado usando variables de entorno:

HOST=''0.0.0.0'' PORT=8080 npm start

Espero que esto ayude a los recién llegados como yo.