在持续集成后，在生产服务器中使用Webpack处理环境变量的两种方法

Two ways to Handle Environment Variables with Webpack in production server after a continuous integration

本文关键字：Webpack 处理 环境变量 方法 两种 服务器 集成      更新时间：2023-09-26

我们正在尝试使用Webpack作为构建工具在生产环境中运行一个ReactJs。为此，我们使用DefinePlugin来设置环境变量。

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('development'),
  'process.env.API_URL':  JSON.stringify("http://localhost:7852/"),
}),

然而，出于安全原因，我不想在我的源代码中有合理的信息，例如，我们不想在webpack配置中放置api密钥或私有url。因此，我们计划将这些值存储在生产服务器的环境变量中。

我们在持续集成服务器(Docker Hub)中构建Webpack。我们希望在Docker服务器中进行编译，但我们不想把设置放在Docker服务器中，我们只想把设置放在生产服务器中。然而，当我们在生产服务器中设置这些值时，结果是undefined。是否有一种方法可以将Webpack中的一些配置变量设置为在编译期间处理(有几种方法)，并让生产服务器处理其他配置变量?任何建议吗?提前感谢。

我刚刚遇到了完全相同的问题。我发现，在webpack运行的时候，需要设置环境以便应用程序可见。这意味着只有你的CI服务器(它会构建docker镜像)上的东西才能被webpack和你的应用程序使用。

除非你的应用程序路由请求通过它的服务器，那里的环境是可用的，到api服务器，我想不出一个体面的解决方案。我选择做的是在我的TeamCity构建期间设置环境，并为每个测试和生产服务器创建单独的docker映像，但使用相同的dockerfile。

您可以针对不同的环境使用不同的webpack，并将敏感配置移到环境变量中。你的应用程序只能看到容器中的环境变量，如果它们在Dockerfile中使用ENV定义。如果你改变你的应用程序从环境变量中读取所有敏感信息，并且在你的Dockerfile中有匹配的ENV指令，你可以在启动容器时指定它们。

。在webpack: 

new webpack.DefinePlugin({
  'process.env.API_KEY':  JSON.stringify(process.env.API_KEY || 'API_KEY environment variable not defined'),
...

在你的Dockerfile中添加ENV API_KEY，当你运行你的容器时，你可以通过-e: docker run -e API_KEY=ba3d4db...传递环境变量。

更好的是，如果你有多个敏感值，在Dockerfile中定义它们，并在运行时使用--env-file将它们传递到环境文件中:

> cat Dockerfile
FROM ubuntu
ENV API_KEY '
    ANOTHER_SECRET
> cat env.file
API_KEY=ab3da3bda4d4a4c4c4                                                                                                                   
ANOTHER_SECRET=shhh!         
> docker run --env-file env.file -it  temp bash
root@545d5945ab1b:/# echo $API_KEY
ab3da3bda4d4a4c4c4
root@545d5945ab1b:/# echo $ANOTHER_SECRET
shhh!

那么你可以在每个环境中使用相同的Docker配置，在env.file中使用不同的内容，并且可以安全访问文件。

相关文章：