Làm cách nào để làm cho máy chủ dev của webpack chạy trên cổng 80 và trên 0.0.0.0 để làm cho nó có thể truy cập công khai?

Tôi chưa quen với toàn bộ thế giới nodejs / Reacjs nên xin lỗi nếu câu hỏi của tôi nghe có vẻ ngớ ngẩn. Vì vậy, tôi đang chơi xung quanh với Reacabular.js .

Bất cứ khi nào tôi làm một npm startnó luôn luôn chạy localhost:8080.

Làm cách nào để thay đổi nó để chạy trên 0.0.0.0:8080để làm cho nó có thể truy cập công khai? Tôi đã cố đọc mã nguồn trong repo ở trên nhưng không tìm thấy tệp nào cài đặt này.

Ngoài ra, để thêm vào điều đó - làm thế nào để tôi chạy nó trên cổng 80nếu điều đó hoàn toàn có thể?

Một cái gì đó như thế này làm việc cho tôi. Tôi đoán điều này sẽ làm việc cho bạn.

Chạy webpack-dev bằng cách này

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

Và đặt cái này trong webpack.config.js

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

Lưu ý Nếu bạn đang sử dụng tải nóng, bạn sẽ phải làm điều này.

Chạy webpack-dev bằng cách này

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

Và đặt cái này trong 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()]

Đây là cách tôi đã làm và nó dường như hoạt động khá tốt.

Trong tệp webpack.config.js của bạn thêm vào như sau:

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

Rõ ràng bạn có thể sử dụng bất kỳ cổng nào không xung đột với cổng khác. Tôi chỉ đề cập đến vấn đề xung đột vì tôi đã dành khoảng 4 giờ. chiến đấu với một vấn đề chỉ để phát hiện ra rằng các dịch vụ của tôi đang chạy trên cùng một cổng.

Định cấu hình webpack (trong webpack.config.js) với:

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

Tôi chưa quen với việc phát triển JavaScript và ReactJS. Tôi đã không thể tìm thấy một câu trả lời phù hợp với mình, cho đến khi tìm ra nó bằng cách xem mã kịch bản phản ứng. Sử dụng ReactJS 15.4.1+ bằng cách sử dụng tập lệnh ReactJ, bạn có thể bắt đầu với một máy chủ và / hoặc cổng tùy chỉnh bằng cách sử dụng các biến môi trường:

HOST='0.0.0.0' PORT=8080 npm start

Hy vọng điều này sẽ giúp những người mới như tôi.

Sau đây làm việc cho tôi -

1) Package.jsonThêm vào đây:

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

2) webpack.config.jsThêm đối tượng này dưới cấu hình mà bạn xuất:

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

3) Bây giờ trên loại thiết bị đầu cuối: npm run dev

4) Sau khi số 3 biên dịch và sẵn sàng, hãy truy cập trình duyệt của bạn và nhập địa chỉ dưới dạng http://GACDTL001SS369k:8080/

Ứng dụng của bạn hy vọng sẽ hoạt động ngay bây giờ với một URL bên ngoài mà những người khác có thể truy cập trên cùng một mạng.

PS: GACDTL001SS369klà Tên máy tính của tôi vì vậy hãy thay thế bằng bất cứ thứ gì là của bạn trên máy của bạn.

Nếu bạn đang ở trong Ứng dụng Phản ứng được tạo bằng 'ứng dụng tạo phản ứng', hãy truy cập package.jsonvà thay đổi

"start": "react-scripts start",

đến ... ( unix )

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

hoặc ... ( thắng )

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

Sau đây làm việc cho tôi trong tệp cấu hình JSON:

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

Tôi vật lộn với một số câu trả lời khác. (Thiết lập của tôi là: Tôi đang chạy npm run dev, với webpack 3.12.0, sau khi tạo dự án của tôi bằng cách sử dụng vue init webpacktrên hộp ảo Ubuntu 18.04 trong Windows. Tôi có cấu hình mơ hồ để chuyển tiếp cổng 3000 đến máy chủ.)

• Không may đặt npm run dev --host 0.0.0.0 --port 3000 không hoạt động --- nó vẫn chạy trên localhost: 8080.
• Hơn nữa, tập tin webpack.config.jskhông tồn tại và tạo ra nó cũng không giúp được gì.
• Sau đó, tôi tìm thấy các tập tin cấu hình hiện đang nằm trong build/webpack.dev.conf.js(và build/webpack.base.conf.jsvà build/webpack.prod.conf.js). Tuy nhiên, nó không giống như một ý tưởng tốt để sửa đổi các tệp này, vì chúng thực sự đọc HOST và PORT từ đó process.env.

Vì vậy, tôi đã tìm kiếm về cách đặt biến process.env và đạt được thành công bằng cách chạy lệnh:

HOST=0.0.0.0 PORT=3000 npm run dev

Sau khi làm điều này, cuối cùng tôi cũng nhận được "Ứng dụng của bạn đang chạy ở đây: http://0.0.0.0:3000 " và cuối cùng tôi cũng có thể thấy nó bằng cách duyệt đến localhost:3000từ máy chủ.

EDIT: Tìm thấy một cách khác để làm điều đó là bằng cách chỉnh sửa máy chủ dev và cổng vào config/index.js.

Đối với tôi: thay đổi máy chủ nghe làm việc:

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

đã được đổi thành:

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

và máy chủ bắt đầu nghe vào ngày 0.0.0.0

Tôi đã thử các giải pháp trên, nhưng không có may mắn. Tôi nhận thấy dòng này trong gói.json của dự án của tôi:

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

},

Tôi nhìn bin/webpack-dev-server.jsvà thấy dòng này:

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

Tôi đã thay đổi cổng thành 3000. Một chút cách tiếp cận vũ phu, nhưng nó hiệu quả với tôi.

Trong gói.json thay đổi giá trị "bắt đầu" như sau

Lưu ý: Chạy $ sudo npm start , Bạn cần sử dụng sudo để chạy các kịch bản phản ứng trên cổng 80

Đối với tôi, mã này đã làm việc. Chỉ cần thêm nó vào package.jsontập tin của bạn :

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

Và chạy tập lệnh "xây dựng" bằng cách chạy npm run build

Tôi đã thử điều này để dễ dàng sử dụng một cổng khác:

PORT=80 npm run dev