如何用多普勒注入env变量与webpack反应

Question

最近，我已经从使用.env文件转向了一个秘密管理工具--多普勒，并试图将来自多普勒的变量注入到由webpack构建的React中。

但是，只需运行

doppler run -- webpack serve --config webpack.dev.js

不起作用。如果我想从多普勒注入env到webpack来构建我的反应应用程序，我该怎么办？

Answer 1

我发现了EnvironmentPlugin in webpack，

运行doppler run -- webpack serve --config webpack.dev.js时，多普勒将env变量注入运行时，通过在数组中指定键名并将其传递给插件，我们可以用EnvironmentPlugin传递它们。

const { EnvironmentPlugin } = require("webpack");

module.exports = {
  plugins: [
    new EnvironmentPlugin(["SAMPLE_KEY"]),
  ],
};

另一种方法是传递一个对象，这种方法允许在多卜勒无法提供密钥的情况下使用默认值。

const { EnvironmentPlugin } = require("webpack");

module.exports = {
  plugins: [
    new EnvironmentPlugin({"SAMPLE_KEY":"abcde"}),
  ],
};

只要数组或对象中指定的键与多卜勒中的键匹配，这就应该可以工作。

参考webpack博士这里

Answer 2

我将从我的comment...since中回答我自己的问题--我终于明白了。

如果您是在您的项目中使用.env文件的话--我有一个非常大的文件，超过50行。

从基于Unix的IDE中运行，您可以挂载.env文件：doppler run --mount .env npm run build

这在Windows上是行不通的，所以如果您是从基于Windows的命令行运行构建(就像我一样)，您必须下载VSCode文件

doppler secrets download --no-file --format env > .env

最佳做法是在处理后删除这个未加密的文件！！

并在要运行的配置分支上使用Docker进行CI构建：

doppler run --token ${TOKEN NAME} --mount .env npm run build