如何在create-react-app中使用域名而不是“localhost:3000”来进行本地开发？

Question

我一直在使用create-react-app和其他几个库开发一个小应用程序。鉴于计划中的架构和我想要使用react-router运行的一些测试，我想在本地使用域名作为URL来运行我的应用程序，以便代替： localhost:3000/

而是：

somedomain.com

我尝试过一些方法，如弹出ceate-react-app，但我不确定如何修改webpack配置以更改公共路径，或者如何在我的机器上设置某种代理，使somedomain.com等同于键入localhost：3000。

我不确定正确的方法是什么，也找不到可靠的信息。

- xunux

---

将一个规则添加到你的主机配置中，将域名/子域名的URL指向你的本地主机IP。 - Derek

我尝试了类似的方法，但问题在于我的虚拟主机设置是Apache相关的，与虚拟主机等有关，并且create-react-app在webpack devserver上运行，所以我很难弄清楚这个问题。我可以让我的本地主机转到计算机中的特定目录，但它不会运行webpack服务器。您对如何解决此问题有更多详细信息吗？ - xunux

Answer 1

除了按照上面的建议更改您的/etc/hosts之外，如果您想让CRA知道新的主机名，HOST环境变量应该可以满足您的需求。

例如（这可以放入package.json下的scripts/start中）

HOST=somedomain.com react-scripts start

这将启动基于CRA的开发服务器，在该域名上进行侦听，并应打开/刷新指向那里的浏览器选项卡。

编辑：有关此及其他CRA使用的环境变量的文档。

- gimboland

Answer 2

结合其他答案：

步骤1：在您的本地计算机上将此行添加到etc/hosts文件中：

127.0.0.1 somedomain.com

步骤2：在您的React应用程序目录的.env文件中添加以下内容：

HTTPS=true

HOST='somedomain.com'

步骤3：（根据您是否运行后端）您可能需要将somedomain.com添加为允许的域。

- benmercerdev

---

本地开发不需要设置HTTPS=true。 - Mamrezo

Answer 3

您可以通过更新您的hosts文件，添加以下条目来实现：

127.0.0.1 somedomain.com

然后使用somedomain.com访问您的站点。但是，如果somedomain.com恰好是您的实际主机地址，那么当您想要连接到实际托管的somedomain.com时，您将不得不将其恢复回去。

您可以在此处找到有关如何编辑您的hosts文件的更多信息：https://www.siteground.com/kb/how_to_use_the_hosts_file/ 您可以在这里找到类似的答案：为开发环境分配本地主机名

- ts1

Answer 4

你可以通过添加来更改端口

"scripts": {
    "start": "set PORT=8080 && react-scripts start"
}

但是在本地开发时，没有其他方法可以更改IP地址。我也尝试过这样做。

- Viraj