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 of first-app

https://my.domain.com/second-app >> 服务react应用中间index.html of second-app

Answer 1

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