应用程序由 Amplify 提供服务时未定义的应用程序环境变量答案

【问题标题】：Application environment variables undefined when application is served by Amplify应用程序由 Amplify 提供服务时未定义的应用程序环境变量
【发布时间】：2020-12-14 09:02:42
【问题描述】：

我有一个由 AWS Amplify 托管的 Vue.js 应用程序。

在 Vue 中，可以使用 .env 在应用程序范围内设置环境变量。文件。我目前将此类文件用于开发和生产模式，包含不同的值。在本地构建和服务我的应用程序时，上述工作按预期工作。但是，一旦 Amplify 部署了我的应用程序（在我的例子中，我使用 Amplify 的 CD 功能），这些变量就没有定义。

我知道我可以在 Amplify 中定义相同的环境变量，但这意味着我需要在两个地方管理这些值，因为在开发时不会重新部署。所以这似乎很容易出错（例如，当我需要进行更改时，我需要记住更新应用程序端和放大控制台上的变量）。

我想知道这种行为是预期的还是我的设置中缺少某些东西。

谢谢！

【问题讨论】：

我在我的 React (CRA) 应用程序中遇到了同样的问题。原来我没有将我的.env 文件推送到 GitHub（在某些情况下这被认为是一种很好的做法）。所以 Amplify 上的 yarn build 无法注入我的环境变量。为了解决这种情况，我所要做的就是将 .env 文件推送到我的 GH 存储库，然后我的所有 env vars 立即停止为 undefined 并且所有值在我的应用程序 JS 代码中都可用 process.env.REACT_BLAH_XYZ 等。这可能是也是你的问题的原因。

标签： vue.js aws-amplify

【解决方案1】：

我的 React 应用程序也遇到了同样的问题。
问题是，您的应用程序中需要有一个包含所有环境变量的 .env 文件。

为什么？——背后的原因是，它会生成静态 HTML、CSS 和 JS 文件。这些文件在运行时无法访问process。

在 Amplify 中添加所有环境变量后，您必须在 App build specification 的 build 阶段再添加一个命令。

具体实现方法可以参考this official documentation。

如果您不太关心环境变量，可以使用此 hack：printenv。这会将您的操作系统和应用程序的所有环境变量存储在.env 文件中。

我的配置如下所示：

build:
      commands:
        - 'printenv >> .env'
        - 'npm run build'

【讨论】：