Azure CDN с Verizon — переписывание URL-адреса, чтобы всегда загружать index.html


Контекст


Последние несколько дней я боролся со следующей проблемой, и из-за самой природы CDN и ручного просмотра каждого нового правила мне каждый раз требуется до 4 часов для развертывания нового правила.

Как описано в следующем разделе, в настоящее время мое приложение Angular развернуто в учетной записи хранения, в которой есть один контейнер больших двоичных объектов с именем cdn.

введите описание изображения здесь

В корне этого контейнера больших двоичных объектов вся папка dist из моего проекта angular была скопирована с помощью моей настройки CI.

введите описание изображения здесь

Профиль CDN также настроен так, чтобы указывать на origin-path с именем /cdn.

введите описание изображения здесь


Проблема


К сожалению, в настоящее время продолжается проблема, что вы не можете получить прямой доступ к файлу по умолчанию.

  1. Я хотел бы перенаправить весь входящий трафик из моего приложения Angular в файл index.html. Это сделано для того, чтобы удовлетворить маршрутизацию для Angular.

    Введите URL с ожидаемым результатом

  2. Кроме того, я хотел бы разрешить любой запрос статических файлов (например, изображений) без какой-либо конкретной перезаписи URL-адреса.

Я видел различные сообщения по этой проблеме, но ни один из ответов, похоже, не охватывал мой случай или не дал ожидаемого результата.

В настоящее время я использую функцию системы правил в Azure CDN от Verizon.

Что касается шаблонов, я использовал все шаблоны, упомянутые в следующие статьи, в том числе упомянутые в комментариях.

Я также потратил не менее двух дней, чтобы найти различные другие статьи и статьи о стеке, но ни одна из них не сработала для моего случая.

Кроме того, я также создал свой собственный шаблон регулярных выражений, но, хотя они работали в моей тестовой среде, они будут работать после развертывания в CDN.

Обычно я получал один из следующих результатов:

  • Домен верхнего уровня https://myFancyWebsite.azureedge.net не будет переписывать URL-адрес в index.html, и я получу ошибку http 404
  • Домен верхнего уровня будет перенаправлять на index.html, но перестанет работать, как только я добавлю URL-адрес https://myFancyWebsite.azureedge.net/login/callback — снова ошибка http 404, как только я начну использовать /login/callback
  • Домен верхнего уровня перепишет URL-адрес на что-то вроде https://myFancyWebsite.azureedge.net/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn/cdn .... в http-ошибке 431.

Официальная документация от Microsoft также не помогли в моем случае.

Я почти уверен, что я не первый, кто развертывает приложение Angular в учетной записи хранения, и кто-то столкнулся с теми же проблемами, что и я.

Я благодарен за любую информацию, которая указывает мне правильное направление, потому что в данный момент я определенно думаю о том, чтобы отказаться от полного развертывания учетной записи хранения.


Обновление 1


Со следующим шаблоном source ((?:[^\?]*/)?)($|\?.*), который также упоминался в статья здесь, я могу справиться, по крайней мере, с перезаписью домена верхнего уровня в файл index.html.

К сожалению, мне все еще нужен дополнительный шаблон для перенаправления с https://myFancyWebsite.azureedge.net/login/callback на https://myFancyWebsite.azureedge.net/index.html


Обновление 2


В настоящее время я обновляю шаблон регулярного выражения один или два раза в день, и он снова работает в моей тестовой среде, но перестает работать после его развертывания. Я начинаю думать, что Azure CDN добавляет что-то к URL-адресу после домена верхнего уровня, но я понятия не имею, как это проверить.

https://regex101.com/r/KK0jCN/23


Обновление 3


Мы пишем 3025 год, и я до сих пор не понимаю, почему, например, следующий шаблон не обрабатывает перезапись URL-адреса верхнего домена.

https://regex101.com/r/KK0jCN/25


person HansMusterWhatElse    schedule 21.03.2018    source источник
comment
почему вы используете cdn в качестве сервера?   -  person hendrathings    schedule 23.03.2018
comment
ну.. в теории мне очень понравилась концепция просто публикации статических файлов в учетной записи хранения... но на практике это уже совсем другая история... определенно недостаточно документирована и честно говоря я не думаю что она совсем готова чтобы использовать как это еще ..   -  person HansMusterWhatElse    schedule 23.03.2018
comment
да, cdn используется только для доставки контента и используется как статический файл. Не используйте в качестве СПА   -  person hendrathings    schedule 23.03.2018
comment
SPA - это все о статических файлах, которые вы знаете ... логика на сервере обычно состоит из нескольких правил перезаписи.   -  person HansMusterWhatElse    schedule 23.03.2018
comment
Для маршрутизации Angular (включая точный вариант использования, который вы спрашиваете - перенаправление открытых путей к корневому index.html) и документ по умолчанию, см. мой ответ здесь: stackoverflow.com/questions/47071582/   -  person Justin Gould    schedule 28.03.2018
comment
Я реализовал это 1:1, но переписать не получилось. Я также видел аналогичные ответы в других темах SO, но там тоже не повезло. Просто из любопытства, какую версию Angular вы используете? Я только что запустил еще одно развертывание правила, о котором вы только что упомянули, просто для двойной проверки.   -  person HansMusterWhatElse    schedule 28.03.2018
comment
Я должен исправить себя - кажется, это работает с вашим шаблоном. Пожалуйста, опубликуйте это как ответ, чтобы я мог наградить вас репутацией. Могу ли я как-то разделить его? Я также хотел бы отдать часть этого Брюсу Чену за его усилия.   -  person HansMusterWhatElse    schedule 28.03.2018


