Jak ustawić serwer dewelopera webpack na port 80 i 0.0.0.0, aby był publicznie dostępny?

180

Jestem nowy w całym świecie Nodejs / Reagjs, więc przepraszam, jeśli moje pytanie brzmi głupio. Więc bawię się z Reactabular.js .

Ilekroć robię npm start, zawsze działa localhost:8080.

Jak zmienić go, aby działał, 0.0.0.0:8080aby był publicznie dostępny? Próbowałem odczytać kod źródłowy w powyższym repozytorium, ale nie udało mi się znaleźć pliku, który spełnia to ustawienie.

Ponadto, aby dodać do tego - jak sprawić, aby działał na porcie, 80jeśli jest to w ogóle możliwe?

90abyss
źródło

Odpowiedzi:

233

Coś takiego działało dla mnie. Zgaduję, że to powinno dla ciebie zadziałać.

Uruchom webpack-dev używając tego

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

I ustaw to w webpack.config.js

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

Uwaga Jeśli używasz ładowania na gorąco, musisz to zrobić.

Uruchom webpack-dev używając tego

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

I ustaw to w 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
źródło
1
Cześć, jestem nowy, ale chciałbym użyć redux dla mojego skryptu klienta. Problem polega na tym, że aplikacja jest aplikacją .net, która obsługuje zawartość i punkty końcowe json. Więc aby to zrobić podczas programowania, muszę dodać <script src="http://localhost:8080/webpack-dev-server.js"></script>do strony i zainstalować kilka domen umożliwiających wtyczkę? Te narzędzia wyglądają interesująco, ale wydają się zakładać, że twój serwer jest również węzłem, czy coś pomijam?
HMR
1
Może to mi pomoże: webpack.github.io/docs/webpack-dev-server.html#proxy Chciałbym użyć proxy do wszystkiego oprócz próśb o pliki javascript i niektóre żądania wysłane przez serwer webpack, hotloader i przeładowanie harmonogramu. tak /data:image ..., ... .jsi/sockjs-node...
HMR
Jeśli pojawi się niepoprawny nagłówek hosta, być może trzeba ustawić wartość disableHostCheck na true w pliku webpack.serve.config.js. Zobacz github.com/webpack/webpack-dev-server/issues/882 . W zależności od sytuacji może to być dziura w zabezpieczeniach, więc bądź ostrożny.
Brian Deterling
131

Tak to zrobiłem i wydaje się, że działa całkiem dobrze.

W swoim pliku webpack.config.js dodaj:

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

Oczywiście możesz użyć dowolnego portu, który nie powoduje konfliktu z innym. Wspominam o konflikcie tylko dlatego, że spędziłem około 4 godzin. walcząc z problemem, aby odkryć, że moje usługi działały na tym samym porcie.

bkane56
źródło
Rozumiem, że to zamiast określenia hosta i portu w sekcji wprowadzania pliku konfiguracyjnego?
JoeTidee
2
Czy możesz dodać link do dokumentacji ?
wodnisty
1
Po prostu dodając inline: prawda działała dla mnie. BTW edytowany przeze mnie plik webpack to „webpack.dev.conf.js (stan na marzec 2018 r.).
Sean O
68

Skonfiguruj webpack (w webpack.config.js) za pomocą:

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}
Beder Acosta Borges
źródło
2
dla nie działa. devServer: {inline: true, host: '0.0.0.0', port: 8088},
NK Chaudhary
Działa dla mnie, gdy używam (webpack.config): devServer: {host: 'xx.xx.xx.xxx', port: 8089},
Dijo
To rozwiązało dla mnie bardzo blisko związany problem podczas próby śledzenia kursu Modern React with Redux w Udemy . Korzystam z mojego środowiska programistycznego w systemie Windows w wirtualnym pudełku Vagrant . Kurs nie zawiera absolutnie żadnych wskazówek dotyczących konfigurowania środowiska programistycznego.
Vince
Tak, rozwiązało to problem z uruchomieniem pakietu WWW w instancji Cloud9. Dzięki!
Maniaque,
Byłem w stanie zmienić numer portu za pomocą powyższego fragmentu, ale host nadal się nie zmienił. Próbowałem utworzyć hosta 0.0.0.0, aby uzyskać dostęp do witryny z adresu IP, ale to nie działało. Jakaś pomoc w tym, jak to osiągnąć?
Rito
26

