时间戳

首页 > 解决方案 > 如何使用另一个 docker 容器作为主网站的子目录？

reactjs - 如何使用另一个 docker 容器作为主网站的子目录？

问题描述

我是 docker 和容器概念的新手，我想在端口：3000 托管一个带有容器的反应网站 xyz.com，并且我想将 Admin 子目录添加到其中，例如 xyz.com/Admin 在哪个主网站（xyz.com）是一个容器，/Admin 必须是另一个容器（总共 2 个容器）。请帮助我如何解决这个问题（例如 Dockerfile、代码或 docker-compose 中的更改）。

标签： reactjsdockerdocker-composedockerfile

解决方案

为此，您需要一个反向代理。反向代理将站在两个 Web 应用程序的前面，并将适当的路径映射到适当的容器。

我在这里为您提供了一个简单的示例，使用 docker-compose 和 nginx。它启动了三个 nginx 容器，一个充当代理，另外两个充当您的 Web 应用程序（root 和 admin）

项目结构：

/simple-proxy-two-websites
├── docker-compose.yml
├── default.conf

在 docker-compose 定义中，我们将配置映射到反向代理并将监听端口（80）映射到主机端口 80。然后我们只需设置两个默认的 nginx 容器来充当我们想要的 Web 应用程序服务。

docker-compose.yml

version: "3"

services:

  reverse-proxy:
    image: nginx
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - "web-admin"
      - "web-root"
    ports:
      - 80:80
  
  web-root:
    image: nginx
  
  web-admin:
    image: nginx

在 nginx 反向代理服务器配置中（取自 docker 映像附带的默认配置，删除了所有注释行），然后我们添加位置/admin并更改位置/，如下所示。请注意，该proxy_pass参数是一个使用上面 docker-compose 定义中定义的服务名称的 URL。当容器位于同一网络（在本例中为默认桥接网络）时，Docker 通过允许我们使用服务名称来简化此操作。

default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass              http://web-root:80/;  
    }
    
    location /admin {
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass              http://web-admin:80/;    
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

使用此配置，nginx 反向代理将执行内部网络将请求转发到proxy_pass定义/location的目标 - 目标不必从外部到达。

您可以使用此示例并使用您的服务名称和特定端口对其进行更新-它应该可以帮助您。

我还有一个完整的示例，我在其中覆盖了和容器的默认index.html页面，以验证是否已到达正确的目的地。如果您需要，请告诉我，然后我将在 GitHub 上的存储库中提供它。web-adminweb-root

推荐阅读