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

我不熟悉docker和容器概念，我想在port:3000托管一个react网站xyz.com和一个容器，我想在其中添加Admin子目录，如xyz.com/Admin，其中主网站（xyz.com）是一个容器，而/Admin必须是另一个容器（总共2个容器）。请帮助我如何解决这个问题（如Dockerfile、code或docker compose中的更改）。

这需要一个反向代理。反向代理将位于两个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

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;
    }
}

版本：“3”
服务：
反向代理：
图片：nginx
卷数：
-./default.conf:/etc/nginx/conf.d/default.conf:ro
取决于：
-“网络管理员”
-“web根目录”
端口：
- 80:80
web根目录：
图片：nginx
网站管理员：
图片：nginx

在nginx反向代理服务器配置中（取自docker映像附带的默认配置，删除所有注释行），然后添加位置

/admin

，并更改位置

/

，如下所示。请注意，

proxy\u pass

参数是一个URL，它使用上面docker compose定义中定义的servicename。当容器位于同一网络（在本例中为默认网桥网络）上时，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反向代理将请求通过内部网络转发到

/location

中定义的

/proxy\u pass

目的地-不必从外部访问目的地

您可以以这个示例为例，用您的服务名和特定端口更新它-它应该可以让您继续

---

我还有一个完整的示例，其中我覆盖

web admin

和

web root

容器的默认

index.html

页面，以验证是否已到达正确的目标。如果您需要，请告诉我，然后我将在GitHub上的存储库中提供它。

Docker在本机上不使用基于HTTP路径的路由。你需要一个反向代理，它的配置将与你没有使用Docker时完全相同。嗨@DavidMaze，谢谢你的回复。你能详细说明一下我怎么做反向代理吗？我完全是新手