如何将环境变量添加到 AWS 放大？

Question

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

build:
  commands:
    - npm run build:$BUILD_ENV

但不仅它不起作用，该应用程序也不再起作用。有任何想法吗？

Answer 1

正如这个问题特别提到的React，以下是您在基于 React 的应用程序中使用环境变量所需的步骤AWS Amplify。

在你的客户端 JS 中：

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

这里要注意的关键是我的前缀REACT_APP_已包含在Create-React-App文档中：here

现在，在Amplify 控制台的应用程序设置 > 环境变量下：

最后，您还需要在“应用程序设置”>“构建设置”下添加此引用：

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

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

Answer 2

有关环境变量的 Amplify 文档有一个关于“访问环境变量”的部分。

根据该文档，在 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，或者请参阅将 .env 文件添加到 React 项目以获取更多信息。

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

Answer 3

为了让 @leandro 的答案起作用，我必须将 AWS 环境变量名称括在大括号中：

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

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

Answer 4

@A 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 

（带 $ 的那个是对你放在放大中的那个的引用。另外我认为你必须在 = 符号之间没有空格）

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