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

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?

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

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.

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

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

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.

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.

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"

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

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.

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

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.

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

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

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

PORT=80 npm run dev