Azure环境下Laravel Reverb与Vue前端Websocket连接失败求助

以下是针对Azure生产环境中Websocket连接失败的关键配置项与排查步骤：

1. 端口映射与启动配置 #

• 在Azure App Service的配置 > 常规设置中：
  • 设置启动命令为 php artisan reverb:start --host=0.0.0.0 --port=8080，确保Reverb服务监听正确端口。
  • 添加应用设置键值对 WEBSITES_PORT=8080，告知Azure将外部流量转发至该端口。
• 注：你报错中连接的是8081端口，但前后端配置均为8080，需确认前端实际连接地址是否与配置一致，避免端口混淆。

2. 显式开启Websocket支持 #

即使Linux App Service默认启用Websocket，仍需在配置 > 应用设置中添加：

WEBSITES_ENABLE_WEBSOCKET=true

该配置确保反向代理正确处理Websocket的Upgrade请求头。

3. Nginx反向代理配置（Linux环境） #

由于Linux App Service默认使用Nginx，需在项目根目录创建nginx.conf文件，确保Websocket请求被正确转发：

location /app {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

此配置保证/app前缀的Reverb请求（如/app/fs213123111）被完整转发到Reverb服务。

4. 网络访问限制 #

• 检查App Service的网络 > 访问限制，确认前端静态Web应用的域名或IP已被添加至允许列表。
• 若使用VNet集成，需确保VNet安全组规则允许8080端口的TCP流量进出。

5. 服务状态与日志排查 #

• 通过App Service的SSH终端运行 php artisan reverb:status，验证Reverb服务是否正常启动并监听8080端口。
• 查看监测 > 日志流中的应用日志，排查是否存在端口占用、权限不足或Reverb启动失败的错误信息。

6. 前端连接优化 #

• 前端可直接使用wss://sample-api.azurewebsites.net/app/fs213123111作为连接地址，无需指定端口（Azure会自动将443端口转发至配置的WEBSITES_PORT）。对应调整前端.env：

  VITE_REVERB_PORT=443
  # 或直接移除端口配置，Reverb会自动适配HTTPS默认端口
  

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