BrowserSync with Nginx and Traefik Reverse Proxy

[mikedoubintchik]

I'm unable to run BrowserSync with the Traefik reverse proxy. BrowserSync doesn't know what url to proxy and I'm not sure what to put there. I've tried every combination I can think of.

I've opened a similar ticket here with no response: BrowserSync/browser-sync#1506

And I opened the issue here with no response: https://discourse.roots.io/t/sage-9-with-docker/13476

Codebase

Built-in vanilla WordPress

Host OS

e.g. macOS Sierra

Docker info output

❯ docker info
Containers: 154
 Running: 6
 Paused: 0
 Stopped: 148
Images: 79
Server Version: 17.09.1-ce
Storage Driver: overlay2
 Backing Filesystem: extfs
 Supports d_type: true
 Native Overlay Diff: true
Logging Driver: json-file
Cgroup Driver: cgroupfs
Plugins:
 Volume: local
 Network: bridge host ipvlan macvlan null overlay
 Log: awslogs fluentd gcplogs gelf journald json-file logentries splunk syslog
Swarm: inactive
Runtimes: runc
Default Runtime: runc
Init Binary: docker-init
containerd version: 06b9cb35161009dcb7123345749fef02f7cea8e0
runc version: 3f2f8b84a77f73d38244dd690525642a72156c64
init version: 949e6fa
Security Options:
 seccomp
  Profile: default
Kernel Version: 4.9.49-moby
Operating System: Alpine Linux v3.5
OSType: linux
Architecture: x86_64
CPUs: 4
Total Memory: 1.952GiB
Name: moby
ID: KUCE:ESTY:LMPJ:K7RX:44U7:BBLW:OFT6:EMVR:BKX2:XY23:FD6M:H6J4
Docker Root Dir: /var/docker
Debug Mode (client): false
Debug Mode (server): true
 File Descriptors: 70
 Goroutines: 74
 System Time: 2019-08-02T14:36:44.907726493Z
 EventsListeners: 3
Registry: https://index.docker.io/v1/
Experimental: true
Insecure Registries:
 127.0.0.0/8
Live Restore Enabled: false

Docker compose file

Make sure you remove all commented services.

version: "3"

services:
    mariadb:
        image: wodby/mariadb:$MARIADB_TAG
        container_name: "${PROJECT_NAME}_mariadb"
        stop_grace_period: 30s
        environment:
            MYSQL_ROOT_PASSWORD: $DB_ROOT_PASSWORD
            MYSQL_DATABASE: $PROJECT_NAME
            MYSQL_USER: $DB_USER
            MYSQL_PASSWORD: $DB_PASSWORD
        volumes:
        - ./init/db:/docker-entrypoint-initdb.d # Place init .sql file(s) here.
        - ./data/db:/var/lib/mysql # I want to manage volumes manually.

    php:
        image: wodby/wordpress-php:$PHP_TAG
        container_name: "${PROJECT_NAME}_php"
        environment:
            WP_ENV: $ENV
            PHP_SENDMAIL_PATH: /usr/sbin/sendmail -t -i -S mailhog:1025
            DB_HOST: $DB_HOST
            DB_USER: $DB_USER
            DB_PASSWORD: $DB_PASSWORD
            DB_NAME: $PROJECT_NAME
            PHP_FPM_USER: wodby
            PHP_FPM_GROUP: wodby
            ## Read instructions at https://wodby.com/stacks/wordpress/docs/local/xdebug/
        #      PHP_XDEBUG: 1
        #      PHP_XDEBUG_DEFAULT_ENABLE: 1
        #      PHP_XDEBUG_REMOTE_CONNECT_BACK: 0
        #      PHP_IDE_CONFIG: serverName=my-ide
        #      PHP_XDEBUG_REMOTE_HOST: 172.17.0.1 # Linux
        #      PHP_XDEBUG_REMOTE_HOST: 10.254.254.254 # macOS
        #      PHP_XDEBUG_REMOTE_HOST: 10.0.75.1 # Windows
        volumes:
        - ./config/php/php.ini:/usr/local/etc/php/php.ini
        - ./www:/var/www/html
    #      - ./data/bin/build.sh:/usr/local/bin/build.sh
    #    command: /bin/ash -c "/usr/local/bin/build.sh"

    nginx:
        image: wodby/nginx:$NGINX_TAG
        container_name: "${PROJECT_NAME}_nginx"
        environment:
            NGINX_STATIC_OPEN_FILE_CACHE: "off"
            NGINX_ERROR_LOG_LEVEL: debug
            NGINX_BACKEND_HOST: php
            NGINX_VHOST_PRESET: wordpress
            #NGINX_SERVER_ROOT: /var/www/html/subdir
        depends_on:
        - php
        volumes:
        - ./www:/var/www/html
        ports:
        - "5000:5000"
        - "5001:5001"
        labels:
        - 'traefik.backend=${PROJECT_NAME}_nginx'
        - 'traefik.port=80'
        - 'traefik.frontend.rule=Host:${PROJECT_NAME}.docker.localhost'
    #      - 'traefik.frontend.rule=HostRegexp:{subdomain:.+}.${PROJECT_NAME}.docker.localhost,${PROJECT_NAME}.docker.localhost'

    pma:
        image: phpmyadmin/phpmyadmin
        container_name: "${PROJECT_NAME}_pma"
        environment:
            PMA_HOST: mariadb
            PMA_USER: user
            PMA_PASSWORD: password
            PHP_UPLOAD_MAX_FILESIZE: 1G
            PHP_MAX_INPUT_VARS: 1G
        labels:
        - 'traefik.backend=${PROJECT_NAME}_pma'
        - 'traefik.port=80'
        - 'traefik.frontend.rule=Host:pma.${PROJECT_NAME}.docker.localhost'

    mailhog:
        image: mailhog/mailhog
        container_name: "${PROJECT_NAME}_mailhog"
        labels:
        - 'traefik.backend=${PROJECT_NAME}_mailhog'
        - 'traefik.port=8025'
        - 'traefik.frontend.rule=Host:mailhog.${PROJECT_NAME}.docker.localhost'

