Comment faire fonctionner le serveur de développement Webpack sur le port 80 et sur 0.0.0.0 pour le rendre accessible au public?


187

Je suis nouveau dans le monde entier de nodejs / reactjs, donc excuses si ma question semble idiote. Donc je joue avec reactabular.js .

Chaque fois que je fais un, npm startça continue toujours localhost:8080.

Comment puis-je le modifier pour qu'il s'exécute 0.0.0.0:8080pour le rendre accessible au public? J'ai essayé de lire le code source dans le repo ci-dessus mais je n'ai pas réussi à trouver le fichier qui fait ce paramètre.

Aussi, pour ajouter à cela - comment le faire fonctionner sur le port 80si cela est possible?

Réponses:


242

Quelque chose comme ça a fonctionné pour moi. Je suppose que cela devrait fonctionner pour vous.

Exécutez webpack-dev en utilisant ceci

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

Et définissez ceci dans webpack.config.js

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

Remarque Si vous utilisez le chargement à chaud, vous devrez le faire.

Exécutez webpack-dev en utilisant ceci

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

Et définissez ceci dans 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
Salut, je suis nouveau dans ce domaine mais je voudrais utiliser redux pour mon script client. Le problème est que l'application est une application .net qui sert le contenu et les points de terminaison json. Donc, pour faire cela pendant le développement, je dois ajouter <script src="http://localhost:8080/webpack-dev-server.js"></script>à la page et installer un plugin permettant le cross domain? Ces outils semblent intéressants mais semblent supposer que votre serveur est également un nœud ou est-ce que je manque quelque chose?
HMR

1
Peut-être que cela m'aidera: webpack.github.io/docs/webpack-dev-server.html#proxy Je penserais à utiliser un proxy pour tout, sauf les demandes de fichiers javascript et certaines demandes faites par le serveur Webpack, hotloader et redux timeravel. so /data:image ..., ... .jset/sockjs-node...
HMR

Si vous obtenez un en-tête d'hôte non valide, vous devrez peut-être définir disableHostCheck sur true dans webpack.serve.config.js. Voir github.com/webpack/webpack-dev-server/issues/882 . Selon votre situation, cela peut être une faille de sécurité, alors soyez prudent.
Brian Deterling

Btw, soyez prudent lors de la liaison de 0.0.0.0 dans des lieux publics où quelqu'un d'autre peut se connecter à votre appareil. Cela peut entraîner le vol de vos données. Vous aurez peut-être besoin d'un pare-feu pour le serveur de développement, comme celui-ci: github.com/funbox/webpack-dev-server-firewall
Igor Adamenko

132

C'est ainsi que je l'ai fait et cela semble bien fonctionner.

Dans votre fichier webpack.config.js, ajoutez ce qui suit:

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

Évidemment, vous pouvez utiliser n'importe quel port qui n'est pas en conflit avec un autre. Je mentionne la question du conflit uniquement parce que j'ai passé environ 4 heures. combattre un problème uniquement pour découvrir que mes services fonctionnaient sur le même port.


je suppose que c'est au lieu de spécifier l'hôte et le port dans la section d'entrée du fichier de configuration?
JoeTidee

2
Pourriez-vous s'il vous plaît ajouter un lien vers la documentation ?
aqueux

1
Ajouter simplement en ligne: true a fonctionné pour moi. BTW le fichier webpack que j'ai édité était `` webpack.dev.conf.js (en mars 2018).
Sean O

71

Configurez webpack (dans webpack.config.js) avec:

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

2
ça ne marche pas pour. devServer: {inline: true, host: '0.0.0.0', port: 8088},
NK Chaudhary

Cela fonctionne pour moi quand j'utilise (webpack.config): devServer: {host: 'xx.xx.xx.xxx', port: 8089},
Dijo

Cela a résolu un problème très étroitement lié pour moi en essayant de suivre le cours Modern React with Redux sur Udemy . J'exécute mon environnement de développement sur Windows dans une boîte virtuelle Vagrant . Le cours ne fournit absolument aucune indication sur la configuration de l'environnement de développement.
Vince

Oui, cela a résolu un problème que j'avais en cours d'exécution de webpack sur une instance Cloud9. Merci!
Maniaque

J'ai pu modifier le numéro de port à l'aide de l'extrait de code ci-dessus, mais l'hôte n'a toujours pas changé. J'ai essayé de rendre l'hôte 0.0.0.0 afin que je puisse accéder au site à partir de l'adresse IP mais cela n'a pas fonctionné. Une aide pour y parvenir?
Rito

