Как настроить СПА на загрузку?
Мы используем Webpack, React, Node.Но я думаю, что этот вопрос более общий, чем конкретные технологии. Я могу использовать Webpack для настройки SPA при построении для режима разработки или производственного режима (например, с помощью DefinePlugin).
Как настроить SPA в рабочем режиме (настроенном при сборке) для различных сред развертывания (например, staging vs production)? Например, эти различные развертывания будут взаимодействовать с различными интерфейсами API серверной части.
Как-то спа-центр должен забрать некоторый локальный контекст с сервера, поскольку он получает доступ к браузеру. Или, возможно, у нас должен быть пользовательский файл конфигурации на каждом сервере, который SPA может безопасно получить?
Мы используем NodeJS на сервере, и этот спа-центр в конечном итоге будет работать как изоморфное приложение, так что это может помочь. Мы развертываем эти приложения в образах Docker, и их среду легко настроить при развертывании.
Спасибо за любые предложения.
3 ответа:
Мы сейчас боремся с теми же самыми концепциями. Лучший способ, который я нашел для настройки во время выполнения, - это использование переменных env (которые могут быть установлены во время сборки, но также переопределены во время выполнения с помощью Docker native или любого другого инструмента оркестровки, такого как ECS или GKE).
Другой, более грязный способ, который мы использовали раньше, - это выполнение настроек во время выполнения с помощью директивы CMD образа. На самом деле это не рекомендуется, так как это делает ваше изображение изменчивым и может привести к ошибкам. Однако - он действительно работает, и если использовать его с умом, можно достичь того, чего вы хотите. Простой пример для этого-замена вашего текущего CMD, который, вероятно, выглядит немного так
CMD node app.js, чем-то вроде этого -bash -c "wget prod.conf && node app.js"
Я нашел один способ сделать то, что требуется. Это делается путем установки куки с деталями конфигурации при обслуживании СПА-салона. СПА может затем прочитать этот файл cookie, чтобы получить конфигурацию (и удалить файл cookie, потому что он больше не нужен).
Существует модуль NPM под названием ClientConfig, который поможет сделать то, что я описал. Он работает очень похоже на сопутствующий модуль NPM под названием GetConfig, который помогает с конфигурацией на стороне сервера. ClientConfig: https://github.com/henrikjoreteg/clientconfig
Как использовать ClientConfig и GetConfig (отдельно и вместе) описано здесь: http://read.humanjavascript.com/ch12-settings-and-configs.html
Это кажется мне решением, хотя я задаюсь вопросом о любых потенциальных проблемах безопасности (это всегда сложнее, чем кажется на первый взгляд), и если нет более простого подхода. Любые комментарии или дальнейшие решения будут оценены.
Наш текущий код использует WebPack DefinePlugin, но я не верю, что это позволяет делать то, что нам нужно. Я также нашел ExtendedDefinePlugin, который упоминает клиента, но опять же, я не уверен, что это возможное решение:
Https://github.com/ArikMaor/extended-define-webpack-plugin https://www.npmjs.com/package/extended-define-webpack-plugin
DefinePlugin также обсуждается здесь:
Передача зависимых от среды переменных в webpack
Но опять же я не верю, что это позволит нам настроить клиентский SPA на основе контекста развертывания, а не контекста сборки.