[demyxco]

Hi @mikedoubintchik , I have Browsersync on a separate container and it turns out that it will not proxy an nginx container using a port that's not 80. I installed sudo on my nginx image, because running as root for the container isn't recommended, and now problem solved.

[mikedoubintchik]

@demyxco that's awesome! Could you please post your docker file and the browsersync config?

[demyxco]

@mikedoubintchik here's an example of mine, using Traefik as the reverse proxy. It's setup to be accessible via subdirectory instead of subdomain so I'm not generating additional LE certs. No ports are open and BrowserSync is accessible with HTTPS. You can see my Dockerfile and entrypoint script in my repo.

docker run -dit --rm \
--network=demyx \
--volumes-from=nginx_container \
-e BS_PROXY=nginx_container \
-e BS_DOMAIN=domain.tld \
-e BS_FILES="[\"/var/www/html/wp-content/themes/**/*\", \"/var/www/html/wp-content/plugins/**/*\"]" \
-e BS_PATH=/demyx \
-e BS_PORT=3000 \
-l "traefik.enable=true" \
-l "traefik.http.routers.domaintld-bs-https.rule=(Host(\`domain.tld\`) && PathPrefix(\`/demyx/bs/\`))" \
-l "traefik.http.routers.domaintld-bs-https.middlewares=domaintld-bs-prefix" \
-l "traefik.http.routers.domaintld-bs-https.entrypoints=https" \
-l "traefik.http.routers.domaintld-bs-https.tls.certresolver=demyx" \
-l "traefik.http.routers.domaintld-bs-https.service=domaintld-bs" \
-l "traefik.http.middlewares.domaintld-bs-prefix.stripprefix.prefixes=/demyx/bs/" \
-l "traefik.http.services.domaintld-bs.loadbalancer.server.port=3000" \
-l "traefik.http.routers.domaintld-socket-https.rule=(Host(\`domain.tld\`) && PathPrefix(\`/browser-sync/socket.io/\`))" \
-l "traefik.http.routers.domaintld-socket-https.middlewares=domaintld-socket-prefix" \
-l "traefik.http.routers.domaintld-socket-https.entrypoints=https" \
-l "traefik.http.routers.domaintld-socket-https.tls.certresolver=demyx" \
-l "traefik.http.routers.domaintld-socket-https.service=domaintld-socket" \
-l "traefik.http.middlewares.domaintld-socket-prefix.stripprefix.prefixes=/demyx/bs/browser-sync/socket.io/" \
-l "traefik.http.services.domaintld-socket.loadbalancer.server.port=3000" \
demyx/browsersync