react如何设置host

设置开发环境的 Host

在 React 开发中，可以通过修改 package.json 中的 scripts 部分来设置开发服务器的 host。使用 react-scripts 启动项目时，可以通过环境变量 HOST 指定 host。

修改 package.json 中的 start 脚本：

"scripts": {
  "start": "HOST=your-local-ip react-scripts start"
}

将 your-local-ip 替换为本地 IP 地址（如 192.168.1.100）或 0.0.0.0（允许所有网络访问）。

通过环境变量文件配置

在项目根目录创建或修改 .env 文件，添加以下内容：

HOST=0.0.0.0

保存后重启开发服务器，应用会自动读取该配置。

自定义开发服务器配置

如果使用 webpack-dev-server 或其他自定义配置，可以在 webpack.config.js 中直接设置：

devServer: {
  host: '0.0.0.0',
  port: 3000
}

生产环境 Host 配置

生产环境的 host 通常由部署的服务器（如 Nginx、Apache）或云服务（如 AWS、Vercel）控制，需在服务器配置文件中设置。例如 Nginx 的配置：

server {
  listen 80;
  server_name your-domain.com;
  location / {
    proxy_pass http://localhost:3000;
  }
}

验证配置是否生效

启动开发服务器后，在浏览器中访问 http://your-local-ip:3000，确保能正常加载应用。同时检查终端日志，确认服务器已监听指定 host。