Размещение нескольких веб-приложений SPA на S3 + Cloudfront по одному URL

Question

У меня есть два статических веб-приложения (create-реагировать-приложения), которые в настоящее время находятся в двух отдельных сегментах S3.Оба сегмента настроены для публичного чтения + статического веб-хостинга, и посещение их размещенных URL-адресов S3 правильно отображает сайты.

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/* указывал на URL-адрес корзины SecondApp.

В моем браузере при посещении www.mywebsite.com/secondapp/ правильно отображается второе веб-приложение.

Однако, если я опущу завершающий слеш, я вместо этого увижу Первое приложение, которое нежелательно.Если я захожу на www.mywebsite.com/secondapp/something, мне также показывают Первое приложение, которое также нежелательно.(Я хочу, чтобы он загружал .html secondapp)

Оба приложения настроены на использование состояния push html5 через response-router-dom.

Мое желаемое поведение - посещение следующихотображает правильный сайт / область:

www.mywebsite.com - в настоящее время работает

www.mywebsite.com/secondapp/ - в настоящее время работает

www.mywebsite.com/secondapp - (без косой черты) Не работает, показываетПервое приложение

www.mywebsite.com/secondapp/something_else - Не работает, покажите Первое приложение

Как мне добиться желаемого поведения?

Спасибо!

Answer 1

После исследования этой проблемы я смог решить ее, используя lambda @ edge (https://aws.amazon.com/lambda/edge/)

. Развернув простую функцию javascript для маршрутизации конкретных путей к нужному сегменту s3, мы можем достичьnginx-подобная настройка маршрутизации. Функция находится на lambda @ edge в нашей CDN Cloudfront, что означает, что вы можете указать , когда сработает. Для нас это "Запрос на отправку"

Мои настройкивыглядит следующим образом:

• Я использовал одну корзину s3 и развернул свое второе приложение в подпапке "second-app"
• Я создал новую функцию Lambda, размещенную на "США Восточная Северная Вирджиния ". Здесь важен регион, поскольку в этом регионе можно разместить только лямбда-функцию и @edge.
• См. Ниже фактическую лямбда-функцию
• После создания перейдите кв вашей конфигурации CloudFront и перейдите в раздел «Поведения> Выберите шаблон пути по умолчанию (*) и нажмите« Изменить »*
• Прокрутите вниз, где находится« Связи функций лямбда-функций »
• Выберите« Запрос источника »еorm выпадающий список
• Введите адрес для вашей лямбда-функции (arn:aws:lambda:us-east-1:12345667890:function:my-function-name)

Вот пример лямбда-функции, которую я использовал.

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);
};

Вот ресурсы, которые я использовал для этого решения:

• https://aws.amazon.com/blogs/compute/implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge/
• https://github.com/riboseinc/terraform-aws-s3-cloudfront-website/issues/1
• Как установить корневой объект по умолчанию дляподкаталоги для статически размещенного веб-сайта в Cloudfront?