我已经获取了主机的IP地址(使用ifconfig)192.168.0.5并尝试打开192.168.0.5:3000但无法工作。
是否有任何方法可以实现这一点?
只需运行 HOST=0.0.0.0 npm run start
即可。
之后在网络中的另一个设备上打开URL即可。
在您的情况下,192.168.0.5:3000
可以使用。
如果您在使用Ubuntu操作系统,只需运行以下命令:
$> sudo ufw allow 3000
然后使用本地网络内部的IP访问您的应用程序。 要获取您的本地IP,请运行:
$> ifconfig
由于我无法发表评论,
给Elad的补充说明:
如果您使用react-scripts start
而不是npm run start
HOST=0.0.0.0 react-scripts start
同样有效!
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"
},
...
sudo ufw allow 3000
步骤三:现在我可以通过以下方式访问同一个React应用程序
http://localhost:3000/
# 桌面端http://127.0.0.1:3000/
# 桌面端http://192.168.X.X:3000/
# Android和桌面端都可以访问(将“X.X”替换为您的内部IP)ifconfig
命令)。如果两个设备都可以访问此内部IP地址(我的是192.168.1.5
),则没有问题。这只有在电缆来自WiFi路由器且移动设备连接到相同的WiFi时才可能发生(您的情况可能是这样的)。 - Himanshu Patel在我的情况下,npm run start
使用了以太网适配器的 IP 地址,例如 http://192.168.167.113:3000
,但是我使用 WLAN 访问站点时需要使用 WLAN 的 IP 地址,即 192.168.0.227
。
确保使用相同端口的 WLAN IP 以使其正常工作。
npm run start
的输出打印了一个误导性的IP地址。我不得不通过ipconfig
来检查我的IP地址。一旦使用正确的IP地址,我的问题就解决了。 - Louis Sayers2021年底,我通过教程完成了几个React项目。当我启动应用程序时,它显示了2个链接,一个是localhost的链接,另一个是同一网络中其他设备的IP地址链接。现在(2022年5月18日),当我想独立制作React应用程序时,启动React应用程序时只会给出localhost链接。在我的情况下(Windows 11),请尝试使用http://yourComputerIp:portNumber。
要在Windows上获取IP,请在命令提示符中键入ipconfig,您的IP地址将在IPv4地址名称下方。
如果我不使用npm包装脚本运行,则需执行以下操作:HOST=0.0.0.0 : 无法识别“HOST=0.0.0.0”作为 cmdlet 的名称
HOST=0.0.0.0 PORT=8000 ./node_modules/.bin/react-scripts 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。
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的服务器。
HOST=0.0.0.0
这一部分。在我的情况下,运行正常的启动命令 (npm run start
) 就可以了。我能够在我的手机浏览器上看到应用程序,URL 为[我的Macbook的IP地址]:3000
。我使用了 这个 来找到我的Macbook的IP地址。你帖子中的文档 在 HOST 部分提到了这种默认行为。 - jaquinocode