Webpack dev sunucusunu halka açık yapmak için 80 numaralı bağlantı noktasında ve 0.0.0.0'da nasıl çalıştırabilirim?

Ben bütün için yeni nodejs / reactjs sorum sesleri saçma eğer özür böylece dünyanın. Bu yüzden reaktabular.js ile oynuyorum .

Ne zaman yapsam npm start, her zaman çalışır localhost:8080.

0.0.0.0:8080Herkese açık hale getirmek için çalışacak şekilde nasıl değiştirebilirim ? Yukarıdaki repo kaynak kodunu okumaya çalışıyorum ama bu ayarı yapan dosyayı bulamadı.

Ayrıca, buna eklemek için - 80eğer mümkünse limanda nasıl çalıştırabilirim ?

Bunun gibi bir şey benim için çalıştı. Bunun sizin için işe yarayacağını tahmin ediyorum.

Bunu kullanarak webpack-dev'i çalıştırın

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

Ve bunu webpack.config.js dosyasında ayarlayın

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

Not Sıcak yükleme kullanıyorsanız, bunu yapmanız gerekecektir.

Bunu kullanarak webpack-dev'i çalıştırın

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

Ve bunu webpack.config.js dosyasında ayarlayın

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

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

Ben böyle yaptım ve gayet iyi çalışıyor gibi görünüyor.

Webpack.config.js dosyanıza aşağıdakileri ekleyin:

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

Açıkçası, başka bir bağlantıyla çelişmeyen herhangi bir bağlantı noktasını kullanabilirsiniz. Çatışma sorunundan sadece 4 saat geçirdim diye bahsediyorum. yalnızca hizmetlerimin aynı bağlantı noktasında çalıştığını keşfetmek için bir sorunla mücadele ediyor.

Web paketini (webpack.config.js dosyasında) aşağıdakilerle yapılandırın:

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

JavaScript geliştirme ve ReactJS'de yeniyim. Reat-script kodunu görüntüleyerek çözene kadar benim için çalışan bir cevap bulamadım. ReactJS 15.4.1+ ürününü tepki komut dosyaları kullanarak, ortam değişkenlerini kullanarak özel bir ana bilgisayar ve / veya bağlantı noktası ile başlayabilirsiniz:

HOST='0.0.0.0' PORT=8080 npm start

Umarım bu benim gibi yeni gelenlere yardımcı olur.

Aşağıdaki benim için çalıştı -

1) Bunu Package.jsonekleyin:

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

2) webpack.config.jsDışa aktardığınız yapılandırma nesnesi altına ekleyin:

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

3) Şimdi terminal tipinde: npm run dev

4) # 3 derlemeden ve hazır olduktan sonra tarayıcınıza gidin ve adresi aşağıdaki gibi girin http://GACDTL001SS369k:8080/

Uygulamanızın şu anda başkalarının aynı ağda erişebileceği harici bir URL ile çalışıyor olması bekleniyor.

PS: GACDTL001SS369kBilgisayarımın Adı idi, bu yüzden makinenizdeki her şeyle değiştirin.

'Create-reakt-app' ile oluşturulan bir React Uygulamasındaysanız, gidin package.jsonve değiştirin

"start": "react-scripts start",

için ... ( unix )

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

ya da ... ( kazan )

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

Aşağıdaki JSON yapılandırma dosyasında benim için çalıştı:

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

Diğer cevaplarla mücadele ettim. (Benim kurulumum: Windows altında bir Ubuntu 18.04 sanal kutusunda npm run devkullanarak projemi oluşturduktan sonra, webpack 3.12.0 ile çalışıyorum vue init webpack. 3000 numaralı bağlantı noktasını ana bilgisayara iletmek için yapılandırılmış var.)

• Ne yazık ki koymak npm run dev --host 0.0.0.0 --port 3000işe yaramadı --- hala localhost üzerinde koştu: 8080.
• Ayrıca, dosya webpack.config.jsyoktu ve onu oluşturmak da yardımcı olmadı.
• Sonra yapılandırma dosyalarının şimdi build/webpack.dev.conf.js(ve build/webpack.base.conf.jsve build/webpack.prod.conf.js) içinde bulunduğunu gördüm . Ancak, bu dosyaları değiştirmek iyi bir fikir gibi görünmüyordu, çünkü aslında HOST ve PORT'u okurlar process.env.

Yani process.env değişkenlerini nasıl ayarlayacağımı araştırdım ve komutu çalıştırarak başarı elde ettim :

HOST=0.0.0.0 PORT=3000 npm run dev

Bunu yaptıktan sonra, sonunda "Uygulamanız burada çalışıyor: http://0.0.0.0:3000 " alıyorum ve sonunda localhost:3000ana bilgisayardan göz atarak görebiliyorum .

EDIT: Bunu yapmak için başka bir yol bulundu dev ana bilgisayar ve bağlantı noktası düzenleyerek config/index.js.

Benim için: Dinlenen ev sahibini değiştirmek işe yaradı:

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

olarak değiştirildi:

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

ve sunucu 0.0.0.0'da dinlemeye başladı

Yukarıdaki çözümleri denedim ama şansım olmadı. Projemin paketinde bu satırı fark ettim. Json:

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

},

Baktım bin/webpack-dev-server.jsve şu hattı buldum:

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

Limanı 3000 olarak değiştirdim. Biraz kaba kuvvet yaklaşımı, ama benim için çalıştı.

Package.json içinde "start" değerini aşağıdaki gibi değiştirin

Not: $ sudo npm start çalıştır , 80 numaralı bağlantı noktasında tepki komut dosyaları çalıştırmak için sudo kullanmanız gerekir

Benim için bu kod işe yaradı. Sadece package.jsondosyanıza ekleyin :

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

Ve "build" komut dosyasını çalıştırarak çalıştırın. npm run build

Kolayca başka bir bağlantı noktası kullanmak için denedim:

PORT=80 npm run dev