如何在加载时配置 SPA？
How to configure a SPA on loading?
我们正在使用 Webpack、React、Node.JS，但我认为这个问题比特定技术更通用。在为开发模式或生产模式构建时，我可以使用 Webpack 配置 SPA（例如使用 DefinePlugin）。
如何在生产模式下（在构建时配置）为不同的部署环境（例如暂存与生产）配置 SPA？例如，这些不同的部署会与不同的后端服务器 API 通信。
SPA 必须以某种方式从服务器获取一些本地上下文，因为它正在被浏览器获取。或者我们必须在每个服务器上都有一个 SPA 可以安全获取的自定义配置文件？
我们在服务器上使用 NodeJS，这个 SPA 最终将 运行 作为一个同构应用程序，这样可以提供帮助。我们在 Docker 个映像中部署这些应用程序，在部署时配置它们的环境很容易。
感谢任何建议。
我们现在正在为相同的概念而苦苦挣扎。我发现在 运行 时配置的最佳方法是使用 env 变量（可以在构建时设置，但也可以在 运行 时使用 docker 本机或任何其他编排工具覆盖作为 ECS 或 GKE）。
我们之前使用的另一种更脏的方法是通过图像的 CMD 指令执行 运行-time 调整。不推荐这样做，因为它会使您的图像可变并且容易出错。但是 - 它确实有效，如果明智地使用它可以实现你想要的。一个简单的例子是用这样的东西替换你当前的 CMD，它可能看起来有点像 CMD node app.js -
bash -c "wget prod.conf && node app.js"
我找到了一种方法来完成所需的工作。这是通过在为 SPA 提供服务时设置带有配置详细信息的 cookie。然后 SPA 可以读取该 cookie 以获取配置（并删除该 cookie，因为它不再需要了）。
有一个名为 ClientConfig 的 NPM 模块可以帮助完成我所描述的工作。它的工作方式与名为 GetConfig 的 NPM 配套模块非常相似，后者有助于在服务器端进行配置。客户端配置：https://github.com/henrikjoreteg/clientconfig
这里描述了如何使用 ClientConfig 和 GetConfig（单独和一起使用）：http://read.humanjavascript.com/ch12-settings-and-configs.html
这对我来说似乎是一个解决方案，尽管我想知道是否有任何潜在的安全问题（这总是比第一次出现的要复杂）并且是否有更简单的方法。如有任何意见或进一步的解决方案，我们将不胜感激。
我们当前的代码使用 WebPack DefinePlugin，但我认为这无法满足我们的需求。我还找到了提到客户端的 ExtendedDefinePlugin，但我不确定这是否是一个可能的解决方案：
https://github.com/ArikMaor/extended-define-webpack-plugin
https://www.npmjs.com/package/extended-define-webpack-plugin
这里也讨论了DefinePlugin:
但我再次相信这不会允许我们根据部署上下文而不是构建上下文来配置客户端 SPA。
一种方法是在部署时重写 HTML 文件的内容。
您可以使用占位符字符串，例如HTML.
中的“$MY_CONFIG_HERE$”
这可以在页面上的一些内联 javascript 标记中，它将在 window 上设置一个 javascript 对象。
然后让您的部署过程（持续部署）将该字符串替换为包含您想要的数据的实际 javascript 对象。
然后，数据将在 window 上提供给您在单页应用程序中的 javascript 运行。
我们正在使用 Webpack、React、Node.JS，但我认为这个问题比特定技术更通用。在为开发模式或生产模式构建时，我可以使用 Webpack 配置 SPA（例如使用 DefinePlugin）。
如何在生产模式下（在构建时配置）为不同的部署环境（例如暂存与生产）配置 SPA？例如，这些不同的部署会与不同的后端服务器 API 通信。
SPA 必须以某种方式从服务器获取一些本地上下文，因为它正在被浏览器获取。或者我们必须在每个服务器上都有一个 SPA 可以安全获取的自定义配置文件？
我们在服务器上使用 NodeJS，这个 SPA 最终将 运行 作为一个同构应用程序，这样可以提供帮助。我们在 Docker 个映像中部署这些应用程序，在部署时配置它们的环境很容易。
感谢任何建议。
我们现在正在为相同的概念而苦苦挣扎。我发现在 运行 时配置的最佳方法是使用 env 变量（可以在构建时设置，但也可以在 运行 时使用 docker 本机或任何其他编排工具覆盖作为 ECS 或 GKE）。
我们之前使用的另一种更脏的方法是通过图像的 CMD 指令执行 运行-time 调整。不推荐这样做，因为它会使您的图像可变并且容易出错。但是 - 它确实有效，如果明智地使用它可以实现你想要的。一个简单的例子是用这样的东西替换你当前的 CMD，它可能看起来有点像 CMD node app.js -
bash -c "wget prod.conf && node app.js"
我找到了一种方法来完成所需的工作。这是通过在为 SPA 提供服务时设置带有配置详细信息的 cookie。然后 SPA 可以读取该 cookie 以获取配置（并删除该 cookie，因为它不再需要了）。
有一个名为 ClientConfig 的 NPM 模块可以帮助完成我所描述的工作。它的工作方式与名为 GetConfig 的 NPM 配套模块非常相似，后者有助于在服务器端进行配置。客户端配置：https://github.com/henrikjoreteg/clientconfig
这里描述了如何使用 ClientConfig 和 GetConfig（单独和一起使用）：http://read.humanjavascript.com/ch12-settings-and-configs.html
这对我来说似乎是一个解决方案，尽管我想知道是否有任何潜在的安全问题（这总是比第一次出现的要复杂）并且是否有更简单的方法。如有任何意见或进一步的解决方案，我们将不胜感激。
我们当前的代码使用 WebPack DefinePlugin，但我认为这无法满足我们的需求。我还找到了提到客户端的 ExtendedDefinePlugin，但我不确定这是否是一个可能的解决方案：
https://github.com/ArikMaor/extended-define-webpack-plugin https://www.npmjs.com/package/extended-define-webpack-plugin
这里也讨论了DefinePlugin:
但我再次相信这不会允许我们根据部署上下文而不是构建上下文来配置客户端 SPA。
一种方法是在部署时重写 HTML 文件的内容。
您可以使用占位符字符串，例如HTML.
中的“$MY_CONFIG_HERE$”
这可以在页面上的一些内联 javascript 标记中，它将在 window 上设置一个 javascript 对象。
然后让您的部署过程（持续部署）将该字符串替换为包含您想要的数据的实际 javascript 对象。
然后，数据将在 window 上提供给您在单页应用程序中的 javascript 运行。