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

Question

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

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

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

现在我想将应用程序交付给多个 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 文件移动到根目录。