Как настроить SPA при загрузке?

Мы используем Webpack, React, Node.JS, но я думаю, что этот вопрос более общий, чем конкретные технологии. Я могу использовать Webpack для настройки SPA при построении для режима разработки или производственного режима (например, с помощью DefinePlugin).

Как настроить SPA в рабочем режиме (сконфигурированный при сборке) для разных сред развертывания (например, для промежуточной сборки или производства)? Например, эти различные варианты развертывания будут обращаться к различным API-интерфейсам базового сервера.

Как-то SPA должен выбрать локальный контекст с сервера, так как браузер GET'ed. Или, возможно, у нас должен быть собственный файл конфигурации на каждом сервере, который SPA может безопасно получить?

Мы используем NodeJS на сервере, и этот SPA в конечном итоге будет запущен как изоморфное приложение, чтобы это могло помочь. Мы развертываем эти приложения в изображениях Docker и легко настраиваем их среду при развертывании.

Спасибо за любые предложения.

Ответ 1

Я нашел один способ сделать то, что требуется. Это настройка cookie с информацией о конфигурации при обслуживании SPA. Затем SPA может прочитать этот файл cookie, чтобы получить конфигурацию (и удалить файл cookie, потому что он больше не нужен).

Существует модуль NPM, называемый ClientConfig, который поможет в выполнении описанных выше действий. Он очень похож на сопутствующий модуль NPM, называемый GetConfig, который помогает с настройкой на стороне сервера. ClientConfig: https://github.com/henrikjoreteg/clientconfig

Как использовать ClientConfig и GetConfig (отдельно и вместе) описывается здесь: http://read.humanjavascript.com/ch12-settings-and-configs.html

Мне кажется, что это решение для меня, хотя я интересуюсь любыми потенциальными проблемами безопасности (которые всегда сложнее, чем кажется на первый взгляд), и если нет более простого подхода. Любые комментарии или дальнейшее решение будут оценены.

Ответ 2

Мы боремся с одними и теми же концепциями прямо сейчас. Лучший способ, который я нашел для настройки во время выполнения, - это использовать переменные env (которые могут быть установлены во время сборки, но также переопределены во время выполнения с использованием встроенной докеры или любого другого инструмента для оркестровки, такого как ECS или GKE).

Другой, более грязный способ, который мы использовали ранее, выполняет корректировки времени выполнения через директиву CMD изображения. Это не рекомендуется, так как это делает ваше изображение изменчивым и может привести к ошибкам. Однако - это действительно работает, и если вы используете мудро, можете достичь того, чего хотите. Простым примером этого является замена текущего CMD, который, вероятно, немного похож на этот CMD node app.js с чем-то вроде этого - bash -c "wget prod.conf && node app.js"

Ответ 3

Один из способов - переписать содержимое файла HTML при развертывании.

Вы можете иметь строку-заполнитель, например, " $MY_CONFIG_HERE$ " в вашем HTML.

Это может быть в каком-то встроенном теге javascript на странице, который установит объект javascript в window.

Затем попросите процесс развертывания (Continuous Deploy) заменить эту строку фактическим объектом javascript, содержащим нужные вам данные.

Затем данные будут доступны на window для вашего JavaScript, работающего в одностраничном приложении.

Ответ 4

Наш текущий код использует WebPack DefinePlugin, но я не верю, что это позволяет делать то, что нам нужно. Я также нашел ExtendedDefinePlugin, который упоминает клиента, но опять же, я не уверен, что это возможное решение:

https://github.com/ArikMaor/extended-define-webpack-plugin https://www.npmjs.com/package/extended-define-webpack-plugin

Здесь также обсуждается DefinePlugin:

Передача зависящих от среды переменных в веб-пакете

Но опять же я не верю, что это позволит нам настроить клиентский SPA на основе контекста развертывания, а не контекста сборки.