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

Question

我一直在使用 create-react-app 和我添加的其他一些库开发一个小应用程序。鉴于计划的架构和一些我想用 react-router 运行的测试，我希望能够使用 url 中的域 mame 在本地运行我的应用程序，这样而不是

本地主机：3000/

这将是

somedomain.com

我已经尝试了一些事情，比如弹出 ceate-react-app 但我不知道如何修改 webpack 配置来改变公共路径，或者如何在我的机器上设置某种代理，这样 somedomain.com 就相当于输入本地主机:3000

我不确定正确的方法是什么，我似乎还找不到任何可靠的信息。

Answer 1

除了按照/etc/hosts上面的建议更改您的名称外，如果您希望 CRA 知道新的主机名，那么HOSTenv var 应该会提供您想要的信息。

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

HOST=somedomain.com react-scripts start

这应该启动基于 CRA 的开发服务器，监听该域名，并且它应该打开/刷新指向那里的浏览器选项卡。

编辑：关于 CRA 使用的这个和其他环境变量的文档。

Answer 2

结合其他一些答案：

第 1 步：在您的本地机器上，将此行添加到您的etc/hosts文件中：

127.0.0.1 somedomain.com

第 2 步：在您的 react app 目录.env文件中，添加：

HTTPS=true

HOST='somedomain.com'

第 3 步：（取决于您是否正在运行后端）您可能需要添加somedomain.com为允许的域

Answer 3

您可以通过使用以下条目更新主机文件来完成此操作

127.0.0.1 somedomain.com

然后使用 somedomain.com 访问您的网站

但是，如果 somedomain.com 恰好是您的实际主机地址，那么当您想要连接到实际托管的 somedomain.com 时，您将必须将其恢复回来

您可以在此处找到有关如何编辑主机文件的更多信息： https: //www.siteground.com/kb/how_to_use_the_hosts_file/

您可以在这里找到类似的答案：为开发环境分配一个域名到本地主机

Answer 4

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

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

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