Сложные приложения, разработанные с использованием реагирующих, vue, angular или других основанных на javascript сред, имеют ту же проблему или требование, что и бэкенд-приложения (java, nodejs, python и т. Д.): Как читать конфигурации?
Здесь я перечислю некоторые подходы к работе с конфигурациями для сред javascritpt, от простых до управляемых решений. Некоторые из них используются для серверных приложений.
# 1 Глобальные переменные
Поскольку мы говорим о фреймворках javascript, просто создайте глобальную переменную при запуске вашего приложения, и это будет доступно для всех ваших скриптов:
<html>
<header>
<meta charset="utf-8">
<title>This is title</title>
<script>
var myVar = "global value"; // Declare a global variable
</script>
<script>
console.log("from another script:"+myVar);
</script>
</header>
<body>
Hello world
</body>
</html>
Конечно, запрограммированный URL в исходном коде не вариант, но следует понимать, что это точка входа в следующие подходы. Почти все они основаны на этом подходе или делают что-то подобное.
# 2 Webpack
Webpack предоставляет нам несколько механизмов, таких как DefinePlugin
new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
})
DefinePlugin - это прямая замена текста . Webpack найдет идентификатор и заменит его на заданную строку. Следующий пример иллюстрирует, как это работает.
Вы можете использовать эту переменную, как если бы она была глобальной переменной:
$.ajax({
type: "GET",
url: API_BASE_URL+'/odds?date=2019-01-19',
dataType: 'json',
success: function (data) {
...
}
});
}
Вот больше механизмов веб-упаковки: https://stackoverflow.com/a/40416826/3957754
Преимущества:
- Простой способ установить или определить несколько переменных и использовать их во всем приложении.
- Используя сервер C.I, такой как jenkins, вы можете установить все свои конфигурации и создать свой артефакт, а затем развернуть его:
export API_BASE_URL=http://awesome.api.com
export ENDPOINT_DETAIL=/detail
export ENDPOINT_FAVOURITE=/favourite
export MODULES=user,guest,admin,configure
npm run build
Недостатки
- Переменные вводятся на этапе сборки. Изменения в ваших конфигурациях потребуют новой сборки и повторного развертывания вашего приложения.
# 3 Свойства из SCM, базы данных или файловой системы
Проверьте этот ответ:
# 4 Централизованная и управляемая конфигурация
Основная идея заключается в том, чтобы поместить все ваши конфигурации, настройки или свойства на одном сайте, и все ваши приложения должны получать эти значения безопасным способом. В настоящее время наиболее распространенным методом получения этой конфигурации из конечного приложения является выполнение http-запроса к API-интерфейсу, опубликованному платформой.
Такие платформы являются идеальными партнерами для микросервисной архитектуры. Также я смог использовать его для микро-интерфейсов.
Вот несколько платформ:
Весеннее облако
волхвы-свойства-менеджмент
- Это веб-система java, в которой вы можете создавать окружения и любые ключи: значения в каждой из них. Вам просто нужно настроить приложение на любом языке, чтобы прочитать эти значения.
кибер-свойства-менеджмент
- Это приложение nodejs, которое позволяет вам сохранять файлы свойств (.properties .yml или .json), а затем просто использовать их как конечную точку отдыха из ваших приложений.
Вы можете использовать одну из этих платформ в сочетании с подходом webpack. Поэтому вместо ручного экспорта переменных среды вы можете использовать остальные API на этапе сборки в веб-пакете или на вашем сервере C.I, например, на jenkins.
Преимущества
Недостатки
- Уникальные файлы свойств или экспорт среды вручную настраиваются легко и быстро по сравнению с выполнением на другом сервере, отличном от приложения.
# 5 / настройки в вашем Интернете
Предполагая, что ваша сеть обслуживается в http://myapp.com,, вы можете опубликовать другую конечную точку, такую как http://myapp.com/settings. Эта конечная точка вернет все параметры, требуемые вашим микро-интерфейсом или веб-приложением, в СТОРОНА КЛИЕНТА используя AJAX .
В вашем javascript-приложении, в точке входа (обычно App.js в реагировать, vue и т. д.), я имею в виду перед механизмами рендеринга,вы можете использовать http://myapp.com/settings и выставлять в качестве глобальных переменных ваше приложение.Вы также можете сохранить его в одном из доступных хранилищ, таких как localStorage, sessionStorage и т. Д.
Преимущества
- Изменения в ваших конфигурациях готовы к использованию без перестроенияприложение.Просто выполните обновление страницы, чтобы снова выполнить точку входа в вашем javascript.
- Вы можете использовать подход # 3 в бэкэнд-контроллере вашего / settings
Недостатки
- Предварительно жестко закодированные переменные загружаются мгновенно по сравнению с HTTP-запросом ajax.