Динамическое задание URL-адресов активов в HTML на основе окружения в приложении React Vite AZURE AD B2C

На чтение 3 мин Опубликовано 16.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Шаги для реализации
Заключение

Вопрос или проблема

Я работаю с приложением React Vite и сохранил свой пользовательский макет страницы для процесса входа в систему в публичном каталоге моего репозитория. Структура папок выглядит следующим образом: public/loginFlow/

Есть ли способ динамически изменять URL-адреса моих размещенных файлов в зависимости от среды, в которой находится мое приложение?

Например, у меня есть это:

<link href="https://mystorage.blob.core.windows.net/root/loginFlow/css/login.css" rel="stylesheet" type="text/css" data-preload="true"/>

Но так как у меня есть эти файлы, размещенные в моей публичной папке в репозитории, я хотел бы что-то вроде:

<link href="https://localhost:6000/loginFlow/css/login.css" rel="stylesheet" type="text/css" data-preload="true"/>

Это работает нормально, но я хочу динамически установить этот URL, чтобы, например, приложение в производственной среде имело этот URL:

<link href="https://myapp.azurewebsites.net/loginFlow/css/login.css" rel="stylesheet" type="text/css" data-preload="true"/>

Не уверен, можно ли это добиться, или единственный способ — это загрузка этих файлов в хранилище Azure, но я хотел бы знать, возможно ли это так, как я объяснил. Спасибо!

Ответ или решение

Вопрос о динамической установке URL-адресов ресурсов в HTML на основе окружения в вашем приложении React с использованием Vite и Azure AD B2C является достаточно распространённой задачей среди разработчиков. Рассмотрим, как вы можете достичь этой цели.

Проблема

Вы хотите динамически изменять URL-адреса ваших файлов (например, CSS, JS), загружая их в зависимости от того, в каком окружении (локальное, тестовое или боевое) ваше приложение выполняется. Таким образом, в локальном окружении у вас будет один путь, а в продакшене — другой.

Решение

Для достижения этой цели вы можете воспользоваться переменными окружения, которые поддерживает Vite. Это позволит вам задавать URL-адреса ваших ресурсов в зависимости от текущего окружения.

Шаги для реализации

Создайте файлы переменных окружения:
В корне вашего проекта создайте файлы .env, .env.development, .env.production и т.д. В этих файлах вы можете определить переменные окружения.

Например:
- .env.development:
```
VITE_ASSET_URL=https://localhost:6000/loginFlow
```
- .env.production:
```
VITE_ASSET_URL=https://myapp.azurewebsites.net/loginFlow
```
Использование переменных окружения в вашем коде:
В вашем компоненте React или любом другом месте, где вам нужно использовать URL, вы можете получить доступ к переменной окружения через import.meta.env.
```
const assetUrl = import.meta.env.VITE_ASSET_URL;

const MyComponent = () => {
   return (
       <link href={`${assetUrl}/css/login.css`} rel="stylesheet" type="text/css" data-preload="true" />
   );
};
```
Настройка Vite:
Vite автоматически обрабатывает переменные окружения, начальные символы которых являются VITE_. Убедитесь, что ваши файлы .env размещены в корневом каталоге вашего проекта, чтобы Vite мог их обнаружить.
Сборка и развертывание:
Когда вы запускаете команду сборки (например, vite build), Vite заменит import.meta.env.VITE_ASSET_URL на текущее значение, определённое в соответствующем файле .env.

Заключение

Теперь вы можете динамически устанавливать URL-адреса ваших статических ресурсов в зависимости от окружения, в котором работает ваше приложение. Используя переменные окружения в Vite, вы можете легко управлять различными конфигурациями для разработки и продакшена, что значительно упрощает процесс развертывания.

Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться. Удачи в разработке вашего приложения на React с Azure AD B2C!