Используйте Azure парадную дверь для обслуживания SPA

Question

Я хочу иметь возможность обслуживать SPA, используя только входную дверь Azure /, а не CDN Azure. Похоже, что Front Door обеспечивает кэширование, которое обеспечит CDN, и я могу добавить к нему несколько региональных учетных записей хранения, сделав его глобальным в масштабе.

Проблема в том, что я не могу найти путь к index.html файлы. Нашел этот отзыв, и похоже, что это можно решить с помощью переписывания и перенаправления URL, но не мог понять, как это сделать.

у меня есть /test/ а также /test для соответствия с маршрутом ниже, поэтому он должен соответствовать / тестировать и направлять запрос на /test/index.html но это не работает. Разве мы не можем делать форварды на основе файлов?

Answer 1

Это заняло некоторое время, но вот решение.

Создать хранилище BLOB-объектов

Для размещения SPA вам потребуются учетные записи хранения BLOB-объектов в Azure, и эти учетные записи хранения должны быть настроены для получения трафика статических веб-страниц. Перейдите в Настройки, а затем на Статический веб-сайт в настройках хранилища больших двоичных объектов.

Чтобы добавить сюда контент - снова перейдите в хранилище BLOB-объектов, и вы должны увидеть контейнер с именем $web.

Теперь $web контейнер - это тот, в который вы должны поместить все свои статические файлы, просто убедитесь, что он общедоступен (в зависимости от того, как вы его создали, это может быть не так)

Дополнительная документация о том, как создать статический веб-сайт с использованием хранилища BLOB-объектов, находится здесь: https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

Получите конечную точку статического веб-сайта

После того, как вы включили статический веб-сайт и щелкнули колонку статического веб-сайта, он должен предоставить вам конечную точку, отличную от конечной точки доступа к обычным BLOB-объектам, которая поддерживает статический веб-сайт. Что-то вроде:https://somerandomstorageaccount.z8.web.core.windows.net/

Добавьте конечные точки статических веб-сайтов в Azure Front Door в качестве серверной части

Перейдите к своему дизайнеру входной двери

Перейдите к своему внутреннему пулу и добавьте новую запись, если у вас ничего нет. Теперь вы должны добавить эту новую конечную точку веб-сайта в качестве серверной части к входной двери Azure. На картинке ниже представлена ​​конфигурация обновления, но добавить ее так же просто, вы просто добавляете ее какCustom Host тип серверной части и укажите его на местоположение статического веб-сайта большого двоичного объекта.

Чтобы обеспечить лучшую производительность, используйте несколько учетных записей хранения (из разных регионов) и добавьте все из них в серверную часть конфигурации Front Door и включите кэширование в Front Door.

Answer 2

Ответ @Mavi Domates, приведенный выше, великолепен, но в нем не рассматривается, как правильно создать маршрут SPA с использованием хранилища BLOB-объектов.

Основная причина: статический веб-сайт хранилища BLOB-объектов не перезаписывает URL-адреса и возвращает ошибку 404 для маршрутов SPA, которые точно не существуют в контейнере хранилища.

Исправление Azure CDN:

Создайте правила перезаписи URL-адресов, чтобы пересылать любые расширения файлов нулевой длины обратно в index.html. Ссылка на сайт

Обходной путь передней дверцы Azure :

(Обратите внимание, здесь написано «Обходной путь... это не исправление»). В конфигурации статического веб-сайта хранилища BLOB-объектов задайте Index document nameа также Error document pathк index.html. Это приводит к тому, что любая ошибка 404 перенаправляется на вашу точку входа SPA. Ваш SPA будет работать, но любой прямой переход к конечной точке SPA вернет 404. (Это влечет за собой целый ряд других проблем, но, по крайней мере, сайт работает, верно?)