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

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

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

Каким-то образом SPA должен получить некоторый локальный контекст с сервера, поскольку он ПОЛУЧАЕТСЯ браузером. Или, возможно, у нас должен быть собственный файл конфигурации на каждом сервере, который SPA может безопасно ПОЛУЧИТЬ?

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

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


node.js configuration single-page-application singlepage
person Ashley Aitken    schedule 04.12.2016    source источник
comment
комбинация между отдельными конфигурациями веб-пакета и переменными среды?   -  person azium    schedule 04.12.2016
comment
Можно создать несколько различных SPA (используя конфигурации веб-пакетов и переменные среды), но это настраивается во время сборки, а не во время выполнения.   -  person Ashley Aitken    schedule 04.12.2016
comment
Вы можете попробовать модуль узла браузера и dotenv?   -  person maheshiv    schedule 04.12.2016
comment
Спасибо за предложение, но я не уверен, как это поможет настроить SPA на клиенте во время загрузки/выполнения. Я уже могу сделать подобное (загрузить файлы конфигурации) на сервере на основе переменной среды, но не на клиенте.   -  person Ashley Aitken    schedule 04.12.2016
comment
Как переменные env не предоставляют параметры времени выполнения? Такие вещи, как конечные точки API, особенно в сочетании с definePlugin, теперь у вас есть переменные времени выполнения. Я не уверен, что еще вам может понадобиться.   -  person azium    schedule 05.12.2016
comment
@azium среда в веб-браузере отличается от сервера. Когда SPA работает в веб-браузере, у него нет доступа к среде на сервере. Все, что мы указываем во время сборки SPA, не может измениться при развертывании на разных серверах.   -  person Ashley Aitken    schedule 05.12.2016
comment
Конечно, вы можете, именно для этого и предназначен defineplugin. ваша конфигурация веб-пакета захватывает переменную env, затем вы используете ее в коде на стороне клиента   -  person azium    schedule 05.12.2016
comment
Вы должны иметь возможность создавать из своего контейнера докеров, и если вы не можете этого сделать, вам нужно настроить конечную точку API для получения сведений о сервере для вас. не уверен, что еще вы могли бы хотеть   -  person azium    schedule 05.12.2016
comment
Сборка из блокировок контейнера докеров в текущей среде (не в среде развертывания контейнера). Извлечение сведений из API возможно (центральная точка обнаружения), но я думаю, что предоставление cookie с помощью SPA, вероятно, является лучшим (см. Мое, а не лично мое решение ниже).   -  person Ashley Aitken    schedule 06.12.2016
comment
@AshleyAitken, все правильно, я тоже борюсь. Не удалось найти приличный контент на этом, а также. Кроме того, единственной конфигурацией, которую я хотел бы получить для приложения SPA, является конечная точка сервера (URL). Идеальное решение — каким-то образом определить конечную точку только в Dockerfile и передать ее как переменную ENV в команде Docker Run. Кажется очень сложной мыслью.   -  person Nachiket    schedule 27.01.2017

Ответы (4)


arrow_upward
1
arrow_downward

Я нашел один способ сделать то, что требуется. Это делается путем установки файла 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

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

person Ashley Aitken    schedule 04.12.2016
comment
Пожалуйста, объясните, почему вы думаете, что это не решение - я думаю, что это решение! - person Ashley Aitken; 05.12.2016
comment
Будет ли это работать, если страница будет загружена из кеша браузера? - person steavy; 12.09.2019

arrow_upward
1
arrow_downward

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

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

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

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

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

person thewoolleyman    schedule 02.09.2019

arrow_upward
0
arrow_downward

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

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

person Yaron Idan    schedule 04.12.2016
comment
Я не уверен, как можно установить переменные среды для веб-браузера. Я устанавливал все переменные окружения, которые мог, на сервере, но, конечно, они не могли повлиять на клиента. Аналогично, для директивы CMD в образе/контейнере Docker. SPA уже встроен в образ Docker. - person Ashley Aitken; 04.12.2016

arrow_upward
-1
arrow_downward

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

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

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

Передача зависимых от среды переменных в webpack

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

person Ashley Aitken    schedule 04.12.2016