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

Это лабораторная работа 22 сертификационного экзамена Azure Developer Certification с примером проекта.

Проверьте это для Лаборатории 1

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

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

Предпосылки

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

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

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