docker-compose chrome-alpine to use nginx

Question

I have this docker-compose configuration in which I want to embed a chrome headless browser to run my e2e tests...

The nginx is configured to reverse proxy a url, let's say foo.bar to somewhere... this works just fine if I use my host browser, and I can test it by exposing the 444:443 ports!

however, it doesn't work when I try to use the chrome-alpine one, I navigate to the debugger localhost:9222, select the instance and then type: http://foo.bar.

How can I configure alpine-chrome to use the nginx container?

services:
  nginx:
    image: nginx:alpine
    command: [nginx-debug, "-g", "daemon off;"]
    volumes:
      - ../../config/nginx/nginx.config.d:/etc/nginx/conf.d/server.conf
      - ../../config/nginx/certs:/etc/nginx/certs
    ports:
      - "444:443"

  chrome:
    image: zenika/alpine-chrome:latest
    command: [chromium-browser, "--headless", "--disable-gpu", "--no-sandbox", "--remote-debugging-address=0.0.0.0", "--remote-debugging-port=9222"]
    ports:
      - "9222:9222"

Expected

1. Navigate to localhost:9222
2. Open the Chrome remote debugger
3. type the url foo.bar
4. have nginx reverse proxy foo.bar to (e.g.) google.com

Answer 1

I was able to make it work by defining a static IP for the nginx container like below:

Note: The purpose of setting a static IP for nginx is to avoid any issue that could happen due to ip changes.

version: "2"
services:
  nginx:
    image: nginx:alpine
    command: [nginx-debug, "-g", "daemon off;"]
    ports:
      - 80:80
    networks:
      nginx-chrome-network:
        ipv4_address: 172.28.1.1

  chrome:
    image: zenika/alpine-chrome:latest
    command: [chromium-browser, "--headless", "--disable-gpu", "--no-sandbox", "--remote-debugging-address=0.0.0.0", "--remote-debugging-port=9222"]
    ports:
      - "9222:9222"
    networks:
      - nginx-chrome-network
    extra_hosts:
      foo.bar: 172.28.1.1


networks:
  nginx-chrome-network:
    ipam:
      driver: default
      config:
        - subnet: 172.28.0.0/16

Then by going to localhost:9222 and opening a new tab then typing foo.bar you will get same as the following screenshot: