如何在加载时配置SPA？

Question

我们正在使用Webpack，React，Node.JS，但我认为这个问题比具体技术更通用。在构建开发模式或生产模式时（例如使用DefinePlugin），我可以使用Webpack配置SPA。

如何为不同的部署环境（例如分段与生产）配置生产模式（在构建时配置）的SPA？例如，这些不同的部署将与不同的后端服务器API通信。

不知何故，SPA必须从服务器中获取一些本地环境，因为它正由浏览器获取。或者我们必须在SPA可以安全获取的每台服务器上都有一个自定义配置文件？

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

感谢您的任何建议。

Answer 1

我们现在正在努力解决相同的问题。我发现在运行时配置的最佳方法是使用env变量（可以在构建时设置，但也可以在运行时使用docker native或任何其他编排工具（如ECS或GKE）覆盖）。

我们之前使用的另一种更脏的方法是通过图像的CMD指令执行运行时调整。这不是真正推荐的，因为它会使您的图像变得可变并且容易出错。但是 - 它确实有效，如果明智地使用它可以实现你想要的。一个简单的例子是替换你当前的CMD，这可能看起来有点像CMD node app.js这样的东西 - bash -c "wget prod.conf && node app.js"

Answer 2

一种方法是在部署时重写HTML文件的内容。

您可以有一个占位符字符串，例如HTML中的“ $MY_CONFIG_HERE$”。

这可以在页面上的一些内联javascript标记中，该标记将在window上设置javascript对象。

然后让您的部署过程（Continuous Deploy）将字符串替换为包含所需数据的实际javascript对象。

然后，数据将在window上提供给在Single Page App中运行的javascript。