如何在手机上制作React app预览版？

Question

我是使用create-react-app创建应用的菜鸟，yarn start在http://localhost:3000/启动服务器，我无法在移动设备上访问此网址。 如何在移动设备上预览应用程序？

Answer 1

首先，请记住，您可以在桌面浏览器中打开移动视图（至少在Chrome和Firefox中）。有关详情，请参阅the article。它不能替代真正的移动设备上的测试，但可以帮助您识别更明显的问题。

其次，您需要在本地网络中使用计算机的IP地址（假设您的移动设备与桌面位于同一网络上）。在Linux和Mac上，您可以使用ipconfig检查您的IP。 localhost始终指的是当前计算机，即桌面上的localhost指向桌面，而移动设备指向您的移动设备。这就是你无法访问它的原因 - 应用程序在你的桌面上运行而不是移动。

知道计算机的IP地址后，需要将localhost替换为它。在我的情况下，IP是192.168.1.10所以我使用以下地址来访问我的应用程序：

http://192.168.1.10:3000/

Answer 2

所有答案都是正确的，但有两点被遗忘了：

1. 您的网络必须是私有的：在Windows10上，单击wifi图标，然后单击网络名称，您将看到属性选项，单击它，然后在< strong>网络配置文件部分，将其设置为私有

2. 您可能无法通过npm run start在cmd中写入的ip进行连接，也可以尝试使用其他ip地址。正如其他朋友提到的那样，打开cmd，输入：ipconfig并按Enter，然后您将看到3个部分都带有一行的行： IPv4地址，尝试使用以下所有IP地址您的React应用程序的端口号，希望对您有帮助

Answer 3

如果您想在实际设备上进行测试（这是推荐的），您应该确保您的手机连接到与计算机相同的网络，然后运行

yarn start
npm run start 

你应该看到这样的事情：

On Your Network:  http://172.xx.xx.xxx:3000/

只需将该IP地址放入移动浏览器并测试您的网络应用程序

即可

Answer 4

1. 在您的cmd中键入ipconfig ...
2. 查看您的公开IP
3. 在移动Web浏览器中使用端口号键入该公共IP。 例如：192.168.0.175：3000 /您的路线
4. 享受

Answer 5

对于Windows：

1. 使用cmd中的 ipconfig 查找公用IP。在无线局域网适配器Wi-Fi 下找到IPv4地址。确保您的电话和PC位于同一LAN（连接到同一Wifi）。使用http://your_ip:3000预览您的React应用。
2. 提示：您必须使用 https 协议来测试手机的GPS服务。就我而言，我将其部署在Heroku上以使用GPS测试功能。

Answer 6

这篇文章充满了非常有用的信息，但是，我也添加了一些被遗漏的要点，特别是对于 React 应用程序。

如果您使用的是 create-react-app

在这种情况下，当您启动 react-app 时，它将显示您可以访问设备上的应用程序的网址，如下图所示。

如果您没有使用 create-react-app（可能是 webpack）

1. 运行你的 react-app 服务器（webpack-dev-server 用于 webpack）。
2. 使用此命令 ip route get 1.2.3.4 | awk '{print $7}' 获取您的本地 ip，您可以在 windows 中使用 ipconfig 作为 ipv4 地址获取您的 ip。
3. 现在只需在您的移动浏览器中输入 http://<local-ip>:<port-number> 类似 http://192.168.1.106:3000 的内容，然后将其放在那里。

注意：以上措施仅在您的移动设备和服务器计算机连接到同一网络时才有效。

Answer 7

1. 键入cmd（Windows）：ipconfig

2. 查找IP地址IPV4：screenshot

3. 在浏览器的URL搜索栏中键入（例如）：192.168.1.4:3000 3000是您的应用程序运行所在的端口号： screenshot2

1. 请确保您的移动浏览器（首选Chrome）是最新更新，由于没有更新chrome，因此我的react应用未为我加载。

Answer 8

在Mac os Catalina上，您可以在终端中找到本地IP，如下所示：

ifconfig

在列表中的(en0)下，检查inet之后的地址

Answer 9

除了有关找出IP地址是什么的答案之外，您还应该注意防火墙可能会造成干扰。如果在Linux上，您可以将其禁用，例如

sudo ufw disable

并重新启用

sudo ufw enable

Answer 10

在hosts文件中添加指向localhost的主机名。在Windows上，它通常位于C:\Windows\System32\drivers\etc，在Linux上它位于/etc/hosts，例如：

127.0.0.1 my-app.dev

然后在您的计算机上设置代理服务器并配置您的手机以将其用作代理服务器。

然后，您应该可以使用上面指定的主机名作为网址，通过手机浏览器访问您的应用。

Answer 11

当您使用create-react-app并开始进行连接时，将您链接到IP网络

但这对我不起作用，所以：

1. 打开一个终端，然后ipconfig
2. 在您的wifi适配器下查找您是否正在使用IPv4：youIpNumber
3. http://yourIpNumber:3000 //注意，您必须添加PORT