Deploying Laravel Reverb with Nginx as Proxy

Laravel Reverb is a real-time broadcasting solution using WebSockets. This guide explains how to set up and deploy Laravel Reverb in a production environment using Nginx as a reverse proxy. There are two deployment options: using a subdomain (e.g., ws.domain.com) or using a subpath (domain.com/ws).

Option 1: Using a Subdomain (ws.domain.com)

1. Create a WebSocket Subdomain

• In FlashPanel, create a new website for ws.domain.com.

• Set the proxy port to 8080.

2. Configure .env File

Add the following environment variables in your Laravel project:

REVERB_APP_ID=123456
REVERB_APP_KEY=this_is_app_key
REVERB_APP_SECRET=this_is_app_secret
REVERB_HOST="ws.domain.com"
REVERB_PORT=443
REVERB_SCHEME=https

3. Configure Nginx for WebSocket

• In FlashPanel, go to ws.domain.com** > Nginx tab**.

• Click "Add Custom Config (server)" and add the following configuration:

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;
}

Option 2: Using a Subpath (domain.com/ws)

1. Configure .env File

REVERB_APP_ID=123456
REVERB_APP_KEY=this_is_app_key
REVERB_APP_SECRET=this_is_app_secret
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SERVER_HOST="127.0.0.1"
REVERB_SERVER_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="domain.com"
VITE_REVERB_PORT="443"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

2. Configure Laravel Echo (JS)

Modify your JavaScript Echo configuration:

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,
    wsPath: "/ws", // <==== add this line
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});

3. Configure Nginx for WebSocket

• In FlashPanel, go to domain.com** > Nginx tab**.

• Click "Add Custom Config (server)" and add the following configuration:

location /ws {
    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;
}

location /ws/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/app;
}

Final Steps

• Restart Nginx to apply the changes.

• Ensure Laravel Reverb is running with the correct .env settings.

• Test WebSocket connectivity using a WebSocket client or browser console.

This guide ensures a proper setup for deploying Laravel Reverb using either a subdomain or a subpath with Nginx as a reverse proxy.