27

Je suis nouveau dans le développement JavaScript et ReactJS. Je n'ai pas pu trouver une réponse qui fonctionne pour moi, jusqu'à ce que je la trouve en visualisant le code de react-scripts. En utilisant ReactJS 15.4.1+ en utilisant des scripts de réaction, vous pouvez démarrer avec un hôte et / ou un port personnalisé en utilisant des variables d'environnement:

HOST='0.0.0.0' PORT=8080 npm start

J'espère que cela aidera les nouveaux arrivants comme moi.


C'est la réponse parfaite! Merci
Sunny Chaudhari

16

La suite a fonctionné pour moi -

1) Package.jsonAjoutez ceci:

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

2) webpack.config.jsAjoutez ceci sous l'objet de configuration que vous exportez:

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

3) Maintenant sur le type de terminal: npm run dev

4) Une fois que le n ° 3 est compilé et prêt, rendez-vous simplement dans votre navigateur et entrez l'adresse comme http://GACDTL001SS369k:8080/

Espérons que votre application fonctionne maintenant avec une URL externe à laquelle d'autres personnes peuvent accéder sur le même réseau.

PS: GACDTL001SS369kétait le nom de mon ordinateur, alors remplacez-le par le vôtre sur votre machine.


5

Si vous êtes dans une application React créée avec 'create-react-app', accédez à votre package.jsonet modifiez

"start": "react-scripts start",

à ... ( unix )

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

ou pour ... ( gagner )

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


ou éditez node_modules / react-scripts / script / start.js et modifiez DEFAULT_PORT et HOST. Protégez simplement le fichier lors de l'écrasement lorsque les nouvelles versions mettent à jour les fichiers lors de la mise à jour npm.
Rogelio Triviño

Ça marche. merci
Yang Wang

2

J'ai eu du mal avec certaines des autres réponses. (Ma configuration est la suivante: je suis en cours d'exécution npm run dev, avec webpack 3.12.0, après avoir créé mon projet en utilisant vue init webpackune boîte virtuelle Ubuntu 18.04 sous Windows. J'ai configuré vagrant pour transférer le port 3000 vers l'hôte.)

  • Malheureusement, la mise npm run dev --host 0.0.0.0 --port 3000ne fonctionnait pas - elle fonctionnait toujours sur localhost: 8080.
  • De plus, le fichier webpack.config.jsn'existait pas et sa création n'a pas non plus aidé.
  • Ensuite, j'ai trouvé que les fichiers de configuration se trouvent maintenant dans build/webpack.dev.conf.js(et build/webpack.base.conf.jset build/webpack.prod.conf.js). Cependant, cela ne semblait pas être une bonne idée de modifier ces fichiers, car ils lisent en fait l'hôte et le port à partir de process.env.

J'ai donc cherché comment définir les variables process.env et obtenu le succès en exécutant la commande:

HOST=0.0.0.0 PORT=3000 npm run dev

Après avoir fait cela, j'obtiens enfin "Votre application s'exécute ici: http://0.0.0.0:3000 " et je peux enfin le voir en naviguant vers localhost:3000la machine hôte.

EDIT: Une autre façon de le faire est de modifier l'hôte et le port de développement config/index.js.


1

La suite a fonctionné pour moi dans le fichier de configuration JSON:

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

1

Pour moi: changer l'hôte d'écoute a fonctionné:

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

a été changé en:

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

et le serveur a commencé à écouter sur 0.0.0.0


0

J'ai essayé les solutions ci-dessus, mais je n'ai pas eu de chance. J'ai remarqué cette ligne dans le package.json de mon projet:

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

},

J'ai regardé bin/webpack-dev-server.jset trouvé cette ligne:

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

J'ai changé le port en 3000. Un peu une approche de force brute, mais cela a fonctionné pour moi.


0

Dans package.json, modifiez la valeur "start" comme suit

Remarque: exécutez $ sudo npm start , vous devez utiliser sudo exécutez pour exécuter des scripts de réaction sur le port 80

entrez la description de l'image ici


0

Pour moi, ce code a fonctionné. Ajoutez-le simplement à votrepackage.json fichier:

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

Et exécutez le script "build" en exécutant npm run build


-1

J'ai essayé ceci pour utiliser facilement un autre port:

PORT=80 npm run dev
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.