Laravel reverb with ssl on nginx

Question

Currently changing beyondcode/laravel-websockets for laravel/reverb

Reverb and laravel echo success running on local without ssl

I use a simple chirper laravel app: https://github.com/jbarreraballestas/laravel-chirper-react-realtime/tree/laravel-reverb

config/reverb.php

'servers' => [

        'reverb' => [
            'host' => env('REVERB_SERVER_HOST', '0.0.0.0'),
            'port' => env('REVERB_SERVER_PORT', 8080),
            'hostname' => env('REVERB_HOST'),
            'options' => [
                'tls' => [
                        'local_cert'=>'/chirper_cert/cert1.pem' // certbot certificate with 777 permissions while check if success but not work
                ],
            ],
            'scaling' => [
                'enabled' => env('REVERB_SCALING_ENABLED', false),
                'channel' => env('REVERB_SCALING_CHANNEL', 'reverb'),
            ],
            'pulse_ingest_interval' => env('REVERB_PULSE_INGEST_INTERVAL', 15),
        ],

    ],

Trying to use proxy pass

server {

        root /var/www/laravel-chirper-react-realtime/public;
        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-Content-Type-Options "nosniff";
        index index.php;
        charset utf-8;
        server_name example.com;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }

        location = /favicon.ico { access_log off; log_not_found off; }
        location = /robots.txt  { access_log off; log_not_found off; }
        error_page 404 /index.php;

        location ~ \.php$ {
                fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
                fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
                include fastcgi_params;
        }
# Added this for Web Sockets Proxy
    location /ws/ {
     proxy_pass             http://127.0.0.1:8080;
     proxy_set_header Host  $host;
     proxy_read_timeout     60;
     proxy_connect_timeout  60;
     proxy_redirect         off;

    # Allow the use of websockets
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection 'upgrade';
     proxy_set_header Host $host;
     proxy_cache_bypass $http_upgrade;
    }

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

Error:

WebSocket connection to 'wss://example:8080/app/fl2qodkdxamxyygnpbur?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed

Answer 1

It took 2 weeks of experiments but this worked for me

1. In your DNS add a CNAME record for "ws.mysite.com"
2. In forge, go to your site -> settings -> add an alias to your main site for "ws.mysite.com"
3. In forge, delete your SSL cert and create a new one with 2 values "mysite.com, ws.mysite.com"
4. In forge, turn on Reverb with the default settings
5. In forge, open the default Nginx config for your site and remove the "ws.mysite.com" so it looks like this

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/olmdev.online/before/*;

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name mysite.com; # ws.mysite.com removed

6. Add these values to your .env

REVERB_HOST=ws.mysite.com
REVERB_PORT=443
REVERB_SCHEME="https"

Add npm run build and reverb:restart to your deployment script so it looks like this

npm run build

$FORGE_PHP artisan reverb:restart

Answer 2

Managed to get SSL working. Tutorial here: https://medium.com/@scottjforbes/secure-websockets-using-laravel-reveb-and-apache-on-aws-ec2-with-alb-and-acm-665f43fb6568

Answer 3

I made a new subdomain for example

server {
    server_name wss.yourdomain.net www.wss.yourdomain.net;
    access_log /var/log/nginx/wss_access.log;
    error_log /var/log/nginx/wss_error.log;
    root /var/www/yourdomain.net/public;

    index index.php;

    charset utf-8;

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

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

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css)$ {
        expires 365d;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/wss.yourdomain.net/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/wss.yourdomain.net/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

then modified .env on root domain updating the reverb hostname and commented out the reverb port. Inside reverb config I've also put 'port' => env('REVERB_PORT', null)

• php artisan reverb:restart
• php artisan reverb:start --debug

test your URL wss://wss.yourdomain.net/app/{REVERB_APP_KEY}?protocol=7&client=js&version=8.4.0-rc2&flash=false @ https://websocketking.com/

Answer 4

Install laravel/reverb in laravel 10

composer require laravel/reverb:dev-main

php artisan reverb:install

Install laravel/reverb in laravel 11

php artisan install:broadcasting

nginx listen on 443:

server{
...
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_read_timeout 300s;
    proxy_connect_timeout 75s;
    proxy_pass http://127.0.0.1:8080;
}
...
}

Update laravel .env

REVERB_HOST="example.com"
REVERB_PORT=443
REVERB_SCHEME=https

Build resources

npm run build

Now connection to websockets will be established through secure connections

Related resources links:

https://serverfault.com/questions/1156283/how-to-successfull-configure-nginx-for-laravel-reverb-websocket

https://youtu.be/LiinzmPRYHE (spanish)