在S3+Cloudfront上以同一URL托管多个SPA web应用程序

Question

我有两个静态web应用程序（create-react-apps）目前在两个独立的S3桶中。这两个bucket都配置为公共读取+静态web托管，访问它们的S3托管URL可以正确显示站点。

Bucket 1 - First App:
   index.html
   static/js/main.js

Bucket 2 - Second App:
   /secondapp/
       index.html
       static/js/main.js

我为此设置了一个CloudFront--默认的Cloudfront源正确地加载FirstApp，这样www.mywebsite.com在默认情况下加载index.html。

对于SecondApp，我已经设置了一个缓存行为，以便路径模式SecondApp/*指向SecondApp bucket URL。

这两个应用程序都被配置为通过react-router-dom使用html5推送状态。

我希望的行为是，访问以下内容将显示正确的站点/桶：

www.mywebsite.com-当前工作

Answer 1

在研究了这个问题之后，我能够使用lambda@edge(https://aws.amazon.com/lambda/edge/）解决这个问题

通过部署一个简单的javascript函数将特定路径路由到所需的s3 bucket，我们能够实现类似Nginx的路由设置。该函数位于Cloudfront CDN上的lambda@edge上，这意味着您可以指定何时触发该函数。对我们来说，它是在“原产地请求”上

我的设置如下：

null

var path = require('path');

exports.handler = (event, context, callback) => {
  // Extract the request from the CloudFront event that is sent to Lambda@Edge
  var request = event.Records[0].cf.request;

  const parsedPath = path.parse(request.uri);

  // If there is no extension present, attempt to rewrite url
  if (parsedPath.ext === '') {
    // Extract the URI from the request
    var olduri = request.uri;

    // Match any '/' that occurs at the end of a URI. Replace it with a default index
    var newuri = olduri.replace(/second-app.*/, 'second-app/index.html');

    // Replace the received URI with the URI that includes the index page
    request.uri = newuri;
  }
  // If an extension was not present, we are trying to load static access, so allow the request to proceed
  // Return to CloudFront
  return callback(null, request);
};

null