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

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

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

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

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


azure azure-front-door
person Mavi Domates    schedule 29.06.2019    source источник
comment
На каком типе ресурса вы размещаете SPA? Я не знаю ответа на ваш точный вопрос, но мне интересно, почему, например, служба приложений не может иметь /index.html в качестве документа по умолчанию?   -  person David C    schedule 30.06.2019
comment
Я не собираюсь настраивать серверную часть, это просто статические файлы. Так что на самом деле нет необходимости использовать службу приложений.   -  person Mavi Domates    schedule 30.06.2019
comment
Вы нашли решение? Здесь та же проблема!   -  person Roman L.    schedule 26.08.2019

Ответы (1)


arrow_upward
7
arrow_downward

На это потребовалось время, но вот решение.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

person Mavi Domates    schedule 05.11.2019
comment
Спасибо за помощь. Я выполнил все шаги, но у меня возникает проблема, когда я привязываю свой статический веб-сайт React к входной двери. Он предоставляет только index.html. Вы хоть представляете, почему это происходит? Все мои пути относительны, но у меня все еще есть ошибка - person Javi; 21.04.2021
comment
Вы должны проверить загруженные капли; посмотрите, правильно ли вы загрузили файлы. Другая альтернатива - это ваши пути, но вы уже говорите, что они относительны. - person Mavi Domates; 21.04.2021
comment
Все правильно загружено. Что я хотел сделать с парадной дверью, так это создать путь, то есть domain.com/type/appname, и когда я перейду в этот каталог, мое приложение React будет отображаться. Это возможно? - person Javi; 21.04.2021
comment
Этот ответ помечен как ответ на вопрос, но это явно не так. Маршрутизация произвольных путей к файлу index.html (для поддержки маршрутизации HTML5 в SPA) не рассматривается и является сутью этого вопроса. - person Casey; 12.07.2021