Homestead环境下运行npm run watch时localhost:3000返回502错误如何排查

排查步骤 #

1. 检查Browsersync配置
   打开项目根目录下的webpack.mix.js，找到browsersync配置项，确认proxy参数的值为你Homestead绑定的站点域名myproject.test，不要配置为127.0.0.1:8000或者其他地址：

mix.browserSync({
    proxy: 'myproject.test',
    // 如果是在虚拟机内运行npm run watch，需要添加下面这行允许外部访问
    host: '0.0.0.0',
    // 端口被占用时可以手动指定其他端口
    port: 3000
})

修改配置后重新执行npm run watch测试。

2. 检查本地3000端口占用
   本地执行命令查看3000端口是否被其他进程占用：

• Windows系统：netstat -ano | findstr "3000"
• Mac/Linux系统：lsof -i:3000
  如果有其他进程占用3000端口，终止占用进程，或者在browsersync配置中修改port参数换用其他未被占用的端口。

3. 检查Homestead端口转发配置
   打开Homestead根目录下的Homestead.yaml，确认端口转发规则中包含3000端口的转发配置：

ports:
    - send: 3000
      to: 3000

修改配置后执行vagrant reload --provision重启虚拟机生效。

4. 检查本地hosts配置
   确认本地hosts文件中已经添加了myproject.test指向Homestead虚拟机IP的配置，默认Homestead虚拟机IP为192.168.10.10，配置格式如下：

192.168.10.10 myproject.test

问题原因说明 #

127.0.0.1:8000是php artisan serve在本地直接启动的PHP内置服务，myproject.test是Homestead的Nginx转发到虚拟机内Laravel应用的正常站点地址，二者都不依赖Browsersync服务。而localhost:3000是Browsersync启动的代理服务，需要将请求转发到后端配置的站点地址，当代理配置错误、网络不通、端口被占时，就会返回502 Bad Gateway错误。

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