如何将本地Laravel项目连接到线上的Reverb服务？

我已按照Laravel文档将Reverb应用部署在mydomain.com，使用8080端口。请问能否让本地开发项目连接这个线上的Reverb应用？

相关配置 #

Nginx配置 #

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80;
    listen [::]:80;
    server_name mydomain.com;
    server_tokens off;
    root /var/www/faceid/public;

    index index.php;

    charset utf-8;

    location /index.php {
        try_files /not_exists @octane;
    }

    location / {
        try_files $uri $uri/ @octane;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/mydomain.com-error.log error;

    error_page 404 /index.php;

    location @octane {
        set $suffix "";

        if ($uri = /index.php) {
            set $suffix ?$query_string;
        }

        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 $connection_upgrade;

        proxy_pass http://127.0.0.1:8000$suffix;
    }

    location /app {
        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的.env配置 #

REVERB_APP_ID=*****
REVERB_APP_KEY=*****
REVERB_APP_SECRET=*****
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="reverb.myserver.my.id"
VITE_REVERB_PORT=443
VITE_REVERB_SCHEME=https

本地项目的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,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

已尝试的操作 #

• 将线上Reverb的凭证用于本地开发环境
• 尝试网上多种方案（包括硬编码修改）
• 咨询多个AI工具但未解决

本地项目可以连接线上Reverb服务，你的配置存在几处关键问题，逐一修正即可：

1. 修正Nginx的Reverb代理配置 #

你的Nginx将/app路径代理到Reverb的8080端口，但需要完善WebSocket代理配置，同时必须配置HTTPS（对应本地VITE配置的443端口和https协议）：

调整Reverb代理的location块 #

location /app {
    proxy_http_version 1.1;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    # 增加超时配置，避免WebSocket连接被过早断开
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;

    proxy_pass http://127.0.0.1:8080;
}

配置HTTPS监听 #

确保reverb.myserver.my.id或mydomain.com绑定SSL证书，监听443端口：

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name mydomain.com reverb.myserver.my.id; # 包含Reverb的访问域名

    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 保留原有Nginx配置...

    location /app {
        # 上面修正后的代理配置
    }
}

2. 修正线上Reverb的.env配置 #

线上Reverb的REVERB_HOST不能设为localhost，否则服务仅绑定本地回环地址，无法接收外部请求：

REVERB_HOST="0.0.0.0" # 绑定到所有网卡，允许Nginx转发请求
REVERB_PORT=8080
REVERB_SCHEME=http # 线上Reverb本身用http，由Nginx做HTTPS反向代理

3. 修正本地项目的Echo配置 #

本地项目的.env配置 #

添加Reverb代理路径的变量，确保域名和端口配置正确：

VITE_REVERB_APP_KEY="线上的REVERB_APP_KEY"
VITE_REVERB_HOST="reverb.myserver.my.id" # 或mydomain.com，确保DNS解析正常
VITE_REVERB_PORT=443
VITE_REVERB_SCHEME=https
VITE_REVERB_PATH="/app" # 关键：指定Nginx代理的Reverb路径

修正echo.js代码 #

新增path参数，匹配Nginx的代理路径：

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,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: import.meta.env.VITE_REVERB_SCHEME === 'https',
    enabledTransports: ['ws', 'wss'],
    path: import.meta.env.VITE_REVERB_PATH || '/app', // 新增路径配置
});

4. 最后检查项 #

• 重启线上的Reverb服务和Nginx服务，确保配置生效
• 用防火墙限制线上服务器8080端口仅允许本地Nginx访问，禁止外部直接访问
• 测试本地网络能否访问线上Reverb域名，可使用ping或curl验证
• 查看浏览器控制台（F12 -> Network -> WS）的WebSocket连接错误信息，根据具体提示排查

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