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

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?

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

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.

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

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

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.

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.

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"

Berikut ini berfungsi untuk saya dalam file konfigurasi JSON:

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

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.

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

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.

Dalam package.json ubah nilai "mulai" sebagai berikut

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

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

Saya mencoba ini dengan mudah menggunakan port lain:

PORT=80 npm run dev