Setting Up a Reverse Proxy for WebSocket Traffic in Docker Compose

To set up a reverse proxy for WebSocket traffic in Docker Compose, follow these steps:

1. Configure the WebSocket Server Container:
- In your `docker-compose.yml` file, add a service for the WebSocket server:

yaml
     websockets:
         image: beyondcode/laravel-websockets
         ports:
             - "6001:6001"

- This will expose the WebSocket server on port 6001 inside the container.

2. Configure the Reverse Proxy (Nginx) Container:
- Add an Nginx container to your `docker-compose.yml` file:

yaml
     nginx:
         image: nginx:alpine
         ports:
             - "80"
             - "443"
         volumes:
             - ./nginx/conf.d:/etc/nginx/conf.d
         depends_on:
             - websockets

- This will expose Nginx on ports 80 and 443, and mount a local directory `./nginx/conf.d` to the Nginx configuration directory inside the container.

3. Create the Nginx Configuration File:
- Create a new file `./nginx/conf.d/default.conf` with the following content:

nginx
     server {
         listen 80;
         listen 443 ssl;

         ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
         ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;

         location / {
             proxy_pass https://websockets:6001;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "Upgrade";
             proxy_set_header Host $host;
         }
     }

- Replace `your-domain.com` with your actual domain name.
- This configuration will proxy all incoming traffic to the WebSocket server container.

4. Configure the WebSocket Server:
- In your Laravel application, update the WebSocket server configuration to listen on the correct host and port:

php
     // config/websockets.php
     'host' => env('LARAVEL_WEBSOCKETS_HOST', '0.0.0.0'),
     'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),

5. Configure the Pusher/Broadcasting Settings:
- Update the Pusher configuration in your `config/broadcasting.php` file to match the Nginx proxy settings:

php
     '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' => true,
             'host' => env('LARAVEL_WEBSOCKETS_HOST', '0.0.0.0'),
             'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
             'scheme' => 'http',
         ],
     ],

6. Start the Containers:
- Run `docker-compose up -d` to start the containers.

With this setup, all WebSocket traffic will be routed through the Nginx reverse proxy, which will then forward the requests to the WebSocket server container. This allows you to keep the WebSocket server and the main application separate, while still providing a secure and scalable WebSocket solution.

Citations:
[1] https://gist.github.com/alucard001/4fc56ba20b58d9b1e69b5e3dce276f6a
[2] https://www.heondokim.com/articles/laravel-websockets-nginx-docker
[3] https://github.com/beyondcode/laravel-websockets/issues/884
[4] https://www.digitalocean.com/community/tutorials/how-to-set-up-laravel-nginx-and-mysql-with-docker-compose
[5] https://stackoverflow.com/questions/76922641/laravel-in-php-fpm-as-reverse-proxy-in-docker-dont-want-to-put-2-sets-of-files

How do I set up a reverse proxy for WebSocket traffic in Docker Compose