Làm cách nào để truy cập vào webpack-dev-server từ các thiết bị trong mạng cục bộ?

Có một số cấu hình máy chủ webpack dev (nó là một phần của toàn bộ cấu hình):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

Tôi thực thi webpack bằng lệnh sau:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

Tôi có thể truy cập vào máy chủ nhà phát triển bằng cách sử dụng http://localhost:8080trên máy cục bộ của mình, nhưng tôi cũng muốn có quyền truy cập vào máy chủ của mình từ điện thoại di động, máy tính bảng của tôi (chúng ở trong cùng một mạng Wi-Fi).

Làm cách nào để kích hoạt nó? Cảm ơn!

(Nếu bạn đang sử dụng máy Mac và mạng như của tôi.)

Chạy webpack-dev-server với --host 0.0.0.0- điều này cho phép máy chủ lắng nghe các yêu cầu từ mạng, không chỉ localhost.

Tìm địa chỉ máy tính của bạn trên mạng. Trong thiết bị đầu cuối, hãy nhập ifconfigvà tìm en1phần hoặc phần có nội dung nhưinet 192.168.1.111

Trên thiết bị di động của bạn trên cùng một mạng, hãy truy cập http://192.168.1.111:8080và tận hưởng niềm hạnh phúc khi tải lại nóng của nhà phát triển.

Bạn có thể đặt địa chỉ ip của mình trực tiếp trong tệp cấu hình webpack:

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

Nó có thể không phải là giải pháp hoàn hảo nhưng tôi nghĩ bạn có thể sử dụng ngrok cho việc này. Ngrok có thể giúp bạn đưa máy chủ web cục bộ lên internet. Bạn có thể trỏ ngrok tại máy chủ nhà phát triển cục bộ của mình và sau đó định cấu hình ứng dụng của bạn để sử dụng URL ngrok.

Ví dụ: Giả sử máy chủ của bạn đang chạy trên cổng 8080 . Bạn có thể sử dụng ngrok để hiển thị điều đó với thế giới bên ngoài bằng cách chạy

./ngrok http 8080

Điều tốt ngroklà nó cung cấp phiên bản https an toàn hơn của url tiếp xúc mà bạn cung cấp cho bất kỳ người nào khác trên thế giới để kiểm tra hoặc hiển thị công việc của bạn.

Ngoài ra, nó có rất nhiều tùy chỉnh có sẵn trong lệnh như đặt tên máy chủ thân thiện với người dùng thay vì chuỗi ngẫu nhiên trong url được hiển thị và nhiều thứ khác.

Nếu bạn chỉ muốn mở trang web của mình để kiểm tra khả năng đáp ứng trên thiết bị di động, bạn nên sử dụng tính năng đồng bộ hóa trình duyệt .

Đối với tôi, điều đã giúp cuối cùng là thêm cái này vào cấu hình webpack-dev-server:

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

và sau đó cũng thay đổi tệp webpack.config.js của babel:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

Bây giờ chỉ cần lấy tên máy tính của bạn ( hostnametrên thiết bị đầu cuối của OSX), thêm cổng bạn đã xác định và bạn có thể sử dụng thiết bị di động.

So với ngrok.io, giải pháp này cũng sẽ cho phép bạn sử dụng mô-đun tải lại nóng của react trên thiết bị di động.

Tôi không thể bình luận để thêm thông tin bổ sung cho câu trả lời của forresto, nhưng ở đây, trong tương lai (2019), bạn sẽ cần thêm --publiccờ do một lỗ hổng bảo mật --host 0.0.0.0. Kiểm tra bình luận này để biết thêm chi tiết.

Để tránh "trả lời các câu trả lời khác" như một câu trả lời, đây là lời khuyên của forresto cùng với các chi tiết bổ sung mà bạn cần để làm cho việc này hoạt động:

Thêm cả hai:

--host 0.0.0.0

và

--public <your-host>:<port>

trong đó máy chủ lưu trữ của bạn là tên máy chủ (đối với tôi là (tên) s-macbook-pro.local)) và cổng là bất kỳ cổng nào bạn đang cố gắng truy cập (một lần nữa, đối với tôi đó là 8081).

Vì vậy, đây là những gì package.json của tôi trông như thế này:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },