Я использую статический хостинг сайтов S3 для приложений React в своих средах разработки и разработки, и он отлично работает. Я использую схему именования сегментов, например dev-myapp-mycompany и prod-myapp-mycompany, и у меня есть выделенные области для каждой среды.
Моя команда постоянно создает ветви функций, которые требуют тестирования, и, хотя я мог бы создавать новые сегменты для каждой новой ветви, нам пришлось бы просить увеличить интервалы в течение нескольких спринтов, а затем часто сокращать их.
То, что я хотел бы сделать, - это иметь одну корзину feature-myapp-mycompany с простым index.html в корне, который предоставил бы ссылку на каждое приложение, развернутое в данный момент в эту группу функций. Что-то вроде
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Feature Bucket</title>
</head>
<body>
<h1>Feature Branches</h1>
<ul>
<li>
<a href="./feature1/index.html">Feature 1</a>
</li>
<li>
<a href="./feature2/index.html">Feature 2</a>
</li>
...
<li>
<a href="./featuren/index.html">Feature n</a>
</li>
</ul>
</body>
</html>
Для этого структура ковша будет выглядеть как
index.html
/feature1
index.html
/static
/feature2
index.html
/static
/featuren
index.html
/static
Я развертываю все приложения через AWS cli, так что это не проблема для сценария. Я использую что-то вроде
npm run buildaws s3 sync ./build s3://%bucket%/%feature% --delete --profile=%profile% --region=us-east-1
Вывести код в ведра не проблема. Вот где я застреваю:
Моя проблема:
Я развернул код, как описано выше, но проект create-реагировать на приложение определяет его статические зависимости от корня домена. Таким образом, index.html для feature1 имеет hrefs вроде /static/css/main.9fac6334.chunk.css. Этот запрос идет и просматривает корень моего сегмента, где есть только основной index.html и «каталог» для каждой функции. Мои ссылки на главном index.html действительно приводят меня к нужному приложению index.html, но ни одна из ссылок на скрипт или css не действительна, поскольку они основаны на корне.
Попытка решения:
create-реагировать-приложение позволяет вам указать homepage параметр в package.json, который используется для установки baseURL в вашем приложении. Кажется, мне нужны относительные пути, а не абсолютные, поэтому я попытался установить значение домашней страницы "./", а затем http://feature-myapp-mycompany.s3-website-us-east-1.amazonaws.com/feature1. В обоих случаях ссылки на мгновение переводят меня в нужное место, а затем перенаправляют обратно в основной файл index.html в корневом каталоге. Я знаю, что это отчасти работает, потому что я вижу стиль и тему моего сайта в течение доли секунды, прежде чем он перенаправляет меня. Я даже вижу правильные запросы на вкладке сети Chrome, но после того, как все запросы выполнены, я вижу, что они перенаправляются обратно в первичный индексный документ в корне.
Продолжение попытки решения:
Статический хостинг S3 допускает правила перенаправления. Я попытался использовать различные варианты перенаправления, которые в итоге поставили меня в бесконечный цикл для одного и того же ресурса, что вызвало сбой запроса. Моя конфигурация была что-то вроде
<RoutingRules>
<RoutingRule>
<Condition>
<KeyPrefixEquals>feature1/</KeyPrefixEquals>
</Condition>
<Redirect>
<ReplaceKeyPrefixWith>feature1/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
Конечно, это не сработало, потому что оно переписывало префикс обратно в то же значение. Выполнение тех же правил перенаправления без моего решения «Попытка» также не работало, так как запрос не направлялся к ресурсу с префиксом feature1/, он направлялся в корень.
Мое идеальное решение:
Мне бы хотелось иметь некоторую комбинацию опции homepage в package.json и некоторые правила перенаправления для перенаправления запросов статических ресурсов в каждом приложении обратно в корень соответствующих каталогов ветвей функций. Например, запрос для /static/css/main.9fac6334.chunk.css должен искать в каталоге feature1, а не в корне.
Я не боюсь писать это для многих веток, которые у нас будут, но я не могу подобрать правильные опции для отдельного примера суб-приложения.
Заранее благодарим за помощь и удачу в ваших собственных приключениях по кодированию.