2

我们使用的是Webpack,React,Node.JS,但我认为这个问题更具通用性,即具体的技术。在构建开发模式或生产模式时(例如使用DefinePlugin),我可以使用Webpack配置SPA。如何在加载时配置SPA?

如何针对不同的部署环境(例如分段生产)在生产模式下配置SPA(在生成时配置)?例如,这些不同的部署会与不同的后端服务器API进行交谈。

不知何故,SPA必须从服务器取得一些本地上下文,因为它正在被浏览器取得。或者,我们必须在SPA可以安全地获取的每台服务器上拥有一个自定义配置文件?

我们在服务器上使用NodeJS,这个SPA最终将作为一个同构的应用程序运行,这样可以提供帮助。我们正在将这些应用程序部署在Docker镜像中,并且在部署时很容易配置它们的环境。

感谢您的任何建议。

+0

单独的webpack配置和环境变量之间的组合? – azium

+1

可以构建许多不同的SPA(使用webpack配置和环境变量),但是在构建时配置不是“运行”时间。 –

+0

你可以试试browserify和dotenv节点模块? – maheshiv

回答

-1

我发现做的是需要什么的一种方式。通过在提供SPA时设置配置细节的cookie。然后,SPA可以读取该cookie来获取配置(并删除该cookie,因为它不再需要)。

有一个名为ClientConfig的NPM模块,它将协助完成我所描述的内容。它与称为GetConfig的伴随NPM模块非常相似,它有助于在服务器端进行配置。 ClientConfig:https://github.com/henrikjoreteg/clientconfig

如何使用ClientConfig和GetConfig(单独和共同)这里描述:http://read.humanjavascript.com/ch12-settings-and-configs.html

这似乎是一个解决方案,我虽然我不知道任何潜在的安全问题(这是送花儿给人不是第一次出现更复杂),如果没有更简单的方法。任何意见或进一步的解决方案将不胜感激

+0

请解释您为什么认为这不是一个解决方案 - 我认为这是解决方案! –

0

我们现在正在为同样的概念而苦苦挣扎。我发现在运行时配置的最佳方式是使用env变量(可以在构建时设置,但也可以在运行时使用docker native或任何其他编排工具(例如ECS或GKE)覆盖)。

另一个更脏的方式,我们以前使用的是通过图像的CMD指令执行运行时调整。这不是真正的建议,因为它使你的图像可变,并可以使它容易出错。然而 - 它确实有效,如果明智地使用可以达到你想要的。这样做的一个简单的例子是替换当前的CMD这可能看起来有点像这样CMD node app.js像这样的东西 - bash -c "wget prod.conf && node app.js"

+0

我不确定如何为Web浏览器设置环境变量。我在服务器上设置了所有的环境变量,当然,它们不会影响客户端。同样,对于Docker镜像/容器上的CMD指令。 SPA已经在Docker镜像中构建。 –

-1

我们当前的代码使用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。