reactjs - 如果我将 HOST 绑定到它，我如何访问我的容器化 create-react-app？

Question

我需要HOST在开发时将 a 绑定到我的 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（而且我还需要HTTPS=true在我的 create-react-app 上），我需要http://local.myapp.example.com:9520从 Chrome 中点击（不确定 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

概括

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

标签： reactjsdockercreate-react-app