Jestem nowym programistą JavaScript i ReactJS. Nie byłem w stanie znaleźć odpowiedzi, która będzie dla mnie odpowiednia, dopóki nie rozgryzłem jej, przeglądając kod skryptów reagujących. Za pomocą ReactJS 15.4.1+ i skryptów reagujących można rozpocząć od niestandardowego hosta i / lub portu za pomocą zmiennych środowiskowych:

HOST='0.0.0.0' PORT=8080 npm start

Mam nadzieję, że pomoże to nowicjuszom takim jak ja.

Anonimowy
źródło
16

Obserwowanie działało dla mnie -

1) Package.jsonDodaj to:

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

2) webpack.config.jsDodaj to w ramach obiektu konfiguracji, który eksportujesz:

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

3) Teraz na typ terminalu: npm run dev

4) Po skompilowaniu i przygotowaniu # 3 po prostu przejdź do przeglądarki i wprowadź adres jako http://GACDTL001SS369k:8080/

Mam nadzieję, że Twoja aplikacja powinna teraz działać z zewnętrznym adresem URL, do którego inni mogą uzyskać dostęp w tej samej sieci.

PS: to GACDTL001SS369kbyła moja nazwa komputera, więc zastąp ją tym, co jest twoje na twoim komputerze.

Sumeet
źródło
4

Jeśli korzystasz z aplikacji React utworzonej za pomocą aplikacji „create-reag-app”, przejdź do package.jsoni zmień

"start": "react-scripts start",

do ... ( unix )

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

or to ... ( win )

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

R01010010
źródło
lub edytuj moduły_węzła / reaguj-skrypty / skrypt / start.js i zmień DEFAULT_PORT i HOST. Po prostu chroń plik przed nadpisaniem, gdy nowe wersje aktualizują pliki podczas aktualizacji npm.
Rogelio Triviño
1

Następujące działało dla mnie w pliku konfiguracyjnym JSON:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},
rzymski
źródło
1

Zmagałem się z kilkoma innymi odpowiedziami. (Moja konfiguracja: npm run devdziałam z webpack 3.12.0, po utworzeniu projektu przy użyciu vue init webpackwirtualnego pudełka Ubuntu 18.04 pod Windows. Mam włóczęgę skonfigurowaną do przekazywania portu 3000 do hosta.)

  • Niestety kładzenie npm run dev --host 0.0.0.0 --port 3000 nie działało --- wciąż działało na localhost: 8080.
  • Ponadto plik webpack.config.jsnie istniał, a jego utworzenie również nie pomogło.
  • Potem znalazłem pliki konfiguracyjne znajdują się teraz w build/webpack.dev.conf.js( build/webpack.base.conf.jsi build/webpack.prod.conf.js). Jednak modyfikacja tych plików nie wyglądała na dobry pomysł, ponieważ faktycznie odczytują one HOST i PORT process.env.

Szukałem więc, jak ustawić zmienne process.env i osiągnąłem sukces, uruchamiając polecenie:

HOST=0.0.0.0 PORT=3000 npm run dev

Po wykonaniu tej czynności w końcu pojawia się komunikat „Twoja aplikacja jest uruchomiona tutaj: http://0.0.0.0:3000 ” i w końcu mogę ją zobaczyć, przeglądając stronę localhost:3000z komputera hosta.

EDYCJA: Znalazłem inny sposób, aby to zrobić, edytując hosta dewelopera i port w config/index.js.

krubo
źródło
1

Dla mnie: zmiana hosta nasłuchiwania działała:

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

został zmieniony na:

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

i serwer zaczął nasłuchiwać na 0.0.0.0

Ankush
źródło
0

Wypróbowałem powyższe rozwiązania, ale nie miałem szczęścia. Zauważyłem ten wiersz w pakiecie.json mojego projektu:

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

},

Spojrzałem bin/webpack-dev-server.jsi znalazłem tę linię:

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

Zmieniłem port na 3000. Trochę brutalnego podejścia, ale mi się udało.

Sparky1
źródło
0

W pliku package.json zmień wartość „start” w następujący sposób

Uwaga: Uruchom $ sudo npm start , musisz użyć sudo, aby uruchomić reagujące skrypty na porcie 80

wprowadź opis zdjęcia tutaj

mokesh moha
źródło
0

Dla mnie ten kod działał. Po prostu dodaj go do swojego package.jsonpliku:

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

I uruchom skrypt „build”, uruchamiając npm run build

phrozion
źródło
-1

Próbowałem tego, aby łatwo użyć innego portu:

PORT=80 npm run dev
kyrre
źródło