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

179

Ich bin neu in der ganzen Welt der Nodejs / Reactjs, also entschuldige mich, wenn meine Frage albern klingt. Also spiele ich mit reactabular.js herum .

Wann immer ich ein mache npm start, läuft es immer weiter localhost:8080.

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

Hinzu kommt: Wie kann ich es auf dem Port ausführen, 80wenn dies überhaupt möglich ist?

90abyss
quelle

Antworten:

232

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

Führen Sie webpack-dev damit aus

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

Und setzen Sie dies in webpack.config.js

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

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

Führen Sie webpack-dev damit aus

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

Und setzen Sie dies in 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()]
Bhargav Ponnapalli
quelle
1
Hallo, ich bin neu in diesem Bereich, möchte aber Redux für mein Client-Skript verwenden. Das Problem ist, dass die Anwendung eine .net-Anwendung ist, die den Inhalt und die JSON-Endpunkte bereitstellt. Um dies während der Entwicklung zu tun, muss ich <script src="http://localhost:8080/webpack-dev-server.js"></script>der Seite etwas hinzufügen und ein domänenübergreifendes Plugin installieren. Diese Tools sehen interessant aus, scheinen jedoch davon auszugehen, dass Ihr Server ebenfalls ein Knoten ist, oder fehlt mir etwas?
HMR
1
Vielleicht hilft mir das: webpack.github.io/docs/webpack-dev-server.html#proxy Ich würde denken, Proxy für alles zu verwenden, außer für Anfragen nach Javascript-Dateien und einige Anfragen von Webpack-Server, Hotloader und Redux-Zeitreise. so /data:image ..., ... .jsund/sockjs-node...
HMR
Wenn Sie einen ungültigen Host-Header erhalten, müssen Sie disableHostCheck möglicherweise in webpack.serve.config.js auf true setzen. Siehe github.com/webpack/webpack-dev-server/issues/882 . Abhängig von Ihrer Situation kann es sich um eine Sicherheitslücke handeln. Seien Sie also vorsichtig.
Brian Deterling
131

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 das Konfliktproblem nur, weil ich ungefähr 4 Stunden verbracht habe. Ich habe ein Problem bekämpft, nur um festzustellen, dass meine Dienste auf demselben Port ausgeführt wurden.

bkane56
quelle
Ich nehme an, dies ist, anstatt den Host und den Port im Eintragsabschnitt der Konfigurationsdatei anzugeben.
JoeTidee
2
Könnten Sie bitte einen Link zur Dokumentation hinzufügen ?
wässrig
1
Einfach Inline hinzufügen: True hat bei mir funktioniert. Übrigens war die von mir bearbeitete Webpack-Datei 'webpack.dev.conf.js' (Stand März 2018).
Sean O
68

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

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}
Beder Acosta Borges
quelle
2
es funktioniert nicht für. devServer: {inline: true, host: '0.0.0.0', port: 8088},
NK Chaudhary
Es funktioniert für mich, wenn ich (webpack.config) verwende: devServer: {host: 'xx.xx.xx.xxx', port: 8089},
Dijo
Dies löste ein sehr eng verwandtes Problem für mich, als ich versuchte, dem Kurs Modern React with Redux auf Udemy zu folgen . Ich führe meine Entwicklungsumgebung unter Windows in einer virtuellen Vagrant- Box aus. Der Kurs bietet absolut keine Anleitung zum Einrichten der Entwicklungsumgebung.
Vince
Ja, dies hat ein Problem behoben, bei dem Webpack auf einer Cloud9-Instanz ausgeführt wurde. Vielen Dank!
Maniaque
Ich konnte die Portnummer mit dem obigen Snippet ändern, aber der Host hat sich immer noch nicht geändert. Ich habe versucht, den Host auf 0.0.0.0 zu setzen, damit ich über die IP-Adresse auf die Site zugreifen kann, aber es hat nicht funktioniert. Hilfe, wie dies erreicht werden kann?
Rito
26

Ich bin neu in der JavaScript-Entwicklung und in ReactJS. Ich konnte keine Antwort finden, die für mich funktioniert, bis ich sie durch Anzeigen des React-Scripts-Codes herausgefunden habe. Wenn Sie ReactJS 15.4.1+ mit React-Skripten 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 das Neulingen wie mir.

Anonym
quelle
16

Folgendes hat bei mir funktioniert -

1 in Package.json Fügen Sie Folgendes hinzu:

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

2) webpack.config.jsFügen Sie dies unter dem exportierten Konfigurationsobjekt hinzu:

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

3) Jetzt am Terminaltyp: npm run dev

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

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

PS: GACDTL001SS369kWar mein Computername, also ersetzen Sie ihn durch Ihren Computer.

Sumeet
quelle
4

Wenn Sie sich in einer mit 'create-react-app' erstellten React-Anwendung befinden, gehen Sie zu Ihrer package.jsonund ändern Sie diese

"start": "react-scripts start",

zu ... ( Unix )

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

oder um ... (zu gewinnen )

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

R01010010
quelle
oder bearbeiten Sie node_modules / react-scripts / script / start.js und ändern Sie DEFAULT_PORT und HOST. Schützen Sie die Datei nur beim Überschreiben, wenn neue Versionen Dateien beim npm-Update aktualisieren.
Rogelio Triviño
1

Folgendes hat bei mir in der JSON-Konfigurationsdatei funktioniert:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},
römisch
quelle
1

Ich kämpfte mit einigen der anderen Antworten. (Mein Setup lautet: Ich verwende npm run devWebpack 3.12.0, nachdem ich mein Projekt mit vue init webpackeiner Ubuntu 18.04-Virtualbox unter Windows erstellt habe. Ich habe vagrant so konfiguriert, dass Port 3000 an den Host weitergeleitet wird.)

  • Leider setzen npm run dev --host 0.0.0.0 --port 3000 nicht funktioniert --- es lief immer noch auf localhost: 8080.
  • Außerdem die Datei webpack.config.js nicht und das Erstellen half auch nicht.
  • Dann habe ich festgestellt, dass sich die Konfigurationsdateien jetzt in build/webpack.dev.conf.js(und build/webpack.base.conf.jsund 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 lesen process.env.

Also suchte ich nach dem Setzen von process.env-Variablen und erzielte Erfolg, indem ich den folgenden Befehl ausführte :

HOST=0.0.0.0 PORT=3000 npm run dev

Danach erhalte ich endlich "Ihre Anwendung läuft hier: http://0.0.0.0:3000 " und ich kann sie endlich sehen, indem ich zu navigierelocalhost:3000 vom Host-Computer aus zu .

BEARBEITEN: Eine andere Möglichkeit besteht darin, den Entwicklerhost und den Port zu bearbeiten config/index.js.

krubo
quelle
1

Für mich: Das Ä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

Ankush
quelle
0

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

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

},

Ich bin/webpack-dev-server.jshabe diese Zeile angeschaut und gefunden:

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

Ich habe den Port auf 3000 geändert. Ein bisschen Brute-Force-Ansatz, aber es hat bei mir funktioniert.

Sparky1
quelle
0

Ändern Sie in package.json den Wert "start" wie folgt

Hinweis: Führen Sie $ sudo npm start aus . Sie müssen sudo verwenden , um Reaktionsskripte auf Port 80 auszuführen

Geben Sie hier die Bildbeschreibung ein

Mokesh Moha
quelle
0

Bei mir hat dieser Code funktioniert. Fügen Sie es einfach Ihrer package.jsonDatei hinzu:

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

Führen Sie das Skript "build" aus, indem Sie es ausführen npm run build

Phrozion
quelle
-1

Ich habe versucht, einfach einen anderen Port zu verwenden:

PORT=80 npm run dev
kyrre
quelle