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

Posted 2023-02-24

【中文标题】如何将环境变量添加到 AWS 放大？

【英文标题】：How to add environment variables to AWS amplify?

【发布时间】：2021-01-12 06:31:17

【问题描述】：

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

build:
  commands:
    - npm run build:$BUILD_ENV

但不仅它没有工作，应用程序也不再工作了。 有什么想法吗？

【参考方案1】：

由于这个问题专门引用了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 覆盖。

请勿使用此方法存储 SECRET KEYS，AWS 为此提供了secrets manager。此方法适用于可发布的密钥，例如连接到 Firebase 或 Stripe，并且密钥可以公开。

【讨论】：

如果使用这种方法保存密钥有什么风险？我以为 .env 文件就是为了那个...

@Alexis 就个人而言，我认为它会带来一些风险（尽管很小），即您会在客户端上泄露机密。这是一篇强调潜在风险的精彩博文：diogomonica.com/2017/03/27/…

【参考方案2】：

Environmental Variables 上的 Amplify 文档有一个关于“Accessing Environmental Variables”的部分。

根据该文档，在您的 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 中存储任何敏感内容。

【讨论】：

不错。由于某种原因，AWS 页面中的说明不清楚。他们要求添加一个:$BUILD_END，顺序颠倒，文件是/backend/.env...

这就是我需要的。我搜索了整个堆栈溢出并找到了你。这个答案肯定应该有超过 3 票。

【参考方案3】：

@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 

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

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

【讨论】：

感谢分享，我已经用 zip 文件上传了我的文件，它工作正常。我会记住你下一次尝试的答案，干杯

【参考方案4】：

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

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

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

【参考方案5】：

添加到@leandro's 以供将来检查此内容的任何人使用我只是想简化您需要做的事情，因为我对此完全迷失了：

在您的代码中将所有 API 密钥引用为 process.env.EXAMPLE_API_KEY_1 在你的根文件夹终端npm install react-app-rewired --save-dev中运行它 将config-overrides.js添加到项目根目录。（不是./src）

// config-overrides.js
module.exports = function override(config, env) 
    // New config, e.g. config.plugins.push...
    return config

使用您的密钥和变量在 AWS Amplify 中设置您的变量，不言自明。 在您的构建设置中使其看起来像这样 （我个人不会在此处添加 npm build，但您可以根据需要添加。）

frontend:
 phases:
   build:
     commands:
           - EXAMPLE_API_KEY_1=$EXAMPLE_API_KEY_1
           - EXAMPLE_API_KEY_2=$EXAMPLE_API_KEY_2

开始或重新开始构建。

我使用了@leandro 的答案并混合了来自this question 的答案，让它为我工作。

【参考方案6】：

这对我将 React 部署到 Amplify 很有用

放大.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

在 App.js 中

const client = new ApolloClient(
  uri:
    process.env.NODE_ENV !== 'production'
      ? 'http://localhost:1337/graphql'
      : process.env.REACT_APP_ENDPOINT,
  cache: new InMemoryCache(),
);