如何从局域网中的另一台PC访问我的React应用程序？

Question

背景

我在rasperrypi上托管了一个React应用程序网站，到目前为止，当我使用create-react-app时，我已经能够访问该应用程序网站：我可以从位于网络以及树莓派。在raspberrypi上，我使用localhost：3000访问该网站，并且可以从计算机上从192.x.x.x：3000访问该网站，并且可以正常工作。 但是，由于我意识到使用create-react-app时无法运行某些树莓本机模块，因此我决定手动安装和设置react以及babel和webpack（在希望它能起作用）。

问题

使用手动设置，当我从raspberrypi上的本地主机访问Web应用程序时，我可以看到它，但是我无法在我的计算机上访问它（该计算机与raspberry在同一局域网中）；我试图将端口切换为3000，但结果却是相同的，无法从计算机访问它……有人知道有什么可以帮助的吗？

感谢您的关注！

Answer 1

在使用Webpack-Dev-Server时，可以使用allowedHosts选项，也可以将host选项定义为0.0.0.0。以下两个示例均来自Webpack Docs。

允许的主机

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com'
    ]
  }
};

主机定义

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0'
  }
};

最后的配置也可以通过使用CLI来实现：

webpack-dev-server --host 0.0.0.0

生产模式

在生产模式下，例如express，您可以使用以下实现之一。您可以在SuperUser上详细了解它。

listen(3000, '192.x.x.x', function() {}
listen(3000, '0.0.0.0', function() {}

您无法访问它的原因是服务器绑定了回送地址（127.0.0.1）。