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

Question

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

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

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

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

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

Answer 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

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

Answer 2

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

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

Answer 3

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

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

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

Passing environment-dependent variables in webpack

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