logo标签列表

如何从连接到同一网络的另一台计算机上打开一个 create-react-app ？

node.jsnetworkinglocalhostcreate-react-app
96
我正在使用create-react-app并在其默认端口localhost:3000上托管，希望从同一网络中的另一台设备访问它。
我已经获取了主机的IP地址（使用ifconfig）192.168.0.5并尝试打开192.168.0.5:3000但无法工作。
是否有任何方法可以实现这一点？
22个回答
115

只需运行 HOST=0.0.0.0 npm run start 即可。
之后在网络中的另一个设备上打开URL即可。

在您的情况下，192.168.0.5:3000 可以使用。

关于设置HOST环境变量的文档。

18
如果您正在使用webpack，打开package.json文件并在script.start字段中添加“--host 0.0.0.0”选项即可解决问题。完成。 - kitta
1
[MacOS] 如果您不知道自己的IP地址，可以前往“系统偏好设置 > 网络 > 高级 > TCP/IP”查看IPv4地址。 - DeepBlue
最好将HOST设置为127.0.0.1，因为当HOST为0.0.0.0时，我总是会收到警告。 - timthedev07
如何将端口从3000更改为其他数字？ - heyom
4
你可能实际上不需要 HOST=0.0.0.0 这一部分。在我的情况下，运行正常的启动命令 (npm run start) 就可以了。我能够在我的手机浏览器上看到应用程序，URL 为 [我的Macbook的IP地址]:3000。我使用了 这个 来找到我的Macbook的IP地址。你帖子中的文档 在 HOST 部分提到了这种默认行为。 - jaquinocode
显示剩余3条评论
24

我曾遇到同样的问题，当我禁用了私人防火墙后，问题得到了解决。

输入图片说明

或者如果您想启用私人防火墙，您需要前往以下位置：

控制面板 \ 系统和安全 \ Windows Defender 防火墙 \ 允许的应用程序

输入图片说明

并启用“更改设置”，然后在 Node.js 行中选中私人复选框。

输入图片说明

1
谢谢，很好用。但有没有安全问题？ - Faith Sabu
20

如果您在使用Ubuntu操作系统，只需运行以下命令：

$> sudo ufw allow 3000

然后使用本地网络内部的IP访问您的应用程序。 要获取您的本地IP，请运行：

$> ifconfig
4
Windows用户怎么办？ - wilson382
@wilson382 添加一个防火墙规则以允许端口3000。了解如何添加防火墙规则，请阅读https://stackoverflow.com/a/33657331/13163131。 - humble_barnacle
17

由于我无法发表评论， 给Elad的补充说明： 如果您使用react-scripts start而不是npm run start

HOST=0.0.0.0 react-scripts start

同样有效！

5
我使用的是Ubuntu 20.04，我的安卓手机和笔记本电脑都连接在同一个Wi-Fi网络上。
步骤1：在package.json文件中为server键设置--host=0.0.0.0。

...

  "scripts": {
    "go": "open http://localhost:3000; npm run server",
    "e2e": "nightwatch --config nightwatch.js",
    "run-e2e": "concurrently -s first -k \"npm start\" \"sleep 15; npm run e2e\"",
    "test": "./node_modules/.bin/concurrently -k 'npm run server' 'npm run e2e'",
    "start": "npm run server",
    "server": "live-server public --host=0.0.0.0 --port=3000 --middleware=./disable-browser-cache.js"
  },

...

第二步：在Ubuntu防火墙中添加端口3000的规则。
sudo ufw allow 3000

步骤三：现在我可以通过以下方式访问同一个React应用程序

  • http://localhost:3000/ # 桌面端
  • http://127.0.0.1:3000/ # 桌面端
  • http://192.168.X.X:3000/ # Android和桌面端都可以访问（将“X.X”替换为您的内部IP）
它们是否有区别，如果一个设备连接的是WiFi，而另一个设备连接的是有线网络？因为一个设备的IP地址是10.0.0.101，而另一个设备的IP地址是10.0.0.107？ - Lucas Steffen
直到两个设备都连接在同一网络电缆和相同的WiFi上。检查内部IP地址（在Ubuntu中我使用ifconfig命令）。如果两个设备都可以访问此内部IP地址（我的是192.168.1.5），则没有问题。这只有在电缆来自WiFi路由器且移动设备连接到相同的WiFi时才可能发生（您的情况可能是这样的）。 - Himanshu Patel
1
运行得很顺利 - Shamsul Arefin
4

在我的情况下，npm run start 使用了以太网适配器的 IP 地址，例如 http://192.168.167.113:3000，但是我使用 WLAN 访问站点时需要使用 WLAN 的 IP 地址，即 192.168.0.227。

确保使用相同端口的 WLAN IP 以使其正常工作。

4
如果您使用的是Windows，而上述解决方案无效，则很可能是防火墙问题。您可以尝试查看控制面板中的“允许的应用程序”，以检查节点是否在私人网络上被允许。或者查看“Windows Defender高级安全防火墙”中的“监视/防火墙”选项卡，并检查Node.js。
1
另外，我发现npm run start的输出打印了一个误导性的IP地址。我不得不通过ipconfig来检查我的IP地址。一旦使用正确的IP地址，我的问题就解决了。 - Louis Sayers
谢谢您的评论。我遇到了同样的问题，但是您认为为什么npm run开始打印误导性IP地址？我不得不更改为正确的IP地址，然后它就起作用了。 - Dijiflex
完全正确！谢谢！ - guilfer
2

2021年底，我通过教程完成了几个React项目。当我启动应用程序时，它显示了2个链接，一个是localhost的链接，另一个是同一网络中其他设备的IP地址链接。现在（2022年5月18日），当我想独立制作React应用程序时，启动React应用程序时只会给出localhost链接。在我的情况下（Windows 11），请尝试使用http://yourComputerIp:portNumber。

要在Windows上获取IP，请在命令提示符中键入ipconfig，您的IP地址将在IPv4地址名称下方。

1
如果您遇到以下问题：

HOST=0.0.0.0 : 无法识别“HOST=0.0.0.0”作为 cmdlet 的名称

如果我不使用npm包装脚本运行，则需执行以下操作：
HOST=0.0.0.0 PORT=8000 ./node_modules/.bin/react-scripts start

为了解决此问题，请转到 package.json 文件并将 "start" 脚本更改为
"start": "./node_modules/.bin/react-scripts start",

然后添加这行代码。
"server": "live-server public --host=0.0.0.0 --port=3000 --middleware=./disable-browser-cache.js",

然后运行npm start就可以正常工作。

更多细节请参见link。

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。- 来自审查 - m4n0
谢谢指出。我以后会注意的。 - Amit Kundu
1
如果您有两台机器（假设是PC1和PC2），并且两台机器都连接到同一个WiFi网络，则：
- 将您的create-react-app开发服务器绑定到您的无线局域网适配器Wi-Fi IPv4地址（在Windows上输入命令ipconfig.exe，在类Unix系统上输入ifconfig）。您将在以下位置找到IP地址： - Wireless LAN adapter Wi-Fi（在Windows上） - wlp5s0 inet Ip_Address - 在您开发React的shell中运行HOST=your_IP npm run start 现在，您的开发机将成为通过其IP地址提供UI的服务器。
谢谢，这是唯一帮助我的答案。 :) - llsanketll
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接