Вопрос или проблема
В последние пару дней я теряю разум, пытаясь решить проблему с маршрутизацией после сборки моего приложения с помощью Bitbucket pipelines.
Проблема началась, когда я изменил маршрутизатор приложения с старого маршрутизатора на React Router V6. Я деплоил приложение как веб-сервис с помощью pm2 path --no-daemon --spa, что до сих пор работало неплохо, но после изменения маршрутизатора оно перестало работать должным образом.
Поэтому я изменил деплоймент на Azure Static Web App и разместил его с staticwebapp.config.json
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/static/media/*.{png,jpg,jpeg,gif,bmp}", "/static/css/*"]
},
"mimeTypes": {
".json":"application/json"
}
}
Мой YML для пайплайна BitBucket с деплоем с помощью SWA CLI
image: node:20
pipelines:
branches:
dev:
- step:
name: Сборка и деплой React App
deployment: Staging
script:
- unset CI
- yarn install
- yarn global add @azure/static-web-apps-cli
- yarn build
- swa --verbose=silly deploy "$BITBUCKET_CLONE_DIR/build" --deployment token=$deployment_token --env production
artifacts:
- build/**
Странная вещь заключается в том, что
Если я делаю локальную сборку и разворачиваю её в Azure Static Web App через SWA, всё работает. Но, например, если загрузить сборку из артефактов пайплайна и запустить её локально, маршрутизатор не работает и не ведёт себя как SPA, как это происходит на сервере.
Обе сборки имеют файл staticwebapp.config.json, и они одинаковы.. поражает, почему это происходит.
Ответ или решение
Проблема маршрутизации в React-приложении после сборки в Bitbucket Pipeline
Вы столкнулись с проблемой, при которой маршрутизация вашего React-приложения перестала работать после сборки через Bitbucket Pipeline, особенно после перехода с предыдущего роутера на React Router версии 6. Давайте разберем возможные причины возникновения данной проблемы и пути их решения.
1. Причины проблемы
1.1 Изменение архитектуры роутинга
Переход на React Router v6 может требовать изменений в подходе к маршрутизации. Убедитесь, что все маршруты и компоненты корректно настроены на новую логику работы роутера.
1.2 Настройки конфигурации
Файл staticwebapp.config.json является ключевым элементом для настройки маршрутизации в Azure Static Web Apps. Ваше текущее содержание этого файла выглядит корректно, однако важно удостовериться, что правила перезаписи и исключения действуют так, как вы ожидаете.
1.3 Различия в сборке
Возможно, что сборка, выполняемая локально, и сборка, создаваемая в Bitbucket Pipeline, имеют разный контекст выполнения или окружение. Как вы отметили, локальная сборка работает корректно, даже если она использует одинаковые файлы конфигурации.
2. Шаги для диагностики
2.1 Логи
Активируйте подробный логгирование в вашей сборке Bitbucket, чтобы поймать возможные ошибки или предупреждения, которые могут возникать во время сборки.
2.2 Версии зависимостей
Проверьте версии зависимостей в package.json и убедитесь, что они актуальны для обеих сред. Иногда различия в версиях могут приводить к неожиданным проблемам.
2.3 Сравнение сборок
Сравните локальную сборку и сборку из Bitbucket Pipeline. Вы можете использовать инструменты, такие как diff, чтобы выявить различия между результатами сборки.
2.4 Настройки окружения
Проверьте, совпадают ли переменные окружения на локальном компьютере и в Bitbucket Pipeline. Убедитесь, что конфигурационные переменные и токены одинаковы.
3. Решения
3.1 Обновление конфигурации маршрутизации
Обновите конфигурацию маршрутизации в соответствии с новыми требованиями React Router v6. Возможно, вам потребуется изменить логику navigationFallback в staticwebapp.config.json.
3.2 Применение кэширования
Проверьте настройки кэширования, которые могут повлиять на поведение роутинга. Убедитесь, что кэш очищается при каждой новой сборке.
3.3 Локальная имитация окружения
Используйте Docker или аналогичные инструменты для создания среды, схожей с вашей средой Bitbucket. Это поможет вам локально отлаживать сборку и выявить проблемы, которые могут произойти только в облаче.
4. Заключение
Устранение проблем с маршрутизацией в React-приложении после сборки через Bitbucket Pipeline может быть сложным процессом, требующим внимательного анализа. Надеюсь, что вышеуказанные рекомендации помогут вам найти и исправить причину проблемы. Не забывайте фиксировать свои шаги и изменения, чтобы вы могли быстро откатиться к предыдущей версии, если это необходимо. Удачи в решении вашей проблемы!