Laravel Reverb 生产环境配置

为 websocket 连接配置独立域名

ws.site.test
为这个域名创建一个新的 nginx 站点，配置代理转发

location / { proxy_http_version 1.1; proxy_set_header Host $http_host; proxy_set_header Scheme $scheme; proxy_set_header SERVER_PORT $server_port; proxy_set_header REMOTE_ADDR $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_pass http://0.0.0.0:8080; // reverb 监听端口 }

配置 reverb 和 echo

echo.js

import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; window.Pusher = Pusher; window.Echo = new Echo({ broadcaster: 'reverb', key: import.meta.env.VITE_REVERB_APP_KEY, wsHost: import.meta.env.VITE_REVERB_HOST, wsPort: import.meta.env.VITE_REVERB_PORT ?? 80, wssPort: import.meta.env.VITE_REVERB_PORT ?? 443, forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https', enabledTransports: ['ws', 'wss'], });

.env

REVERB_APP_ID=your-app-id REVERB_APP_KEY=your-app-key REVERB_APP_SECRET=your-app-secret REVERB_HOST="127.0.0.1" REVERB_PORT=8080 REVERB_SCHEME=http VITE_REVERB_APP_KEY="${REVERB_APP_KEY}" VITE_REVERB_HOST="ws.site.test" VITE_REVERB_PORT="443" VITE_REVERB_SCHEME="https"

最坑的部分来了，当我们安装了 Laravel reverb 之后，这里的默认配置是这样的

REVERB_APP_ID=your-app-id REVERB_APP_KEY=your-app-key REVERB_APP_SECRET=your-app-secret REVERB_HOST="127.0.0.1" REVERB_PORT=8080 REVERB_SCHEME=http VITE_REVERB_APP_KEY="${REVERB_APP_KEY}" VITE_REVERB_HOST="${REVERB_HOST}" VITE_REVERB_PORT="${REVERB_PORT}" VITE_REVERB_SCHEME="${REVERB_SCHEME}"

VITE_REVERB_XXX 配置会沿用上面的 REVERB_XXXX 配置，这就导致一个问题：线上环境是通过 443 端口通信然后转发到 websocket 的监听端口，而这里直接指向了 ${REVERB_PORT} 就是 8080，实际上下面的 VITE_REVERB_XXXX 是前端的单独一套通信端口和协议，上面的 REVERB_XXX 才是服务器本机监听的参数。

实际上生产环境 wss 协议都是 443 端口通信的，通常不会再开放一个端口给 websocket，这就导致了一个问题，npm run build 的时候会把 8080 端口作为前端的 wss 通信协议端口，而 8080 实际上是本机监听的不对外开放，而且 VITE_REVERB_HOST 应该是我们的项目域名， REVERB_HOST 是我们 Reverb 监听的主机地址，通常都是 127.0.0.1。本地开发的时候不容易发现问题，挪到线上之后 wss 无论如何连接不上。

// 服务器本地监听配置 REVERB_APP_ID=your-app-id REVERB_APP_KEY=your-app-key REVERB_APP_SECRET=your-app-secret REVERB_HOST="127.0.0.1" // 通常都是监听本机通信 REVERB_PORT=8080 // 监听端口 REVERB_SCHEME=http // 这里是 http 通信，因为 443 端口转发给 8080 之后就不是 https 协议了 //前端打包配置 VITE_REVERB_APP_KEY="${REVERB_APP_KEY}" VITE_REVERB_HOST="ws.site.test" // 单独域名 VITE_REVERB_PORT="443" // wss 协议的 443 端口 VITE_REVERB_SCHEME="https" // 加密通信

我一开始以为是端口放行或者是通信的问题，没注意这里的配置，Laravel 文档也没提。

这里前后端一定要做两套配置！！！
这里前后端一定要做两套配置！！！
这里前后端一定要做两套配置！！！

踩了个大坑，记录一下。

本作品采用《CC 协议》，转载必须注明作者和本文链接