如何使create-react-app构建监听0.0.0.0而不是localhost？

Question

我有一个用create-react-app启动的项目，我想在实例上部署它。目前我尝试了两种设置部署的方法，但只能设置端口而无法设置主机。

我的项目架构如下：

Project
- Frontend
- Backend

我的主要问题是，尽管我能够在创建React应用程序构建时设置端口，但我无法将主机名设置为0.0.0.0，而不是localhost。

在创建React应用程序中，我在“start”脚本中硬编码了HOST=0.0.0.0和PORT=443。

我尝试的另一种方法是编写一个脚本，将页面服务于端口443。构建可以使用端口443，但不能使用0.0.0.0。

create-react-app脚本

"scripts": {
        "start": "HOST=0.0.0.0 PORT=443 react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },

项目根目录下的基本脚本

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "client": "cd frontend && npm start",
        "client-prod": "cd frontend/build && npm install -g serve && serve -s build -l 443",
        "server": "cd backend && npm start",
        "sass": "node-sass -w frontend/source/styles/ -o frontend/source/styles/ --recursive",
        "dev": "concurrently \"npm run server\" \"npm run client\" ",
        "prod": "concurrently \"npm run server\" \"npm run client-prod\" "
    },

本地主机上的开发工作良好，但我需要在0.0.0.0:443上提供构建页面，而不是在本地主机上。

- Siddhut

Answer 1

如果您想将主机设置为0.0.0.0并禁用在键入yarn或npm start时自动打开浏览器，您可以在项目根目录中使用env文件，并设置HOST=0.0.0.0和BROWSER=none。有关更多信息，请查看此链接 https://create-react-app.dev/docs/advanced-configuration/。

- balogun tobi

Answer 2

根据React的高级配置页面，当您部署时，HOST环境变量不适用（在表中，请参见Production列，它说已忽略）。

这意味着HOST不是设置部署的方式。 HOST仅在您的开发PC上执行npm start时才起作用。

当您执行npm run build时，会获得一个/build文件夹，其中包含编译应用程序的所有内容，并且您将没有HTTP服务器。您需要自行选择、配置和部署用于部署的HTTP服务器。请查看部署页面，以全面了解此过程。

简而言之：HOST仅用于本地开发和测试。在部署中，您需要按照服务器的配置设置NGINX、Apache或任何其他服务器。

- José Ramírez