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 协议》，转载必须注明作者和本文链接