it-swarm.com.de

Wie kann der webpack dev-Server auf Port 80 und 0.0.0.0 ausgeführt werden, um ihn öffentlich zugänglich zu machen?

Ich bin neu in der ganzen Welt von nodejs/reactjs, also entschuldige mich, wenn mein qs dumm klingt. Ich spiele also mit dieserreacts-App hier rum: https://github.com/bebraw/reactabular

Immer wenn ich "npm start" mache, läuft es immer auf localhost: 8080

Wie ändere ich es so, dass es unter 0.0.0.0:8080 läuft, um es öffentlich zugänglich zu machen? Ich habe versucht, den Quellcode im obigen Repo zu lesen, konnte jedoch die Datei nicht finden, die diese Einstellung ausführt.

Dazu noch hinzufügen - wie kann ich es auf Port 80 ausführen, wenn das überhaupt möglich ist?

Vielen Dank.

143
90abyss

So etwas hat bei mir funktioniert. Ich vermute, das sollte für Sie funktionieren. 

Führen Sie webpack-dev damit aus

webpack-dev-server --Host 0.0.0.0 --port 80

Und dies in webpack.config.js einstellen

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

Hinweis Wenn Sie Hot Load verwenden, müssen Sie dies tun.

Führen Sie webpack-dev damit aus

webpack-dev-server --Host 0.0.0.0 --port 80

Und dies in webpack.config.js einstellen

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

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

So habe ich es gemacht und es scheint ziemlich gut zu funktionieren.

Fügen Sie in Ihrer Datei webpack.config.js Folgendes hinzu:

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

Natürlich können Sie jeden Port verwenden, der nicht mit einem anderen in Konflikt steht. Ich erwähne die Konfliktfrage nur, weil ich ungefähr 4 Stunden verbracht habe. Um ein Problem zu beheben, müssen Sie feststellen, dass meine Dienste auf demselben Port laufen.

114
bkane56

Konfigurieren Sie webpack (in webpack.config.js) mit:

devServer: {
  // ...
  Host: '0.0.0.0',
  port: 80,
  // ...
}
51

Ich bin neu in JavaScript-Entwicklung und ReactJS. Ich konnte keine Antwort finden, die für mich funktioniert, bis ich sie herausfand, indem ich den Code für die reag-Skripte sah. Wenn Sie ReactJS 15.4.1+ mithilfe von Reakt-Skripts verwenden, können Sie mit einem benutzerdefinierten Host und/oder Port beginnen, indem Sie Umgebungsvariablen verwenden:

Host='0.0.0.0' PORT=8080 npm start

Hoffentlich hilft dies Neulingen wie mir.

18
Anonymous

Folgendes arbeitete für mich - 

1) In Package.json füge folgendes hinzu:

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

2) In webpack.config.js fügen Sie dies unter dem exportierten Konfigurationsobjekt hinzu:

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

3) Jetzt am Terminaltyp: npm run dev 

4) Nach # 3 kompiliert und fertig, gehen Sie zu Ihrem Browser und geben Sie die Adresse als http://GACDTL001SS369k:8080/ ein.

Ihre App sollte jetzt hoffentlich mit einer externen URL arbeiten, auf die andere Benutzer im selben Netzwerk zugreifen können.

PS: GACDTL001SS369k war mein Computername, ersetzen Sie ihn also durch das, was Sie auf Ihrem Computer haben.

9
Sumeet

Wenn Sie sich in einer React-Anwendung befinden, die mit 'create -rease-app' erstellt wurde, gehen Sie zu Ihrem package.json und ändern Sie ihn 

"start": "react-scripts start",

zu ... ( unix )

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

oder an ... ( win )

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

4
R01010010

Folgendes arbeitete für mich in der JSON-Konfigurationsdatei:

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

Ich habe versucht, auf einfache Weise einen anderen Port zu verwenden:

PORT=80 npm run dev
0
kyrre

Ich habe die oben genannten Lösungen ausprobiert, hatte aber kein Glück. Ich habe diese Zeile in package.json meines Projekts bemerkt:

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

},

Ich habe mir bin/webpack-dev-server.js angesehen und diese Zeile gefunden:

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

Ich habe den Port auf 3000 geändert. Ein bisschen brutale Annäherung, aber es hat für mich funktioniert.

0
Sparky1

Ich hatte Probleme mit einigen anderen Antworten. (Mein Setup ist: Ich führe npm run dev mit Webpack 3.12.0 aus, nachdem ich mein Projekt mit vue init webpack auf einer Ubuntu 18.04 Virtualbox unter Windows erstellt habe. Ich habe vagrant so konfiguriert, dass Port 3000 an den Host weitergeleitet wird.)

  • Leider hat das Setzen von npm run dev --Host 0.0.0.0 --port 3000 nicht funktioniert - es lief immer noch auf localhost: 8080.
  • Außerdem existiert die Datei webpack.config.js nicht und das Erstellen half auch nicht.
  • Dann fand ich, dass sich die Konfigurationsdateien jetzt in build/webpack.dev.conf.js (und build/webpack.base.conf.js und build/webpack.prod.conf.js) befinden. Es schien jedoch keine gute Idee zu sein, diese Dateien zu ändern, da sie tatsächlich Host und PORT von process.env lesen.

Also suchte ich nach wie man Variablen von process.env setzt und erreichte Erfolg, indem ich den Befehl ausführte:

Host=0.0.0.0 PORT=3000 npm run dev

Nachdem ich das getan habe, bekomme ich endlich "Ihre Anwendung läuft hier: http://0.0.0.0:3000 " und ich kann es endlich sehen, indem ich vom Host-Rechner zu localhost:3000 browse.

BEARBEITEN: Ein anderer Weg, dies zu tun, besteht darin, den Dev Host und den Port in config/index.js zu bearbeiten.

0
krubo

Für mich: Ändern des Listen-Hosts hat funktioniert:

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

wurde geändert in:

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

und der Server begann 0.0.0.0 abzuhören

0
Ankush