Question 81429 in Docker Question posted in
The official documentation can be found here.

Shopware 6 Webpack hot reload in Docker Setup

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?

Tags:

2

Answers


  1. 0

    Hm, worthwhile to also name the system you are running on. I had a few issues with Win10, running Docker on WSL2 with the firewall ports being blocked off. Maybe you will need to check the firewall too.

    Another resource to look at is the images built by https://dockware.io Their images are robust & configured to run the watchers on most setups. You could check how they build those images on GitHub and see what configurations they use, maybe here would be a good start: https://github.com/dockware/dockware/blob/v1.5.4/template/Dockerfile.global.sh.twig

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search