Bagaimana cara membuat server dev webpack berjalan pada port 80 dan pada 0.0.0.0 agar dapat diakses publik?

180

Saya baru di seluruh dunia node / reactjs jadi minta maaf jika pertanyaan saya terdengar konyol. Jadi saya bermain-main dengan reactabular.js .

Setiap kali saya melakukan npm startitu selalu berjalan localhost:8080.

Bagaimana cara mengubahnya agar berjalan 0.0.0.0:8080agar dapat diakses publik? Saya telah mencoba membaca kode sumber di repo di atas tetapi gagal menemukan file yang melakukan pengaturan ini.

Juga, untuk menambah itu - bagaimana cara membuatnya berjalan di port 80jika itu memungkinkan?

90abyss
sumber

Jawaban:

233

Sesuatu seperti ini bekerja untuk saya. Saya kira ini harus bekerja untuk Anda.

Jalankan webpack-dev menggunakan ini

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

Dan atur ini di webpack.config.js

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

Catatan Jika Anda menggunakan pemuatan panas, Anda harus melakukan ini.

Jalankan webpack-dev menggunakan ini

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

Dan atur ini di 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
sumber
1
Hai, saya baru dalam hal ini tetapi ingin menggunakan redux untuk skrip klien saya. Masalahnya adalah bahwa aplikasi tersebut adalah aplikasi .net yang menyajikan konten dan titik akhir json. Jadi untuk melakukan ini selama pengembangan saya perlu menambahkan <script src="http://localhost:8080/webpack-dev-server.js"></script>ke halaman dan menginstal beberapa plugin lintas domain yang memungkinkan? Alat-alat ini terlihat menarik tetapi tampaknya menganggap server Anda juga node atau saya kehilangan sesuatu?
HMR
1
Mungkin ini akan membantu saya: webpack.github.io/docs/webpack-dev-server.html#proxy Saya akan berpikir untuk menggunakan proxy untuk semuanya kecuali permintaan untuk file javascript dan beberapa permintaan yang dibuat oleh server webpack, hotloader, dan redux timetravel. jadi /data:image ..., ... .jsdan/sockjs-node...
HMR
Jika Anda mendapatkan Header Host Tidak Valid, Anda mungkin perlu mengatur disableHostCheck menjadi true di webpack.serve.config.js. Lihat github.com/webpack/webpack-dev-server/issues/882 . Tergantung pada situasi Anda, itu mungkin lubang keamanan jadi hati-hati.
Brian Deterling
131

Ini adalah bagaimana saya melakukannya dan sepertinya bekerja dengan cukup baik.

Dalam file webpack.config.js Anda tambahkan berikut ini:

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

Jelas Anda dapat menggunakan port apa pun yang tidak bertentangan dengan yang lain. Saya menyebutkan masalah konflik hanya karena saya menghabiskan sekitar 4 jam. melawan masalah hanya untuk menemukan bahwa layanan saya berjalan di port yang sama.

bkane56
sumber
i take it ini bukannya menentukan host dan port di bagian entri file konfigurasi?
JoeTidee
2
Bisakah Anda menambahkan tautan ke dokumentasi ?
berair
1
Cukup menambahkan inline: true berfungsi untuk saya. BTW file webpack yang saya edit adalah 'webpack.dev.conf.js (per Maret 2018).
Sean O
68

Konfigurasikan webpack (di webpack.config.js) dengan:

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}
Beder Acosta Borges
sumber
2
itu tidak bekerja untuk. devServer: {inline: true, host: '0.0.0.0', port: 8088},
NK Chaudhary
Ini berfungsi untuk saya ketika saya menggunakan (webpack.config): devServer: {host: 'xx.xx.xx.xxx', port: 8089},
Dijo
Ini memecahkan masalah yang sangat terkait bagi saya ketika mencoba mengikuti React Modern dengan kursus Redux tentang Udemy . Saya menjalankan lingkungan pengembangan saya di Windows dalam kotak virtual Vagrant . Kursus ini sama sekali tidak memberikan panduan tentang pengaturan lingkungan pengembangan.
Vince
Ya, ini membahas masalah yang saya alami menjalankan webpack pada contoh Cloud9. Terima kasih!
Maniaque
Saya dapat mengubah nomor port menggunakan potongan di atas tetapi tuan rumah masih tidak berubah. Saya mencoba membuat host 0.0.0.0 sehingga saya dapat mengakses situs dari ip-address tetapi tidak berhasil. Adakah bantuan untuk mencapai hal ini?
Rito
26

