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

IT技术 reactjs proxy webpack-dev-server create-react-app
2021-05-19 12:49:40

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

本地主机:3000/

这将是

somedomain.com

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

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

4个回答

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

例如(这可以进入你的package.jsonscripts/start

HOST=somedomain.com react-scripts start

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

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

结合其他一些答案:

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

127.0.0.1 somedomain.com

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

HTTPS=true

HOST='somedomain.com'

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

您可以通过使用以下条目更新您的主机文件来实现

127.0.0.1 somedomain.com

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

但是,如果 somedomain.com 恰好是您的实际主机地址,那么当您想要连接到实际托管的 somedomain.com 时,您将不得不将其还原

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

您可以在此处找到类似的答案:将域名分配给 localhost 用于开发环境

您可以通过添加更改端口

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

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