AWS-S3 和 AWS-CloudFront 带有 React 路由，多应用程序

Question

我有以下场景。

• S3 bucket和几个目录，每个react应用一个目录
• 每个 React 应用程序的所有路径都以 s3 存储桶中托管的目录名称开头

例如：

S3 目录

|--/
   |--/first-app/
   |--/second-app/

first-app

的反应路线

const routes = [
  {
    path: '/',
    component: Empty,
    exact: true,
  },
  {
    path: '/first-app',
    component: Layout,
    routes: [
      { path: '/first-app/create', component: CreateCommponent},
      { path: '/first-app/login', component: Login },
      { path: '/first-app/logout', component: Logout },
    ],
  },
]

second-app

的反应路线

const routes = [
  {
    path: '/',
    component: Empty,
    exact: true,
  },
  {
    path: '/second-app',
    component: Layout,
    routes: [
      { path: '/second-app/create', component: OtherComponent},
      { path: '/second-app/login', component: Login },
      { path: '/second-app/logout', component: Logout },
    ],
  },
]

如何让 cloudFront 独立地为每个目录中的每个应用程序提供服务，但在同一域下？

https://my.domain.com/first-app >> 为第一个应用

的 React 应用中间 index.html 提供服务

https://my.domain.com/second-app>> 为第二个应用

的 React 应用中间 index.html 提供服务

Answer 1

您可以使用 Lambda@Edge 执行此操作，以便在将请求发送到存储桶之前操纵请求参数。这是一个类似的例子：here