Shopware 6 Webpack hot reload in Docker Setup

Question

I am running a Shopware 6 production instance in a Docker setup using PHP-FPM as an app container and nginx as reverse proxy. Everything works fine, Shopware is served under https://localhost.

Now I tried to use the built-in hot proxy to use hot reloading when developing on our storefront theme. As the hot proxy is running in the docker container, I had to open the ports and pass the requests to the app container.

Starting the hot proxy using ./bin/watch-storefront.sh it is starting without errors or warnings:

ℹ ｢wds｣: Project is running at https://localhost:9998/
ℹ ｢wds｣: webpack output is served from https://localhost:9998/
ℹ ｢wds｣: Content not from webpack is served from /var/www/html/vendor/shopware/storefront/Resources/app/storefront/dist
Starting the hot reload server: 



 DONE  Compiled successfully in 7420ms                                                                                                                                                                   1:05:40 PM

############
Storefront proxy server started at https://localhost:9998
############

When I'm browsing to http://localhost:9998 or https://localhost:9998 I just get a 502 Bad Gateway error. Using the http URL, the server writes Rejecting request "GET localhost/" on proxy server for "localhost:9998" to the console.

What I actually did

I've added ports 9998 and 9999to my docker-compose.yml:

docker-compose.yml

ports:
  - "80:80"
  - "443:443"
  - "9000:3276"
  - "9998:9998"
  - "9999:9999"

I also extended my nginx.conf to pass the requests to the app container where the hot reload server is running.

nginx.conf

server {
    listen 9998 default_server;

    location / {
        proxy_pass http://naturanum_app:9998;
    }
}

server {
    listen 9999 default_server;

    location / {
       proxy_pass http://naturanum_app:9999;
    }
}

server {
    listen 3276 default_server;

    location / {
        proxy_pass http://naturanum_app:3276;
    }
}

Also followed the docs and built JavaScript, Administration and Storefront once before starting the watcher - but it is also not working.

Any ideas how to use the Webpack Hot Proxy inside a Docker container behind a nginx reverse proxy?

Answer 1

You need basically 2 things when working with a reverse proxy, a shop container and the watcher

• docker-compose with correct ports
• nginx with correct configuration

...here is the solution that works on our end

a) docker-compose

please add the correct ports to your nginx reverse proxy

  proxy:
      container_name: proxy
      image: dockware/proxy:latest
      ports:
        - "80:80"
        - "443:443"
        - "3000:3000"
        - "8888:8888"
        - "9999:9999"
        - "9998:9998"
      volumes:
        - "./hmr-storefront.conf:/etc/nginx/conf.d/hmr-storefront.conf"

b) nginx proxy conf (hmr-storefront.conf)

This makes sure that https://(mydomain):9998 is loading the watcher

server {
    listen                    9998 ssl;
    server_name               default_server;

    ssl_certificate /etc/nginx/ssl/selfsigned.crt;
    ssl_certificate_key /etc/nginx/ssl/selfsigned.key;

    location / {
        proxy_pass            http://shop:9998;
        proxy_next_upstream   error timeout invalid_header http_500 http_502 http_503 http_504;
    }
}

If you now start the watcher (e.g. in dockware => cd /var/www && make watch-storefront), you should be able to consume the watcher version through your proxy.