我有一个 React/Node 应用程序，我正尝试在 AWS 放大上托管它。第一次尝试，我的应用程序已部署，但由于缺少环境变量，我看到一些页面没有加载。我在部署之前将它们添加到 AWS 控制台，但它不起作用。然后我做了一些搜索，我发现我需要将“amplify.yml”文件修改为：
build:
commands:
- npm run build:$BUILD_ENV
但不仅它不起作用，该应用程序也不再起作用。有任何想法吗？
如何将环境变量添加到 AWS 放大？
IT技术
node.js
reactjs
environment-variables
aws-amplify
2021-04-22 21:00:40
6个回答
正如这个问题特别引用的那样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 控制台中，在 App Settings > Environment variables 下：
最后，您还需要在 App Settings > Build Settings 下添加此引用：
注意：“BUILD_ENV”可以是您希望的任何字符串。在环境变量中，您可以提供必要的 DEV/PROD 覆盖。
不要使用这种方法存储秘密密钥，AWS 为此提供了一个秘密管理器。此方法适用于可发布的密钥，例如连接到 Firebase 或 Stripe，并且密钥可以公开。
关于环境变量的 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 中存储任何敏感的内容。
@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
（带 $ 的那个是对你放在放大中的那个的引用。另外我认为你必须在 = 符号之间没有空格）
然后触发构建，然后交叉手指。
为了让@leandro 的答案起作用，我必须将 AWS 环境变量名称括在花括号中：
build:
commands:
- npm run build
- VARIABLE_NAME_1=${VARIABLE_NAME_1}
作为评论可能更好，但我没有足够的分数来发表评论。
对@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 的答案并混合了这个问题的答案以使其对我有用。