Use revers_proxy with websocket from react-app watch devmod

Help
1

I must use caddy only in dev environment.

I configure a container for
backend: api-platform app
frontend: react-admin app

Because I have problem of CORS
I use a reverse_proxy vs frontend
All works except the WebSocket I think that this connection is util for watch mode and hot reload, in fact, it doesn’t work,

Caddy config

{
	debug
}


{$SERVER_NAME:localhost} {
	log {
		# Redact the authorization query parameter that can be set by Mercure
		format filter {
			request>uri query {
				replace authorization REDACTED
			}
		}
	}

	root * /app/public
	encode zstd br gzip

	vulcain

	{$CADDY_SERVER_EXTRA_DIRECTIVES}

	# Disable Topics tracking if not enabled explicitly: https://github.com/jkarlin/topics
	header ?Permissions-Policy "browsing-topics=()"

	respond /pippo "Hello Pippo" 200
	reverse_proxy /pluto http://frontend:3000
	reverse_proxy /static/* http://frontend:3000
	# reverse_proxy '/manifest.json' '/robots.txt' http://frontend:3000

	respond /pippo "Hello Pippo" 200
	reverse_proxy /pluto http://frontend:3000
	reverse_proxy /static/* http://frontend:3000
	reverse_proxy /dashboard-topimage.png http://frontend:3000
	# reverse_proxy '/manifest.json' '/robots.txt' http://frontend:3000

	@websockets `header({'Connection':'*Upgrade*','Upgrade':'websocket'})`

	reverse_proxy @websockets "Ti becco ?" 200

	php_server
}

Error in console app

WebSocketClient.js:13 WebSocket connection to 'wss://localhost:3000/ws' failed:
2

Huh? Websockets are not plain HTTP. You can’t just create a HTTP 200 response.

3

Mmm this is only a test.
But what I should will do?

4

You need a backend that can handle WebSocket connections. Caddy will simply relay the messages.

5

Ok my backend (docker container is like this)

services:
  php:
    image: ${IMAGES_PREFIX:-}app-php
    restart: unless-stopped
    environment:
      SERVER_NAME: ${SERVER_NAME:-localhost}, php:80
      MERCURE_PUBLISHER_JWT_KEY: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
      MERCURE_SUBSCRIBER_JWT_KEY: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
      SYMFONY_VERSION: ${SYMFONY_VERSION:-}
      STABILITY: ${STABILITY:-stable}
      SENTRY_DSN: ${SENTRY_DSN}
      SENTRY_ENVIRONMENT: ${SENTRY_ENVIRONMENT}
    volumes:
      - caddy_data:/data
      - caddy_config:/config
    ports:
      # HTTP
      - target: 80
        published: ${HTTP_PORT:-80}
        protocol: tcp
      # HTTPS
      - target: 443
        published: ${HTTPS_PORT:-443}
        protocol: tcp
      # HTTP/3
      - target: 443
        published: ${HTTP3_PORT:-443}
        protocol: udp

  frontend:
    ports:
        - 3000:3000
    volumes:
        - ${PWD}/../frontend/admin:/app
    working_dir: /app
    image: node:22-alpine
    command: npm run start --host 0.0.0.0

volumes:
  caddy_data:
  caddy_config:```
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.