Question

我有一个React / Node应用程序，我试图在AWS Amplify上托管。第一次尝试，部署了我的应用程序，但是由于缺少环境变量，我发现某些页面无法加载。我已经在部署之前将它们添加到了AWS控制台，但是它没有用。然后我进行了一些搜索，发现需要将“ amplify.yml”文件修改为：

build:
  commands:
    - npm run build:$BUILD_ENV

不仅不起作用，而且该应用程序也不再起作用。有什么想法吗？

Answer 1

为了让@leandro 的回答有效，我必须将 AWS 环境变量名称用大括号括起来：

build:
  commands:
    - npm run build
    - VARIABLE_NAME_1=${VARIABLE_NAME_1}

作为评论可能更好，但我没有足够的分数来发表。

Answer 2

@Zarqam嘿，我遇到了这个问题，并花了很多时间。对我有用的是：

在我的React代码上，使用process.env.VARIABLE_NAME

在我的webpack.config.js上，使用以下插件：

新的webpack.EnvironmentPlugin（['VARIABLE_NAME_1'，'VARIABLE_NAME_2']）

在Amplify环境变量上，先放入VARIABLE_NAME_1等，然后再输入值，就像文档中说的那样。

最后的构建设置：

build:
      commands:
        - npm run build
        - VARIABLE_NAME_1=$VARIABLE_NAME_1

（带$的是对您在amplify中放入的一个的引用。另外，我认为您必须在=符号之间没有空格）

然后触发构建，然后用手指交叉。

Answer 3

由于此问题特别引用了 React，以下是在 AWS Amplify 中基于 React 的应用程序中使用环境变量所需的步骤。

在您的客户端 JS 中：

const BUILD_ENV = process.env.REACT_APP_BUILD_ENV || "any-default-local-build_env";

这里要注意的关键是我对 REACT_APP_ 的前缀，它涵盖了 Create-React-App 文档：here

现在，在您的 Amplify console 中，在应用设置 > 环境变量下：

最后，您还需要在 App Settings > Build Settings 下添加此引用：

注意：“BUILD_ENV”可以是您想要的任何字符串。在环境变量中，您可以提供必要的 DEV/PROD 覆盖。

不要使用这种方法存储秘密密钥，AWS为此提供了一个secrets manager。此方法适用于可发布的密钥，例如连接到 Firebase 或 Stripe，并且密钥可以公开。

Answer 4

根据该文档，在您的 Amplify.yml（在控制台中或通过将其下载到项目的根目录）中，您可以使用命令将 Amplify 环境变量推送到您的 .env 中。如果您在 Amplify 中创建了一个名为“REACT_APP_TEST_VARIABLE”的环境变量，您会...

   build:
      commands:
        - echo "REACT_APP_TEST_VARIABLE=$REACT_APP_TEST_VARIABLE" >> .env
        - npm run build

进入 .env 后，您可以通过 process.env...

console.log('REACT_APP_TEST_VARIABLE', process.env.REACT_APP_TEST_VARIABLE)

如果您使用的是 Create React App，则您已经拥有 dotenv，或查看 Adding an .env file to React Project 了解更多信息。

强制提醒将您的 .env 添加到您的 .gitignore，并且不要在 .env 中存储任何敏感的内容。