Question

我需要在开发中将HOST绑定到我的React应用程序，以便可以代理到云中的其他服务。假设主机为local.myapp.example.com。

我一直在运行e2e测试，方法是启动几个容器，包括一个带有我的React应用程序实例的容器，然后让Puppeteer对其发出请求。到目前为止，只需暴露端口即可通过localhost访问该应用程序：

// docker-compose.e2e.yml
- ports:
  - 8080:3000 # app is running on 3000 inside the container.

现在，我已将其绑定到上面的HOST，我无法访问容器内的应用程序。我已将笔记本电脑的/etc/hosts更新为：

// /etc/hosts - laptop
0.0.0.0 local.myapp.example.com

有了它，当我在笔记本电脑上运行该应用程序时，它就可以工作，但是当我在容器中运行该应用程序时，它就无法工作

我想念什么？

更新1

如果我进入容器，可以运行curl local.myapp.example.com:3000，它可以工作。

从另一个容器（带有Puppeteer的容器）中，我不知道要使用哪个URL来命中它。在添加主机之前，我只会使用docker容器的名称，例如http://frontend:3000，但现在我不知道，因为URL不起作用

更新2

这是我的docker-compose文件。我之前没有提到它，是因为我不想问一个过于复杂的问题，但是由于我发布的是docker-compose，也可能会这样：容器位于反向代理之后：

version: '3'
services:
  nginx:
    container_name: nginx
    image: nginx
    depends_on:
      - frontend
      - backend
    volumes:
      - ./frontend.conf:/etc/nginx/conf.d/frontend.conf
    ports:
      - "9520:8080"

  frontend:
    container_name: frontend
    build:
      context: ..
      dockerfile: Dockerfile.e2e
    depends_on:
      - backend

  backend:
    container_name: backend
    image: my.private.registry/user/backend:latest


// reverse proxy conf
server {
  listen 8080;

  location /api {
      proxy_pass         http://backend:3000/api;
      proxy_redirect     off;
      proxy_set_header   Host $host;
      proxy_set_header   X-Real-IP $remote_addr;
      proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Host $server_name;
  }

  location / {
      # proxy_pass         http://frontend:3000;
      proxy_pass         https://frontend:3000;
      proxy_redirect     off;
      proxy_set_header   Host $host;
      proxy_set_header   X-Real-IP $remote_addr;
      proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Host $server_name;
  }
}

我以前从Chrome浏览器中打过http://localhost:9520。现在，我需要绑定HOST（并且我的create-react-app上还需要HTTPS=true），我需要从Chrome浏览器中访问http://local.myapp.example.com:9520（不确定是否需要使用https在这里？）。

在反向代理容器中，我可以执行curl --insecure --header 'Host: local.myapp.example.com' https://frontend:3000并解决。

在Chrome浏览器中，我尝试同时击中http和https local.myapp.example.com:9520，但这是行不通的。

如果我做http://local.myapp.example.com:9520，则邮递员可以使用

摘要

我需要能够从笔记本电脑上的Chrome（或Puppeteer）中访问https://local.myapp.example.com:9520，它应该转到端口8080上的反向代理容器。然后，反向代理会将它proxy_pass frontend到端口3000上的[ngModel]容器。

如果将主机绑定到容器化的create-react-app，该如何访问它？

更新1

更新2

摘要

0 个答案: