'laravel-websockets in production with reverse proxy and docker cannot establish connection

I am using laravel-websocket successfully in local and staging environment. However, when in production, I get the error WebSocket connection to '<URL>' failed: WebSocket is closed before the connection is established..

The php application is running in a container and the websocket server is running in a different container, both linked with link attribute in the dockerfile.

version: '3'
services:
    vcm_php:
        [...]
        container_name: vcm_php
        ports:
          - "8030:8000"
        env_file: .env
        links:
          - websockets:websockets
        networks:
            default:
                aliases:
                    - default

websockets:
        [...]
        container_name: websockets
        ports:
            - "6001:6001"
        env_file: .env
        command: "php /app/artisan websockets:serve"

The app is served behind a reverse proxy that is on another server: architecture

I have tried this config, with and without the ProxyPass on /app. site config

I am usign this Echo config:

 window.Echo = new Echo({
     broadcaster: 'pusher',
     key: process.env.MIX_PUSHER_APP_KEY || 'MDCV_PUSHER_APP_KEY',
     cluster: process.env.MIX_PUSHER_APP_CLUSTER || 'mt1',
     wsHost: window.location.hostname,
     wsPort: 6001,
     wssPort: 6001,
     encrypted: process.env.MIX_PUSHER_ENCRYPTED === 'false' ? false : true,
     forceTLS: process.env.MIX_PUSHER_FORCE_TLS === 'false' ? false : true,
     disableStats: true,
     enabledTransports: ['ws', 'wss'],
 });

I have also changed the broadcast.php pusher connection with

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => env('PUSHER_APP_ENCRYPTED', false),
                'host' => env('PUSHER_APP_HOST', '127.0.0.1'),
                'port' => 6001,
                'scheme' => env('PUSHER_APP_SCHEME', 'http'),
                'curl_options' => [
                    CURLOPT_SSL_VERIFYHOST => 0,
                    CURLOPT_SSL_VERIFYPEER => 0,
                ],
            ],
        ],

Using these .env

PUSHER_APP_ID=MDCV_PUSH_APP_ID
PUSHER_APP_KEY=MDCV_PUSHER_APP_KEY
PUSHER_APP_SECRET=MDCV_PUSHER_SECRET
PUSHER_APP_CLUSTER=mt1
PUSHER_APP_HOST=websockets

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

PUSHER_APP_SCHEME=https
PUSHER_APP_ENCRYPTED=true
PUSHER_FORCE_TLS=true
PUSHER_ENCRYPTED=true
MIX_PUSHER_FORCE_TLS="${PUSHER_FORCE_TLS}"
MIX_PUSHER_ENCRYPTED="${PUSHER_ENCRYPTED}"

The app is in https with a letsencrypt certificate.

What could be missing or wrong?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source