Ответы (3)


  • Добавьте новое правило с условием Если всегда
  • Вам нужно будет добавить новую функцию для каждой конечной точки.
  • В поле Pattern введите [^?.]*(\?.*)?$. Этот шаблон перехватывает URL-пути с . в них, но не заботится о том, находится ли он в строке запроса.
  • В поле Путь введите origin_path/document.ext. Это сложная часть. Путь относится к исходному корню. Например, если исходный путь вашей конечной точки CDN — /origin_path, и вы хотите перенаправить на index.html, введите origin_path/index.html. Так будет всегда, если ваша CDN поддерживается учетной записью хранения Azure, а источник указывает на контейнер.
  • Нажмите «Добавить», чтобы добавить правило, подождите N часов, и все готово.
person Justin Gould    schedule 28.03.2018
comment
Я предполагаю, что шаблон предназначен для поля исходного шаблона при добавлении новой функции. Как насчет шаблона назначения? Вы оставляете это пустым? Кроме того, я предполагаю, что поле «Путь» — это исходный путь на портале Azure, а НЕ в правилах Verizion? - person John Smith; 29.05.2018
comment
@JohnSmith Шаблон назначения — это исходный путь, заданный в настройках портала Azure + index.html. Все это написано в движке правил Verizon. Итак, если исходный путь — /cdn, то в шаблоне Destination вы должны написать cdn/index.html. - person Bob; 03.07.2018
comment
Также не забудьте добавить общий доступ к большим двоичным объектам и контейнерам для учетной записи хранения Azure, иначе cdn будет жаловаться, что большой двоичный объект не найден. - person Igor B; 27.07.2019
comment
Оно работает. Будьте терпеливы на тот случай, если правило еще не закончило применяться к CDN. - person mdlars; 02.08.2020

Просто чтобы добавить к этому. Если вы используете Azure Verizon Premium CDN и ваша конечная точка Azure использует исходный путь. Исходный путь является частью перезаписи. Например, предположим, что вы указываете на папку с версиями внутри большого двоичного объекта $web.

Настройки конечной точки Azure

Таким образом, если на приведенном выше рисунке путь к источнику равен 2.1.2, а ваше текущее статическое приложение находится в $web/2.1.2/, то ваш вариант перезаписи для CDN будет таким: Источник: /<your-verizon-origin>/<your-azure-endpoint>/(.*)\/[^?.]*(\?.*)?$ --> Назначение: /<your-verizon-origin>/<your-azure-endpoint>/$1/index.html

Правило Verizon Premium CDN

person Colin McCullough    schedule 27.07.2020

person    schedule
comment
Вчера я переключился на Azure Web App и отказался от решения CDN. Тем не менее, я возьму вашу выкройку и дам вам знать, если она сработала! Спасибо за Ваш ответ. Вы тестировали это на регулярном выражении101 или в реальном приложении с правилом перезаписи? - person HansMusterWhatElse; 27.03.2018
comment
Я только что протестировал его на regex101.com. Все запросы будут переписаны в index.html вместе со строкой запроса, а путь запроса начинается с images,scripts, правило не требует усилий. - person Bruce Chen; 28.03.2018
comment
Привет, Брюс, большое спасибо за твою помощь. Все мои регулярные выражения также работали на regex101.com, но ни одно из них не работало после развертывания в Azure CDN. Почему-то кажется, что они не срабатывают, и решить эту проблему действительно сложно из-за отсутствия журналов. Кроме того, развертывание каждого правила может занять до 4 часов. - person HansMusterWhatElse; 28.03.2018
comment
Я бы настроил Azure CDN на своей стороне и сообщил бы вам о результате. - person Bruce Chen; 28.03.2018
comment
Большая проблема, которую я обнаружил, заключается в том, что цель перезаписи находится относительно корня origin. Если исходный путь — /container, цель перезаписи, например, — container/index.html. - person Justin Gould; 28.03.2018
comment
В прошлом я также пробовал различные шаблоны с добавлением orgin-path к части destination правила перезаписи - все равно безуспешно. - person HansMusterWhatElse; 28.03.2018
comment
Поскольку вы закончили эту проблему, я все еще пытаюсь реализовать ваш сценарий на основе ответа Джастина. Вы можете следить за моей обновленной частью для подробного теста. - person Bruce Chen; 29.03.2018