NodeJS 如何在加载时配置SPA？

8ljdwjyq 于 2023-05-17 发布在 Node.js

关注(0)|答案(5)|浏览(121)

我们正在使用Webpack，React，Node.JS，但我认为这个问题比具体技术更通用。我可以使用Webpack在构建开发模式或生产模式时配置SPA（例如使用DefinePlugin）。
如何在生产模式下（在构建时配置）为不同的部署环境（例如分期与生产）？例如，这些不同的部署将与不同的后端服务器API通信。
SPA必须从服务器获取一些本地上下文，因为它正在被浏览器艾德。或者我们必须在每台服务器上有一个SPA可以安全获取的自定义配置文件？
我们在服务器上使用NodeJS，这个SPA最终将作为一个同构应用程序运行，所以这可能会有所帮助。我们在Docker镜像中部署这些应用程序，并且在部署时很容易配置它们的环境。
感谢您的任何建议。

node.js

来源：https://stackoverflow.com/questions/40954400/how-to-configure-a-spa-on-loading

5条答案

按热度按时间

bmp9r5qi1#

我找到了一种方法来做需要做的事情。这是通过在为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
这对我来说似乎是一个解决方案，尽管我想知道是否有任何潜在的安全问题（这总是比第一次出现时更复杂），如果没有更简单的方法。任何意见或进一步的解决方案将不胜感激。

赞(0）回复(0）举报 2023-05-17

wrrgggsh2#

一种方法是在部署时重写HTML文件的内容。
您可以使用占位符字符串，例如：HTML中的“ $MY_CONFIG_HERE$ “。
这可以在页面上的一些内联javascript标签中，它将在window上设置javascript对象。
然后让部署过程（ContinuousDeploy）用包含所需数据的实际javascript对象替换该字符串。
然后，数据将在window上提供给在单页应用程序中运行的javascript。

赞(0）回复(0）举报 2023-05-17

gmol16393#

溶液

生成并加载单独的脚本：

<html>
  <head>
    <script src="env.js"></script>
  </head>
  <body>
    <script src="main.js" async></script>
  </body>
</html>

在部署时（或通过动态服务器），填充env.js：

process = window.process || {};
process.env = window.process.env || {};
process.env.API_URL = 'https://api.example.com';

(You不需要使用process.env，但它是常用的，甚至在前端代码中也是如此。
然后在main.js中引用：

console.log(process.env.API_URL);

这需要一个阻塞下载（至少，如果main.js被标记为async），但它只是一个单一的请求。您可以添加一些（短）缓存头。

备选方案

修改HTML

生成一个完整的JS文件通常比修改一个HTML文件更干净、更容易。
此外，注入内联脚本对于CSP（内容安全策略）是有问题的。

设置Cookie

这是充斥着CDN和缓存和用户清除cookie的问题。

赞(0）回复(0）举报 2023-05-17

4c8rllxm4#

我们现在正在为同样的概念而奋斗。我发现在运行时配置的最佳方法是使用env变量（可以在构建时设置，但也可以在运行时使用docker native或任何其他编排工具（如ECS或GKE）进行重写）。
我们之前使用的另一种更脏的方法是通过图像的CMD指令执行运行时调整。这并不是真正推荐的，因为它使您的图像可变，并可能使它容易出错。然而-它确实工作，如果明智地使用可以实现你想要的。一个简单的例子是将当前的CMD（可能看起来有点像CMD node app.js）替换为类似于bash -c "wget prod.conf && node app.js"的内容

赞(0）回复(0）举报 2023-05-17

krugob8w5#

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

赞(0）回复(0）举报 2023-05-17

我来回答

NodeJS 如何在加载时配置SPA？

5条答案

溶液

备选方案

修改HTML

设置Cookie

相关问题

热门标签

最新问答