Reactjs 使用AWS ECS Fargate的微型前端架构

我们正在尝试使用AWS ECS实现微型前端架构。到目前为止，我们有一个包含1个fargate服务的集群、一个包含2个容器的fargate任务和一个ALB。每个容器都拥有一个使用NGINX监听唯一端口（例如3000、3001等）的微型前端，并具有一个路径模式（例如/containerA*和/containerB*）的对应目标组。默认的目标组是第一个容器

每个微型前端将在主站点内使用相对路径进行引用，并使用iframe显示（例如

）

概述：

我们有两个微型前端：A和B。A是主要的微型前端，在单个iframe中显示所有子级。所有路线都应直接通过A来显示子微前端。例如：

• -->显示一个
• -->显示一个
• -->在A的内部显示B

问题：

我们能够让这个架构正常工作。但是，at或iframe for会显示404 not found错误，这表明NGINX配置中存在路由问题。对于B.如果客户端导航到相同的问题，则会发生。但是，B的内容不会显示在A内容内部的iframe中。B的内容显示为其自己的页面

containerA

/etc/nginx/conf.d/default.conf.bak：

server {
    listen 3000;

    root /var/www/html;
    index index.html;

    access_log /var/log/nginx/access.log main;
}

server {
    listen 3001;

    root /var/www/html;
    index index.html;

    access_log /var/log/nginx/access.log main;
}

集装箱b

/etc/nginx/conf.d/default.conf.bak：

server {
    listen 3000;

    root /var/www/html;
    index index.html;

    access_log /var/log/nginx/access.log main;
}

server {
    listen 3001;

    root /var/www/html;
    index index.html;

    access_log /var/log/nginx/access.log main;
}

问题：

在您看来，这是用于微型前端体系结构的最佳基础设施吗（例如，1个集群、1个fargate服务、1个fargate任务以及2个微型前端容器，每个容器都有自己的目标组）

我们如何在集装箱之间实现正确的路线？也就是说，将B的内容显示在A的内部，而不是将B作为自己的页面

正确的NGINX配置是什么。用于容器B以便显示index.html

杂项

• 容器A和B使用ReactJS
• 理想情况下，每个微型前端应与容器A完全解耦
• 每个微前端都应该能够使用自己的首选库（例如ReactJS、Vue、AngularJS、普通HTML和JS等）

---

从何处调用localhost命令？显然，它不能是来自本地用户的curl/wget或浏览器请求laptop@BernieLenz，你能详细说明一下吗？我不知道你的意思。每个容器在应用程序负载平衡器后面都有自己的目标组。我怀疑问题在于您正在笔记本电脑的浏览器中运行网页。该页面具有指向localhost的iframe。我的理解正确吗？页面上有指向相对路径的iframe（例如/containerB）。没有在任何位置指定Localhost。问题中的localhost链接只是示例。谢谢，我明白了，这让我有点困惑。为了让“”从3001获取端口3000服务内容，我想您需要在3000上运行的nginx中设置一个代理转发。我相信这是通过代理通行证完成的。。。