使用不同的环境变量多次构建反应应用程序

Question

我的 React Web 应用程序有一个开发环境文件 .env.development 和一个生产环境文件 .env。

.env.development 的值是 REACT_APP_NAME=My Test App，.env 文件的值是 REACT_APP_NAME=My Blue App。

如果只有一位客户（称为 Blue）使用我的应用程序，则此方法有效。 .env 包含客户地址和更多客户特定值。

现在我想将应用交付给多个客户，并在多个 env 文件中包含多个客户规范。

我的想法是存储客户特定的环境文件：

• .env.blue
• .env.red
• .env.yellow

当我现在（不知何故）构建应用程序时，我会得到三个文件夹

• build_blue
• build_red
• 构建黄色

每个文件夹都使用构建的特定环境。

这有可能吗？

我目前的解决方法是：

• 将.env.blue 重命名为.env
• 纱线构建
• 发布到 ftp 服务器
• 将.env 重命名为.env.blue
• 将.env.red 重命名为.env
• 纱线构建
• ...

Answer 1

我构建了一个小的 shell 脚本来完成这项工作。 我想分享它，因为其他人强制使用相同的解决方案：

mv .env env

for CURR in .env.red .env.blue .env.yellow
do
    mv $CURR .env
    yarn build
    mv build build_$CURR
    cp .env build_$CURR/.env
    mv .env $CURR
done

mv env .env

之后，您可以将不同的构建文件夹加载到不同的服务器并将 .env 文件移动到根目录。