在Vultr中执行npm start启动React应用时遇配置错误求助

错误原因 #

你在服务器上启动React开发服务器时，allowedHosts配置项里存在空字符串或未正确设置的条目，不符合dev server的API规范。本地环境默认允许localhost等本地主机访问，因此不会触发该错误。

修复步骤 #

• 方法一：直接修改package.json的启动命令
  打开项目根目录的package.json，找到scripts下的start命令，添加主机配置参数：

  "scripts": {
    "start": "HOST=0.0.0.0 react-scripts start"
  }
  

  若需要指定允许访问的主机，可改为：

  "scripts": {
    "start": "ALLOWED_HOSTS=你的服务器IP,你的域名 react-scripts start"
  }
  

  把你的服务器IP和你的域名替换成实际的服务器IP地址或绑定的域名。

• 方法二：用.env文件配置
  在项目根目录创建.env文件（无则新建），写入以下内容：

  HOST=0.0.0.0
  ALLOWED_HOSTS=你的服务器IP,你的域名
  

  开发服务器会自动读取该文件的配置，允许指定主机访问。

• 方法三：自定义webpack配置（需eject或用craco）
  如果你已经eject了React项目，或者用craco等工具管理自定义配置，找到webpack的devServer配置段，确保allowedHosts是有效非空字符串数组：

  module.exports = {
    devServer: {
      allowedHosts: ['你的服务器IP', '你的域名']
    }
  };
  

额外提示 #

• 服务器上用npm start启动开发服务器仅适合调试，生产环境请执行npm run build生成静态文件后部署。
• 确保Vultr服务器防火墙开放了React开发服务器默认的3000端口（或你自定义的端口）。

内容的提问来源于stack exchange，提问作者soccerway