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

Question

我有以下场景。

• S3 存储桶和多个目录，每个 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 >> service react application 中间 index.html of first-app

https://my.domain.com/second-app>> 服务于第二个app的react应用中间index.html

Answer 1

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