¿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?


180

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 startsiempre se ejecuta localhost:8080.

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

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

Respuestas:


233

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()]

1
Hola, soy nuevo en esto, pero me gustaría usar redux para mi script de cliente. El problema es que la aplicación es una aplicación .net que sirve el contenido y los puntos finales json. Entonces, para hacer esto durante el desarrollo, ¿debo agregar <script src="http://localhost:8080/webpack-dev-server.js"></script>a la página e instalar algunos complementos que permitan el complemento? Estas herramientas parecen interesantes pero parecen suponer que su servidor también es nodo o ¿me falta algo?
HMR

1
Tal vez esto me ayude: webpack.github.io/docs/webpack-dev-server.html#proxy Creo que usaría proxy para todo excepto las solicitudes de archivos javascript y algunas solicitudes realizadas por el servidor webpack, hotloader y redux timetravel. así /data:image ..., ... .jsy/sockjs-node...
HMR

Si obtiene un encabezado de host no válido, es posible que deba establecer disableHostCheck en true en webpack.serve.config.js. Consulte github.com/webpack/webpack-dev-server/issues/882 . Dependiendo de su situación, puede ser un agujero de seguridad, así que tenga cuidado.
Brian Deterling

131

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.


Supongo que esto es en lugar de especificar el host y el puerto en la sección de entrada del archivo de configuración.
JoeTidee

2
¿Podría agregar un enlace a la documentación ?
acuosa

1
Simplemente agregando en línea: verdadero funcionó para mí. Por cierto, el archivo webpack que edité fue 'webpack.dev.conf.js (a partir de marzo de 2018).
Sean O

68

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

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

2
no está funcionando para devServer: {en línea: verdadero, host: '0.0.0.0', puerto: 8088},
NK Chaudhary

Me funciona cuando uso (webpack.config): devServer: {host: 'xx.xx.xx.xxx', puerto: 8089},
Dijo

Esto resolvió un problema muy relacionado para mí al intentar seguir el curso Modern React with Redux en Udemy . Estoy ejecutando mi entorno de desarrollo en Windows en una caja virtual Vagrant . El curso no proporciona absolutamente ninguna orientación sobre la configuración del entorno de desarrollo.
Vince

Sí, esto solucionó un problema que tenía al ejecutar webpack en una instancia de Cloud9. ¡Gracias!
Maniaque

Pude cambiar el número de puerto usando el fragmento anterior pero el host todavía no cambió. Traté de hacer que el host sea 0.0.0.0 para poder acceder al sitio desde la dirección IP, pero no funcionó. ¿Alguna ayuda sobre cómo lograr esto?
Rito

26

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.


16

Lo siguiente funcionó para mí:

1) En Package.jsonagregar esto:

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

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

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

3) Ahora en tipo de terminal: npm run dev

4) Después de que el # 3 compila y está listo, simplemente diríjase a su navegador y escriba la 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: GACDTL001SS369kera mi nombre de computadora, así que reemplácelo con lo que sea suyo en su máquina.


4

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

"start": "react-scripts start",

a ... ( unix )

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

o para ... ( ganar )

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


o edite node_modules / react-scripts / script / start.js y cambie DEFAULT_PORT y HOST. Simplemente proteja el archivo al sobrescribir cuando las nuevas versiones actualicen archivos en la actualización de npm.
Rogelio Triviño

1

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"
},

1

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 webpackun Ubuntu 18.04 virtualbox en Windows. Tengo un vagabundo configurado para reenviar el puerto 3000 al host).

  • Desafortunadamente, poner npm run dev --host 0.0.0.0 --port 3000no funcionó --- todavía se ejecutaba en localhost: 8080.
  • Además, el archivo webpack.config.jsno 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.jsy 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 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 localhost:3000desde la máquina host.

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


1

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


0

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.jsy 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í.


0

En package.json cambie el valor de "inicio" de la siguiente manera

Nota: Ejecute $ sudo npm start , debe usar sudo para ejecutar scripts de reacción en el puerto 80

ingrese la descripción de la imagen aquí


0

Para mí, este código funcionó. Solo agrégalo a tu package.jsonarchivo:

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

Y ejecute el script "build" ejecutando npm run build


-1

Intenté esto para usar fácilmente otro puerto:

PORT=80 npm run dev
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.