如何让 creat-react-app build 监听 0.0.0.0 而不是 localhost？

Question

我有一个要在实例上部署的 create-react-app 引导项目。 现在有两种方法我尝试设置部署，最终只设置端口而不是主机。

我的项目架构如下

Project
- Frontend
- Backend

我的主要问题是，虽然我能够在 create-react-app build 上设置端口，但我无法将主机名设置为 0.0.0.0 而不是 localhost。

在 create-react 应用程序中，我在启动脚本中硬编码HOST=0.0.0.0和PORT=443 。

我尝试的另一件事是有一个脚本在端口 443 上服务页面。构建服务于端口 443 但不在 0.0.0.0 上。

创建反应应用程序脚本

"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\" "
    },

localhost 上的开发工作正常，但我需要能够在 0.0.0.0:443 而不是 localhost 上提供我的构建页面

Answer 1

env 文件而不是在您的项目的根目录中并设置 HOST=0.0.0.0，如果您还想在键入 yarn 或 npm start 时禁用自动打开浏览器，您还可以设置 BROWSER=none。 检查此链接以获取更多信息https://create-react-app.dev/docs/advanced-configuration/

Answer 2

根据 React 的高级配置页面，部署时不会应用 HOST 环境变量（在表中，请参阅 Production 列，它显示Ignored ）。

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

当您执行npm run build时，您将获得一个包含已编译应用程序所有内容的/build文件夹，并且您没有获得 HTTP 服务器。 您自己选择、配置和部署的用于部署的 HTTP 服务器。 请参阅部署页面以完全理解这一点。

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