docker-compose chrome-alpine 使用nginx

docker-compose chrome-alpine to use nginx

我有这个 docker-compose 配置,我想在其中嵌入一个 chrome 无头浏览器到 运行 我的 e2e 测试...

nginx 配置为反向代理 a url,比方说 foo.bar 到某个地方... 如果我使用我的主机浏览器,这工作得很好,我可以通过公开 444:443 端口来测试它!

然而,当我尝试使用 chrome-alpine 时它不起作用, 我导航到调试器 localhost:9222、select 实例,然后键入:http://foo.bar.

如何配置 alpine-chrome 以使用 nginx 容器?

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"

预计

  1. 导航到 localhost:9222
  2. 打开Chrome远程调试器
  3. 键入 url foo.bar
  4. 有 nginx 反向代理 foo.bar 到(例如)google.com

您需要在 chrome 容器下使用 links 并通过 nginx:port 调用 nginx :

links:
   - nginx

或者您可以为两个容器使用网络驱动程序 host,并通过 localhos:port

相互调用
network: host

网络配置应该在每个服务下,另见this

很遗憾我没有找到一个简单的解决方案,我想@Mostafa Hussein 的静态 ip 解决方案是实现需求的最简单的解决方案。

我调查的结果是将 foo.bar 别名为 127.0.0.1,并让 socat127.0.0.1 网络流量转发到 mynginx,这里, socat 可以使用 mynginx 而不能在 extra_hosts:

中使用

所以,我的解决方案是下一个,丑陋但万一以后有人需要它:

version: '3'

services:
  nginx:
    image: nginx:alpine
    container_name: mynginx
    command: [nginx-debug, "-g", "daemon off;"]
    ports:
      - "444:443"

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

  helper:
    image: ubuntu:16.04
    volumes:
      - /usr/bin/docker:/usr/bin/docker
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/lib/x86_64-linux-gnu/libltdl.so.7:/usr/lib/x86_64-linux-gnu/libltdl.so.7
    tty: true
    command: bash -c "docker exec -u root -it mychrome /bin/sh -c \"apk add socat && socat TCP4-LISTEN:80,reuseaddr,fork TCP4:mynginx:80\""
    depends_on:
      - chrome

测试:

shubuntu1@shubuntu1:~/99$ docker exec -it mychrome wget -q -O - http://foo.bar
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

我能够通过为 nginx 容器定义静态 IP 来使其工作,如下所示:

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

然后转到 localhost:9222 并打开一个新选项卡然后键入 foo.bar 您将获得与以下屏幕截图相同的内容: