Пошаговое руководство с примером проекта

Большинство веб-приложений имеют несколько страниц и маршрутизацию в месте, где пользователи могут переходить с одной страницы на другую. Каждый раз, когда вы обновляете страницу, нам нужно явно настроить резервные маршруты в статических веб-приложениях Azure. Это не тот случай, когда вы разрабатываете все приложение на своем локальном компьютере, потому что сервер webpack dev позаботится об этом. В этом посте мы покажем, что можем настроить резервные маршруты в службе статических веб-приложений Azure.

  • Предварительные требования
  • Пример проекта
  • Сценарий маршрутизации
  • Демонстрация без конфигурации
  • Как настроить резервные маршруты
  • Демонстрация с конфигурацией
  • Резюме
  • Заключение

Предпосылки

Если вы хотите разбираться в службе веб-приложений Azure Static, вам необходимо знать множество вещей. Во-первых, вам нужно создать две учетные записи: учетную запись Github для хранения исходного кода и учетную запись Microsoft для развертывания этого кода с помощью службы статических веб-приложений Azure. Давайте создадим эти учетные записи, перейдя по ссылкам ниже. И то, и другое можно запустить бесплатно.

Поскольку мы создаем приложение React, вам необходимо знать React CLI, nodejs и машинописный текст. Сначала вам нужно установить NodeJS, create-response-app, а затем вы можете создать приложение с помощью React CLI.

Весь код API, который вы разрабатываете для приложения, будет преобразован в функции Azure во время развертывания. Вам необходимо знать следующее. Когда вы делаете вызовы API из своего приложения, вам необходимо проксировать эти вызовы API, для этого вам понадобится расширение Live Server.

Пример проекта

Вот пример простого приложения todo, которое создает, извлекает, редактирует и удаляет задачи. Обычно мы запускаем API на сервере NodeJS, и вы можете использовать MongoDB для сохранения всех этих задач.

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

Вот полный подробный пост по этому поводу.

Создание приложения React с помощью службы статических веб-приложений Azure

Сценарий маршрутизации

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

Вот код, который мы добавили для маршрутизации. Мы добавили компонент высшего порядка BrowserRouter в индексный файл.

Затем мы можем настроить маршруты в App.js, как показано ниже.

Нам нужно добавить логику в компонент «Задачи», чтобы переходить к компоненту сведений при щелчке каждой строки.

Наконец, вот компонент подробностей, который показывает детали.

Демонстрация без конфигурации

Когда вы отправляете код, действия Github развертывают код в службе статических веб-приложений Azure. Давайте посмотрим на демонстрацию без какой-либо конфигурации.

Вот демонстрация, когда вы обновляете страницу в компоненте сведений, мы получаем 404, потому что мы не настраивали резервные маршруты.

Как настроить резервные маршруты

Выше мы видели, как мы получаем ошибку 404 при обновлении страницы. Это можно сделать двумя способами: один амортизируемый, а другой - обычный.

Эти правила маршрутизации на стороне клиента обновляют местоположение окна браузера без отправки запросов на сервер. Если вы обновляете страницу или переходите непосредственно к местоположениям, созданным правилами маршрутизации на стороне клиента, для обслуживания соответствующей HTML-страницы требуется резервный маршрут на стороне сервера.

Размещение routes.json (устарело)

Вот некоторые моменты, о которых следует помнить.

  • Файл routes.json должен существовать в корне папки артефактов сборки приложения.
  • Правила выполняются в том порядке, в котором они появляются в массиве routes.
  • Оценка правила останавливается при первом совпадении. Правила маршрутизации не связаны друг с другом.
  • Роли определены в файле routes.json, а пользователи связаны с ролями через приглашения.
  • У вас есть полный контроль над названиями ролей.

Файл конфигурации статических веб-приложений Azure

При этом всякий раз, когда мы обновляем страницу, он загружает index.html, а маршрутизация на стороне клиента срабатывает и заботится о соответствующем маршруте.

Когда вы создаете проект реакции, все статические файлы обслуживаются из статической папки, поэтому они добавляются в массив исключения. Вы не хотите перенаправлять на index.html, если какой-либо другой компонент пытается загрузить изображение.

Я только что поместил указанный выше файл в указанное ниже место.

Вот демонстрация этой конфигурации. Теперь при обновлении страницы мы не получаем ошибку 404.

Резюме

  • Вы можете ускорить разработку своего приложения с помощью статического внешнего интерфейса и динамического внутреннего интерфейса на базе бессерверных API.
  • Одностраничные приложения, независимо от того, используют ли они интерфейсные JavaScript-фреймворки или библиотеки или платформы WebAssembly, такие как Blazor, часто полагаются на маршрутизацию на стороне клиента для навигации по веб-приложениям.
  • Эти правила маршрутизации на стороне клиента обновляют местоположение окна браузера без отправки запросов на сервер. Если вы обновляете страницу или переходите непосредственно к местоположениям, созданным правилами маршрутизации на стороне клиента, для обслуживания соответствующей HTML-страницы требуется резервный маршрут на стороне сервера.
  • Большинство веб-приложений имеют несколько страниц и маршрутизацию в месте, где пользователи могут переходить с одной страницы на другую.
  • Каждый раз, когда вы обновляете страницу, нам нужно явно настроить резервные маршруты в статических веб-приложениях Azure. Это не тот случай, когда вы разрабатываете все приложение на своем локальном компьютере, потому что сервер webpack dev позаботится об этом.
  • Мы можем решить эту проблему двумя способами: routes.json и staticwebapp.config.json.

Заключение

Вот как мы должны настроить резервные маршруты в службе статических веб-приложений Azure. Маршруты.json устарели, и нам следует использовать staticwebapp.config.json.