Saya baru mengenal pengembangan JavaScript dan ReactJS. Saya tidak dapat menemukan jawaban yang berfungsi untuk saya, hingga mencari jawabannya dengan melihat kode skrip reaksi. Menggunakan ReactJS 15.4.1+ menggunakan skrip reaksi Anda dapat mulai dengan host dan / atau port khusus dengan menggunakan variabel lingkungan:

HOST='0.0.0.0' PORT=8080 npm start

Semoga ini membantu pendatang baru seperti saya.

Anonim
sumber
16

Mengikuti berhasil untuk saya -

1) Package.jsonTambahkan ini:

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

2) Di webpack.config.jstambahkan ini di bawah objek konfigurasi yang Anda ekspor:

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

3) Sekarang pada tipe terminal: npm run dev

4) Setelah kompilasi # 3 dan siap langsung saja menuju ke browser Anda dan masukkan alamat sebagai http://GACDTL001SS369k:8080/

Aplikasi Anda semoga sekarang berfungsi dengan URL eksternal yang dapat diakses orang lain di jaringan yang sama.

PS: GACDTL001SS369kadalah Nama Komputer saya jadi ganti dengan apa pun milik Anda di komputer Anda.

Sumeet
sumber
4

Jika Anda berada dalam Aplikasi Bereaksi yang dibuat dengan 'buat-reaksi-aplikasi', buka package.jsondan ubah

"start": "react-scripts start",

untuk ... ( unix )

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

atau ke ... ( menang )

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

R01010010
sumber
atau edit node_modules / react-scripts / script / start.js dan ubah DEFAULT_PORT dan HOST. Lindungi file saat menimpa ketika versi baru memperbarui file pada pembaruan npm.
Rogelio Triviño
1

Berikut ini berfungsi untuk saya dalam file konfigurasi JSON:

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

Saya bergumul dengan beberapa jawaban lain. (Setup saya adalah: Saya sedang menjalankan npm run dev, dengan webpack 3.12.0, setelah membuat proyek saya menggunakan vue init webpackpada virtualbox Ubuntu 18.04 di Windows. Saya telah mengkonfigurasi dikonfigurasi untuk meneruskan port 3000 ke host.)

  • Sayangnya menempatkan npm run dev --host 0.0.0.0 --port 3000 tidak berfungsi --- masih berjalan di localhost: 8080.
  • Selain itu, file webpack.config.jstidak ada dan membuatnya tidak membantu.
  • Kemudian saya menemukan file-file konfigurasi sekarang berada di build/webpack.dev.conf.js(dan build/webpack.base.conf.jsdan build/webpack.prod.conf.js). Namun, sepertinya bukan ide yang baik untuk memodifikasi file-file ini, karena mereka sebenarnya membaca HOST dan PORT dari process.env.

Jadi saya mencari tentang cara mengatur variabel process.env dan mencapai kesuksesan dengan menjalankan perintah:

HOST=0.0.0.0 PORT=3000 npm run dev

Setelah melakukan ini, saya akhirnya mendapatkan "Aplikasi Anda berjalan di sini: http://0.0.0.0:3000 " dan saya akhirnya dapat melihatnya dengan menelusuri kelocalhost:3000 dari mesin host.

EDIT: Ditemukan cara lain untuk melakukannya adalah dengan mengedit host dev dan pelabuhan di config/index.js.

Krubo
sumber
1

Bagi saya: mengubah host dengarkan berfungsi:

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

diubah menjadi:

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

dan server mulai mendengarkan pada 0.0.0.0

Ankush
sumber
0

Saya mencoba solusi di atas, tetapi tidak berhasil. Saya perhatikan baris ini di package.json proyek saya:

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

},

Saya melihat bin/webpack-dev-server.jsdan menemukan baris ini:

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

Saya mengubah port menjadi 3000. Sedikit pendekatan brute force, tetapi berhasil bagi saya.

Sparky1
sumber
0

Dalam package.json ubah nilai "mulai" sebagai berikut

Catatan: Jalankan $ sudo mulai npm , Anda harus menggunakan sudo untuk menjalankan skrip reaksi pada port 80

masukkan deskripsi gambar di sini

mokesh moha
sumber
0

Bagi saya, kode ini berfungsi. Cukup tambahkan di package.jsonfile Anda :

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

Dan jalankan script "build" dengan menjalankan npm run build

phrozion
sumber
-1

Saya mencoba ini dengan mudah menggunakan port lain:

PORT=80 npm run dev
kyrre
sumber